HTML・CSS 記事一覧

display: flex で横並びにした画像が縦に伸びてしまう問題の対処法

display: flex で横並びにした画像が縦に伸びてしまう問題の対処法

2021/04/24 HTML・CSS

Flexbox で、高さの要素が違う画像を横並びにしたときに発生する問題。高さが短いほうの画像が、高さの長い画像に合わせて縦に伸びてしまう事象が起こります。まずはサンプルをご覧くだ...

HTML で右下や右上に小さい文字をつけるタグ。CSS は使いません

HTML で右下や右上に小さい文字をつけるタグ。CSS は使いません

2020/12/09 HTML・CSS

立法メートル m3 や平方メートル m2 といった単位、二酸化炭素 CO2 や水 H2O の化学式のように、文字の右上や文字の右下につける小さい文字を HTML で表現する方法は...

JavaScript で取得した値・計算した結果を CSS に反映する方法

JavaScript で取得した値・計算した結果を CSS に反映する方法

2020/11/19 HTML・CSS

CSS には四則演算が行える calc() 関数があります。この中で使えるのは px, em, %, vw といった長さや割合の数値のみ。表示されている画面のサイズや解像度といった...

CSS で背景にストライプ柄を設定する方法【縦・横・斜めの縞模様】

CSS で背景にストライプ柄を設定する方法【縦・横・斜めの縞模様】

2020/07/09 HTML・CSS

当ブログのヘッダーに採用しているストライプ柄は、画像ではなく CSS で表現しています。 わざわざ画像を用意して background-image: URL() で指定しなく...

CSS で first-child かつ last-child の要素を表現する方法

CSS で first-child かつ last-child の要素を表現する方法

2020/07/09 HTML・CSS

まず CSS の書き方のルールとして A かつ B の条件を満たす記述方法があります。 HTML <!-- クラスが a かつ b の要素 --> <d...

YUI Compressor で css の .min ファイルを生成すると calc 関数でスペースが圧縮される問題を解決する方法

YUI Compressor で css の .min ファイルを生成すると calc 関数でスペースが圧縮される問題を解決する方法

2018/01/06 HTML・CSS

CSS の calc 関数は、width や height のようなサイズを指定するプロパティにおいて、パーセント (%) とピクセル (px) のサイズを混在して定義する場合に用...

スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

2016/02/12 HTML・CSS

スマートフォンでネットサーフィンをしていると、サイトによってアドレスバーの部分が彩色されているページがあることに気付くでしょう。通常はグレーですが、青やらオレンジやら、ページによっ...

CSS で画像を丸く切り取って表示する方法

CSS で画像を丸く切り取って表示する方法

2016/01/29 HTML・CSS

Twitter や Facebook など SNS のプロフィールアイコンで、画像が丸く切り抜かれているのをよく見かけます。これは画像が編集されたものではなく、画面表示時に CSS...

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説!

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説!

2016/01/27 HTML・CSS

CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。 絶対的に必要なものではありませんが、内容を理解すればとて...

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】

2016/01/20 HTML・CSS

Font Awesome はアイコンをフォントで表現できる便利なツールです。このサイトでも、各種アイコンは画像ファイルでなく Font Awesome を利用しています。CDN で...

フィード(RSS)アイコンを HTML と CSS だけで実装する方法

フィード(RSS)アイコンを HTML と CSS だけで実装する方法

2016/01/19 HTML・CSS

形状が単純なものであれば、画像を用意しなくても HTML と CSS で実装することができます。以前、三本線のメニューアイコン、通称ハンバーガーメニューを CSS で実装しました。...

メニューの三本線アイコンを HTML と CSS だけで実装する方法

メニューの三本線アイコンを HTML と CSS だけで実装する方法

2016/01/18 HTML・CSS

スマホで Web ページを見ていると、画面の上によくある3本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニュー表示のアイコンとして用いられます。 今回...

小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

2016/01/13 HTML・CSS

Web 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することが...

CSS で HTML 内の画像やテキストを中央寄せにする方法

CSS で HTML 内の画像やテキストを中央寄せにする方法

2015/12/24 HTML・CSS

CSS の左右中央寄せ・上下中央寄せにはいくつか実装方法がありますが、根本的な考え方は大きく分けて2つになります。 外側のブロック要素にスタイルを設定して、内側の要素を中...

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

2015/12/14 HTML・CSS

文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。 蛍光ペン風...

Input タグ Text ボックスの size 属性はブラウザにより解釈が異なるので注意

Input タグ Text ボックスの size 属性はブラウザにより解釈が異なるので注意

2015/07/20 HTML・CSS

HTML の Input タグで利用できる size 属性は、Input のコントロールに表示する文字数を定義する属性として用意されています。しかし日本語の場合、半角文字と全角文字...

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

2014/01/14 HTML・CSS

CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは...

Googleの検索結果にカテゴリ(パンくずリスト)を表示させる方法

Googleの検索結果にカテゴリ(パンくずリスト)を表示させる方法

2013/12/12 HTML・CSS

通常 Google の検索結果には、タイトルと URL が表示されますが、その URL 部分にパンくずリストを表示させるには、ある決められたルールに則り HTML を記述をすれば対...

このブログの運営者

NJ

元システムエンジニア。個人事業主として独立して Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりしています。