kid

webのお仕事

kid

webのお仕事

実体参照で文字化けしない①を。

UTF-8では①は文字化けしません。 でもShift-jisを使用しているサイトで①を使いたい場合、実体参照にすることで文字化けを心配せず利用できます。 ①の実体参照 ①の文字は実は2種類あります。 ①と➀です。見た目の違いが分かりづらいですね。フォントにもよりますが、少し違います。 ここでのポイントは①は実体参照が㊿まである事です。 ➀の方は➉までです。特に①と➀の差が大きく見える場合、⑪以降もある方を利用する事で統一感がでます。これは実体参照にしなくてもいいUTF-8

kid

    • 導入が怖くない。gulpのインストールと使い方。

      【重要】 -g（グローバル）のインストールはちょっと待った！ 調べるといっぱい出てくるgulpのインストール方法で　-g（グローバル）と書かれている方法をそのまま鵜吞みにするのは待ってください。 gulpをグローバルで使用することは”あまり”ありません。 おそらくは固有の案件で使っていくと思います。 分からないうちにグローバルでのインストールは控えた方が良いです。やってもいいんですが。 グローバルでもローカルでも大差ないですが、グローバルでファイルが置かれる場所は「C

      kid

      • SSIは使わなくていい。Ajaxでも大丈夫。

        指定したIDへAjaxでのファイル追加を関数にしています。 引数はID名とファイルのパスにしているので、サイト内で共通して使い回せます。 まずはjQueryでどう書いているか。 JavaScript（jQueryあり） function ssiLoad(target, file) { var targetObj = $(target); $.ajax({ cache: 'false', dataType: 'html', url: file, succe

        kid

        • plainなJavaScriptで書くAjax

          cssでアニメーションを作るようになると、jQueryの出番がないサイトも多くなってきます。 個人的にはjQueryなしではセレクタ指定の仕方よりも、plain（素の）JavaScriptでAjaxどう書くんだ？となるので、まとめておきたい。 まずはjQueryでどう書いているか。 JavaScript（jQueryあり） var ajaxUrl = '';$.ajax({ cache: 'false', dataType: 'text', url: ajaxUrl,

          kid

        実体参照で文字化けしない①を。

        kid

          cssで作る4色のボーダーをあれこれ作ってみた。

          cssでなんでも作れるようになってきたけど、 このデザインどうしたら作れるんだ？となるものを作ってみた。 ↑サムネイル画像みたいなボーダーを画像ではなく作ろうとしたことを きっかけに、4色で分かれたボーダーのサンプルです。 左上・右上・右下・左下で分かれたボーダーをつくる HTML <div class="rainbowBorder"> <p class="rainbowBorder__text">text</p></div> CSS .rainbowBorder

          kid

          cssで作る4色のボーダーをあれこれ作ってみた。

          kid

          私的ノートの共有：CSSの命名で使える英語まとめ

          英語一覧に入る前に この英語リストはBEMの特にEやMで使えるものをまとめています。 BEMとは ・B（block） 　→もの（名詞）、ボタン、グリッド、タブ、見出し、画像など ・E（__element） 　→中身（名詞）、子孫要素、タグ名、タイトル、画像、テキストなど ・M（--modifier） 　→状態、形容詞 という形式でCSS名をつけます。 ※単語は省略しない ※BEMは単語を「-」 「_」を1つでつなげます。 　が、私は単語をローワーキャメルケースにします

          kid

          私的ノートの共有：CSSの命名で使える英語まとめ

          kid