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
2024年11月3日 リンク先が別ウィンドウで表示される場合にアイコンを表示したい 属性セレクタと「::after」セレクタを使用して、リンク先を別ウィンドウで開く設定になっている<a>タグにテキストにだけ、後ろにアイコン画像を表示します... カテゴリー WEB
2024年11月3日 キーボードの字をキーボードらしく見せたい アプリケーションの操作説明やヘルプページで、キーボードの使用方法を掲載したいとき<kbd>タグを使用します。<kbd>タグは、フォントが等幅フォント... カテゴリー WEB
2024年11月3日 タイトルとサブタイトルを表示したい 記事などのタイトルの下にサブタイトルをつけたいときに、つい<h1>タグと<h2>タグの両方を使ってマークアップをしがちです。しかし、その方法は正しい... カテゴリー WEB
2024年11月3日 Webフォント「Google Fonts」を使用したい Google Fontsを使用することで、無料でWebフォントを使用することができます。フォントの選択肢が増えます。CSSの「Webフォント」という機能を使うと... カテゴリー WEB
2024年11月2日 ファビコンを設定したい ファビコンとは「そのサイトのアイコン」という位置づけで、ブラウザのブックマークや、アドレスバーに表示される画像です。画像のフォーマットにはPNG形式、GIF形式... カテゴリー WEB
2024年11月2日 (フォーム)ラベルとテキストフィールドを横に並べて整列させたい 画面が広いパソコン向けのフォームでは、ラベルとフォーム部品が横に並んでいたほうが見た目がよいです。そうしたレイアウトの場合、以前はテーブルを使うケースがありまし... カテゴリー WEB
2024年11月2日 (フォーム)送信ボタンの見た目を変更したい 送信ボタン(<input type=”submit”>)には様々なCSSを適用できます。ブラウザが用意しているデフォルトの送信ボタ... カテゴリー WEB
2024年11月2日 (フォーム)入力チェックでエラーになったテキストフィールドのスタイルを変更したい 入力内容に不備があるテキストフィールドやテキストエリアにスタイルを適用することができます。「:required」セレクタは、必須入力項目required属性がつ... カテゴリー WEB
2024年11月2日 (フォーム)選択されたらテキストフィールドの色を変えたい テキストフィールド(メールアドレス用、電話番号用のテキストフィールドを含む)やテキストエリアが選択され、入力可能になった状態のことを「フォーカス状態」といいます... カテゴリー WEB