display: flex で横並びにした画像が縦に伸びてしまう問題の対処法
Flexbox で、高さの要素が違う画像を横並びにしたときに発生する問題。高さが短いほうの画像が、高さの長い画像に合わせて縦に伸びてしまう事象が起こります。まずはサンプルをご覧くだ...
HTML で右下や右上に小さい文字をつけるタグ。CSS は使いません
立法メートル m3 や平方メートル m2 といった単位、二酸化炭素 CO2 や水 H2O の化学式のように、文字の右上や文字の右下につける小さい文字を HTML で表現する方法は...
JavaScript で取得した値・計算した結果を CSS に反映する方法
CSS には四則演算が行える calc() 関数があります。この中で使えるのは px, em, %, vw といった長さや割合の数値のみ。表示されている画面のサイズや解像度といった...
CSS で背景にストライプ柄を設定する方法【縦・横・斜めの縞模様】
当ブログのヘッダーに採用しているストライプ柄は、画像ではなく CSS で表現しています。 わざわざ画像を用意して background-image: URL() で指定しなく...
CSS で first-child かつ last-child の要素を表現する方法
まず CSS の書き方のルールとして A かつ B の条件を満たす記述方法があります。 HTML <!-- クラスが a かつ b の要素 --> <d...
YUI Compressor で css の .min ファイルを生成すると calc 関数でスペースが圧縮される問題を解決する方法
CSS の calc 関数は、width や height のようなサイズを指定するプロパティにおいて、パーセント (%) とピクセル (px) のサイズを混在して定義する場合に用...
スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い
スマートフォンでネットサーフィンをしていると、サイトによってアドレスバーの部分が彩色されているページがあることに気付くでしょう。通常はグレーですが、青やらオレンジやら、ページによっ...
CSS で画像を丸く切り取って表示する方法
Twitter や Facebook など SNS のプロフィールアイコンで、画像が丸く切り抜かれているのをよく見かけます。これは画像が編集されたものではなく、画面表示時に CSS...
【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説！
CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。 絶対的に必要なものではありませんが、内容を理解すればとて...
【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索！クリック１つでコードをコピー【アイコン一覧】
Font Awesome はアイコンをフォントで表現できる便利なツールです。このサイトでも、各種アイコンは画像ファイルでなく Font Awesome を利用しています。CDN で...
フィード（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 を記述をすれば対...
