Web

はじめに ファビコン（Favicon）とは、ブラウザーのタブやブックマークなどで表示される小さなアイコンです。 このブログでは、サイトのルートディレクトリに「favicon.ico」ファイルを配置していたのですが、最近はスマホやタブレットにも対応したファビコンを設置したほうがよさそうなので、どういう設定が良いのか調べてみました。

＠font-faceとは @font-faceは、CSSでWebフォントを指定するためのルールです。 @font-face { font-family: ExampleFont; src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; } Webフォントはインターネット上から読み込んで利用するフォントのことで、ユーザーがフォントをインストールしていなくても、指定したフォントを表示させることができます。

はじめに フリーフォントなどをサーバーにアップロードしてWeb表示に使用する方法のメモです。 カスタムフォントを使用する CSSの@font-faceを使用すると、カスタムフォントをWeb表示に使用できるようになります。 以下、/fontsディレクトリーにカスタムフォント（customfont.woff2、customfont.woff）をアップロードして表示に使用するサンプルです。

はじめに ヘッダーにCSSで自動連番を付与するようにしたので、そのメモです。 CSSで自動連番を付与する方法 CSSのカウンター機能と擬似要素を利用して連番を生成できます。 <h1>ヘッダー</h1> <h2>ヘッダー</h2> <h3>ヘッダー</h3> <h3>ヘッダー</h3> <h2>ヘッダー</h2> <h3>ヘッダー</h3> <h3>ヘッダー</h3> h1 { /* h2のカウンターを0にする */ counter-reset: h2-counter; } h2 { /* h3のカウンターを0にする */ counter-reset: h3-counter; } h2::before { /* h2のカウンターを1増やす */ counter-increment: h2-counter; /* h2のカウンターを表示し、その後ろにピリオドとスペースを表示 */ content: counter(h2-counter) ". "; } h3::before { /* h3のカウンターを1増やす */ counter-increment: h3-counter; /* h2とh3カウンターを表示し、その後ろにピリオドとスペースを表示 */ content: counter(h2-counter) ". " counter(h3-counter) ". "; } 表示結果 📝 上記コードの動作

はじめに 本ブログのCSSを修正するにあたり、CSSの結合子（combinators）の細かい仕様がわかっていなかったため調べてまとめてみました。 結合子の種類 CSSで使用される主な結合子は以下の4つです。 結合子 表記例 対象とする要素 子孫結合子 div p { } 子孫要素（子要素、孫要素、…） 子結合子 div > p { } 子要素（孫要素は対象外） 次兄弟結合子 div + p { } 兄弟要素の最初の要素 後続兄弟結合子 div ~ p { } 兄弟要素（すべて） サンプルコード 使用するHTMLは以下のとおりです。