2024年11月4日伸縮する3コラムレイアウトを作成した（flexbox版）フレックスボックスを使った伸縮する3コラムレイアウトを解説します。フロートを使うよりはるかにシンプルに作れます。サイドバーの位置を入れ替えたり、スマートフォンの... カテゴリー WEB
2024年11月4日伸縮する2コラムレイアウトを作成したい（flexbox版）フレックスボックスを使ってメインコンテンツの領域とサイドバーを横に並べます。伸縮するコラムレイアウトでは、通常はメインコンテンツの領域だけを伸縮させ、サイドバー... カテゴリー WEB
2024年11月4日パソコン向けのグローバルナビゲーションを作成したい（flexbox版）「フレックスボックス」は、フロートに変わるCSSの新しいレイアウト機能です。複数のボックスを横や縦に並ばせたり整列させたりするのを、フロートより柔軟に簡単にでき... カテゴリー WEB
2024年11月4日画像を使ったナビゲーションを作成したい（float版）ナビゲーションの各項目を、テキストではなく画像（背景画像）で表示します。そのためには、「スプライト」というテクニックを使用します。 スプライトとは ナビゲーショ... カテゴリー WEB
2024年11月4日パソコン向けグローバルナビゲーションを作成したい（float版）グローバルナビゲーションを作成するには、通常であれば縦に並ぶ<li>を横に並ばせる必要があります。その方法には大きく２つの方法があります。その方法の一つが... カテゴリー WEB
2024年11月4日スマートフォン向けのグローバルナビゲーションを作成したいスマートフォン向けのデザインでは、多くの場合グローバルナビゲーションを横ではなく縦に並べます。スマートフォン向けのグローバルナビゲーションを作る場合は、画面サイ... カテゴリー WEB
2024年11月4日ローディングサインを表示したい画像が表示されるまで、読み込み中であることを示す「ローディングサイン」を表示させておくことがあります。一般的には、ローディングサイン自体も画像で作成します。GI... カテゴリー WEB
2024年11月4日プルダウンメニューの見た目を変えたいフォーム部品の一部など、たとえば<select>タグには、ブラウザが用意した特殊なアピアランス（見た目）が用意されています。このアピアランスが用意されてい... カテゴリー WEB
2024年11月3日テキストフィールドのすぐ横に送信ボタンを配置したいサイト内検索フォームで、テキストフィールドと送信ボタンを横にくっつけます。このテクニックのコツは、実はHTMLにあります。テキストフィールドの<input... カテゴリー WEB
2024年11月3日検索フィールドの中に虫眼鏡アイコンを表示させたいテキストフィールド内に虫眼鏡アイコンを表示させます。フォーム部品にbackgroundプロパティを適用すれば、そのフィールド内に画像を表示できます。また、アイコ... カテゴリー WEB
2024年11月3日カレンダーを表示したいWebサービスやブログなど、特定のジャンルのWebサイトを作成するときは、カレンダーを作ることがよくあります。サーバー側のプログラムでHTMLが出力されることが... カテゴリー WEB
2024年11月3日ウィンドウ幅に合わせて伸縮するキービジュアルを作成したいウィンドウ幅に合わせて伸縮する画像を表示します。画像は<img>タグで表示して、最大1200pxまで拡大します。それよりウィンドウ幅が大きいときは、画像を... カテゴリー WEB
2024年11月3日ウィンドウ幅いっぱいに背景画像を表示したいWebサイトのトップページなどで、ブラウザのウィンドウサイズいっぱいに広がる画像を表示させたいことがあります。実現する方法としては、<div>タグに、大き... カテゴリー WEB
2024年11月3日実際のサイズとは異なる大きさで画像を表示したいウィンドウサイズに合わせて伸縮するデザインのページを作成するとき、スマートフォン向け、もしくはレスポンスシブWebデザインのページを作成するなど、実サイズでは異... カテゴリー WEB
2024年11月3日バッチを重ねて表示したい「新着」や「新規」といった意味の通知をしたいとき、ボックスの右上に「New」と書かれたバッチ（マーク）を、ポジション配置で表示させます。left/top/rig... カテゴリー WEB
2024年11月3日画像の上にテキストを重ねたい画像の上にテキストを重ねるには、ポジション配置を行います。記事のリンクやトップページに掲載されるスライドショーなどでよく用いられるデザインです。 サンプル &l... カテゴリー WEB
2024年11月3日画像の上に別の画像を重ねて表示したい座標を指定して要素を自由に配置したいとき、画像の上に別の画像を重ねたいとき「ポジション配置」と呼ばれるCSS機能を使って、画像の上に別の画像を重ねます。ポジショ... カテゴリー WEB
2024年11月3日正方形の画像を円形に切り抜きたい画像を表示する際の演出として、写真を丸く切り抜きたいとき<img>タグに適用されるスタイルに「border-radius:50%;」と書いておくと、写真を... カテゴリー WEB
2024年11月3日サムネイル画像とテキストを横に並べたいパソコン向けんレイアウトであればサイドバーや記事本体の下に、スマートフォン向けのレイアウトであれば記事本体の下によく配置されている。複数の記事へのリンクをリスト... カテゴリー WEB
2024年11月3日ページネーションを作成したいサイト内の複数の検索結果を表示するページなどで、次のページへ行ったり前のページ戻ったりするUIをページネーションと言います。ページネーションの各ボタンは序列がは... カテゴリー WEB
2024年11月3日タブボタンを作成したいタブで表示を切り替えるUIを作成したいとき。「タブ」とは、複数のボタンが横に並んだUI部品のことです。ブラウザの「タブ」のように、ページ内で複数のコンテンツを瞬... カテゴリー WEB
2024年11月3日見出しがついたボックス（パネル）を作成したいツールパネルのような形状のボックスを作成し、そのボックスの四辺の角を丸くします。一見単純なデザインですが、ちょっとしたCSSのコツがいります。 パネル作成のコツ... カテゴリー WEB
2024年11月3日縦に並んだナビゲーションを作りたいWebサイトの主要なページ同士をリンクして、行き来をしやすくするのが「ナビゲーション」と呼ばれるUI部品です。同一カテゴリ内、企業サイトでいえば会社案内やサービ... カテゴリー WEB
2024年11月3日ボックスの上部だけ角を丸くしたボタンを作りたい主にタブ型のボタンやUI部品をつくるとき、ボックスの角を丸くするborder-radiusプロパティを使用する。四辺は同じように丸くするだけでなく、それぞれの角... カテゴリー WEB
2024年11月3日アイコンとテキストが上下に並ぶボタンを作りたいアイコンの下にテキストがついているボタンで、ボタン全体をクリックできるようにしたい場合のテクニックです。ボタンになるHTMLを<a>～</a>で囲ん... カテゴリー WEB
2024年11月3日記事に付属するキーワードやタグを表示したいニュースサイトやブログサイトで、記事ページにキーワードやカテゴリ、タグなどを表示したいとき<a>タグを使用するのが一般的です。HTML構造をできるだけシン... カテゴリー WEB
2024年11月3日パンくずリストを作成したい「パンくずリスト」とは、ユーザーがいまWebサイトのどこを見ているのかがわかるように、ホームからリンクを並べて表示したものです。主にパソコン向けのレイアウトで使... カテゴリー WEB
2024年11月3日テキストに太いペンで引いたような下線をつけたい太いマーカーペンで書いたような演出をしたいときは。テキストに重なるほど太い下線は、border-bottomプロパティで引くことができません。そこで、背景にグラ... カテゴリー WEB
2024年11月3日テキストをカプセル型に囲みたいテキストをボタンのような形に見せたいとき、背景を設定するbackgroundプロパティや、角丸四角形にするborder-radiusプロパティなどは、<s... カテゴリー WEB
2024年11月3日PDFなど特定のファイルへのリンクだけアイコンや囲みを表示したい属性セレクタと::afterセレクタを利用して、リンク先がPDFファイルつまり、リンク先の拡張子が「.pdf」のときだけ適用されるスタイルを作成します。PDFフ... カテゴリー WEB
