HTML・CSS 記事一覧
YUI Compressor で css の .min ファイルを生成すると calc 関数でスペースが圧縮される問題を解決する方法
CSS の calc 関数は、width や height のようなサイズを指定するプロパティにおいて、パーセント (%) とピクセル (px) のサイズを混在して定義する場合に用...
スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い
スマートフォンでネットサーフィンをしていると、サイトによってアドレスバーの部分が彩色されているページがあることに気付くでしょう。通常はグレーですが、青やらオレンジやら、ページによっ...
CSS で画像を丸く切り取って表示する方法
Twitter や Facebook など SNS のプロフィールアイコンで、画像が丸く切り抜かれているのをよく見かけます。これは画像が編集されたものではなく、画面表示時に CSS...
【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説！
CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。 絶対的に必要なものではありませんが、内容を理解すればとて...
Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた
アイコン Web フォントと言えば Font Awesome です。このサイトでもカレンダーや SNS のアイコンは、画像ファイルでなく Font Awesome を利用しています...
フィード（RSS）アイコンを HTML と CSS だけで実装する方法
形状が単純なものであれば、画像を用意しなくても HTML と CSS で実装することができます。以前、三本線のメニューアイコン、通称ハンバーガーメニューを CSS で実装しました。...
メニューの三本線アイコンを HTML と CSS だけで実装する方法
スマートフォンで Web ページを閲覧している時に見かける三本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニューの表示を意味しています。シンプルなアイコンで...
小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック
Web 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することが...
CSS で HTML 内の画像やテキストを中央寄せにする方法
CSS の左右中央寄せ・上下中央寄せにはいくつか実装方法がありますが、根本的な考え方は大きく分けて２つになります。 外側のブロック要素にスタイルを設定して、内側の要素を中...
CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話
文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。 蛍光ペン風...
Input タグ Text ボックスの size 属性はブラウザにより解釈が異なるので注意
HTML の Input タグで利用できる size 属性は、Input のコントロールに表示する文字数を定義する属性として用意されています。しかし日本語の場合、半角文字と全角文字...
beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法
CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは...
Googleの検索結果にカテゴリ(パンくずリスト)を表示させる方法
通常 Google の検索結果には、タイトルと URL が表示されますが、その URL 部分にパンくずリストを表示させるには、ある決められたルールに則り HTML を記述をすれば対...
