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 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!