HTML・CSS 記事一覧

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

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

2016/02/12 Android, HTML・CSS

スマホでネットサーフィンをしていた時のことです。ふとアドレスバーの部分が彩色されているページがあることに気が付きました。デフォルトでは灰色なのですが青やらオレンジやら、ページによっ...

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

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

2016/01/29 HTML・CSS

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

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

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

2016/01/27 HTML・CSS

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

Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

アイコン Web フォントと言えば Font Awesome です。このサイトでもカレンダーや SNS のアイコンは、画像ファイルでなく Font Awesome を利用しています...

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

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

2016/01/19 HTML・CSS

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

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

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

2016/01/18 HTML・CSS

スマートフォンで Web ページを閲覧している時に見かける三本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニューの表示を意味しています。シンプルなアイコンで...

小さい画像ファイルは base 64 変換してソースコードへ直接貼り付けよう

小さい画像ファイルは base 64 変換してソースコードへ直接貼り付けよう

2016/01/13 HTML・CSS

Web サイトのデザインを勉強しようと様々なサイトの構成からソースコードまで眺めていたのですが、画像イメージの参照方法として見慣れない記述がありました。background...

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

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

2015/12/24 HTML・CSS

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

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

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

2015/12/14 HTML・CSS

文章の一部を強調表示をするために、NJ-CLUCKER では蛍光ペン風マーカーの 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 サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ