CSS

CSSのlist-style-typeプロパティを使えば、順序付きリスト（番号付きリスト）の番号を大文字のローマ数字に変更できます。本記事ではその具体的な方法をわかりやすく解説します。 HTMLで順序付きリストを作成する基本 HTMLで順序付きリストを作成するには、以下の2つのタグを使用します。 順序付きリスト全体を定義する <ol> タグ 個々のリスト項目を定義する <li> タグ 基本的な記述例は以下のとおりです。 <ol> <li>リスト項目</li> <li>リスト項目</li> <

CSSを使って、順序付きリストに小文字のローマ数字を表示させる方法を解説します。 HTMLで順序付きリストを作成するには、次の2つのタグを使用します。 <ol> タグ：順序付きリスト全体を定義します。 <li> タグ：リスト内の各項目を定義します。 記述例は以下のとおりです。 デフォルトでは、順序付きリストの各項目には通常のアラビア数字が割り当てられます。 リスト項目 リスト項目 リスト項目 このデフォルトの10進数スタイルは、すべてのブラウザに組み込まれている「ユーザーエージェントスタイルシート（UAS）」によって提供されているものです。CSSでは li

CSSを使ってWebページのレイアウトを中央揃えにする、2つの異なる方法をご紹介します。 たとえば、Webサイトの記事レイアウトをスタイリングしていて、<article>要素をページの左右中央にぴったり配置したいとしましょう。 これを実現する方法はいくつかあります。最もシンプルで定番の手法は、CSSのmarginプロパティを使い、左右の値をautoに設定することです。 無料のCodePenエディタを使えば、実際に手を動かしながら試すこともできます。 まず、記事レイアウト用の基本的なHTMLマークアップを見てみましょう。 <article> <h1>記事の

CSSの background-image プロパティを使ってWebサイトに背景画像を設定した際、画像がページの幅と高さいっぱいに無限に繰り返し表示されてしまうことに気づいたことはありませんか? これは、ブラウザのデフォルト設定で background-repeat プロパティが repeat に指定されているためです。デフォルトでは、背景画像が要素全体を埋め尽くすまでタイル状に繰り返し表示される仕組みになっています。 background-repeat を no-repeat に変更する 背景画像の繰り返しを止めるには、デフォルトの repeat の値を no-repeat に上書きするだけ

Webページ上の順序なしリスト（<ul>）は、デフォルトで丸い黒点（ディスク）の箇条書きが表示されます。しかし、ナビゲーションメニューやタブなどのUIコンポーネントを作成する際には、この箇条書きを非表示にしたいケースがよくあります。 ナビゲーションメニューの典型的なHTML構造 以下は、Webサイトのナビゲーション／メニューコンポーネントとして一般的に使われるHTMLの構造です。 <nav> <ul> <li>ホーム</li> <li>会社概要</li> <li>お問い合

この記事では、CSSを使ってテキスト要素に線形グラデーションの色を追加する方法と、初心者が陥りやすいグラデーションの失敗を避けるためのコツをわかりやすく解説します。 HTMLのテキスト要素にグラデーションカラーを適用するには、次の3つのCSSプロパティを使用します。 background -webkit-background-clip -webkit-text-fill-color 「なぜテキストの色付けにbackgroundプロパティを使うのか?」と疑問に思うかもしれません。確かに少しトリッキーな手法に見えますが、実際にきちんと機能します。順を追って見ていきましょう。 ここでは例として、

HTMLの<input>要素のプレースホルダー(placeholder)テキストをCSSでカスタマイズするには、擬似要素(pseudo-element)をターゲットに指定する必要があります。これを実現するのが、CSSの擬似セレクターである::です。 通常のinput要素とプレースホルダーテキスト まずは、プレースホルダー付きのシンプルなinput要素を見てみましょう。 ブラウザのデフォルトスタイルでは、プレースホルダーテキストは次のように表示されます。 CSSでプレースホルダーの色を変更する それでは、::placeholderセレクターを使って、プレースホルダーのテキストを赤

この記事では、CSSを使ってカーニング（文字詰め）を調整する方法を解説します。 Webフォントにカーニングデータが含まれている場合、ブラウザは自動的にその適用の可否を判断します。この判断は、CSSの font-kerning プロパティによって制御されており、初期値は auto に設定されています。 font-kerning: auto; つまり、フォント自体にカーニングデータが組み込まれていても、何らかの理由でブラウザ側の判断によりカーニングが適用されないことがあるのです。 カーニングを確実に有効にするには フォントがカーニングデータを持っている場合、ブラウザの判断に関わらず確実に適用したい

CSSのfont-stretchプロパティを使うと、テキストを細く（コンデンスド＝狭い字幅）したり、太く広げたり（エクスパンデド＝広い字幅）することができます。 このようなフォントは、一般的に「コンデンスド（縦長・細身）フォント」や「エクスパンデド（横長・拡張）フォント」と呼ばれています。 コンデンスドフォントとエクスパンデドフォントの違い コンデンスドフォント：ストローク（線の太さ）が細く、通常のフォントに比べて文字間隔（レタースペーシング／リーディング）がかなり狭くなっています。限られたスペースに多くの情報を収めたい場合に便利です。 エクスパンデドフォント：高さに対してストロークが通常よ

CSSのfont-styleプロパティを使うと、テキストに3種類のフォントスタイルを適用できます。指定できる値は「normal（標準）」「italic（イタリック）」「oblique（斜体）」の3つです。 .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } 3つの値の意味 normal：通常のテキストで使用されるデフォルトのローマン体（標準スタイル）です。 italic：右に少し傾いたフォントで、テキストを強調するために使われます。

CSSのfont-variantプロパティを使えば、テキストにスモールキャップス（小型大文字）を適用できます。この記事では基本的な使い方に加えて、「本物」と「疑似（フェイク）」のスモールキャップスの違いや、そもそもスモールキャップスを使うべきかどうかの判断基準まで解説します。 CSSのfont-variantプロパティは、テキストを通常の字形で表示するか、スモールキャップスの字形で表示するかを指定します。指定できる値は次の3つです。 normal：通常のテキストケース（デフォルト） inherit：親要素の値を継承 small-caps：スモールキャップスを表示 font-variantの

CSSの@importルールを使えば、別のスタイルシートを簡単に読み込むことができます。この記事では、@importの基本的な使い方から、記述時の重要な注意点、メディアクエリとの組み合わせ方まで、わかりやすく解説します。 CSSの@importは、あるCSSファイルの中に別のCSSファイルを読み込むためのアットルールです。コードベースが大きくなりつつあるWebサイトでは、特に役立つ機能です。 @importの基本的な使い方 基本的な書き方は以下のとおりです。 @import url(variables.css); この方法を活用すると、変数・タイポグラフィ・カラー・スペーシングなど、

CSSで要素をコンテナの下部に配置する基本 CSSを使えば、子要素を親コンテナの下部に簡単に固定配置できます。この記事では、positionプロパティを活用した基本的な方法を、コード例とともに解説します。 HTMLは親子関係で構成されています。子要素をコンテナの下部に配置するには、以下のプロパティと値を組み合わせて使用します。 position: relative;（親要素に指定） position: absolute;（子要素に指定） bottom: 0;（子要素に指定） まず、HTMLの構造は次のようになります。 対応するCSSは以下の通りです。 .parent { positi

CSSでグラデーションの背景色を設定するには、backgroundプロパティにlinear-gradient()関数を指定します。画像ファイルを用意する必要がなく、CSSだけで美しいグラデーション表現が実現できるのが魅力です。 基本的なグラデーションの設定方法 まずはシンプルなボックス要素を作成し、実際にグラデーションを適用してみましょう。 <div class=box></div> .box { width: 200px; height: 200px; background: linear-gradient(yellow, red); } このコードでは、

CSSにおけるRGBとRGBaカラーの違いを解説します。RGBaを活用すれば、ウェブサイトに美しく目を引くUIコンポーネントを作成できます。 RGBとRGBaは、CSSで使われる2つのカラーモデルです。どちらも、#282828のような16進数（Hexコード）カラーバリューの代替として利用できます。 RGBとRGBaの違いとは？ RGB：Red（赤）、Green（緑）、Blue（青）の頭文字 RGBa：Red（赤）、Green（緑）、Blue（青）に加えてAlpha（アルファ）チャンネルを持つ アルファは透明度を制御するためのチャンネルで、色の透け具合を細かく調整できます。 最初は分かりにく

HTMLとCSSを使って、ウェブサイトにぴったりのシンプルで美しいUIカードコンポーネントをデザインする方法を解説します。さらに、linear-gradient(線形グラデーション)を活用したテクニックで、カードを暗くしすぎることなくテキストを目立たせる方法も一緒に学びましょう。 UIカードとは、ウェブサイトにおける「前菜」のような役割を果たすUIコンポーネントです。一般的なUIカードには、テキスト、写真、アイコン、そして1つ以上のインタラクティブな要素(ボタンやリンクなど)が含まれます。 UIカードは、目的に応じてシンプルにも複雑にも設計できます。 今回は、必要最小限の要素だけで構成された、

この記事では、CSSのpaddingプロパティの使い方を基礎からわかりやすく解説します。 CSSのpaddingプロパティは、HTML要素の内側にある「コンテンツ」と「ボーダー」の間の余白（スペース）をコントロールするために使います。 paddingは、CSSのmarginプロパティと混同されがちです。marginは要素のボーダーの外側にスペースを追加するもので、まさにpaddingとは正反対の役割を持っています。 CSSパディングの基本 まず、テキストラベル（コンテンツ）を持つシンプルなbutton要素を見てみましょう。 <button>Button</button>

CSSにおけるマージン（margin）とパディング（padding）の違いについて、図解とコード例を使ってわかりやすく解説します。Webデザインの基礎となる重要な概念なので、しっかり理解しておきましょう。 マージンとパディングの違い まずは、最もシンプルな定義から始めます。 margin：HTML要素のボーダー（枠線）の外側にスペースを追加する padding：HTML要素のボーダーの内側にスペースを追加する マージンやパディングをHTML要素に適用すると、それぞれ次のように異なる働きをします。 上の図のように、マージンは要素の外側にある余白、パディングはボーダーとコンテンツの間にある内

CSSショートハンドプロパティ（省略記法）を使えば、スタイルシートのコード量を大幅に減らし、よりスッキリとした記述が可能になります。この記事では、その基本的な使い方と実例をわかりやすく解説します。 CSSショートハンドとは？ CSSのショートハンドプロパティとは、複数のスタイル宣言を1行にまとめて書ける便利な記法のことです。「少ないコードで、多くのことを実現できる」というのが最大のメリットです。 たとえば、h1要素にGeorgiaフォントファミリー、フォントサイズ42px、行の高さ1.25を指定したいとしましょう。 まずは、通常のCSSの書き方を見てみます。 h1 { font-fam

HTMLにはpreloadという属性があり、ページの読み込み時に、ブラウザへアセットを「どのように」、そしてより重要な「いつ」読み込むべきかというヒントを与えることができます。 preload属性は複数のHTML要素で利用できます。たとえば、<link>要素に追加すれば、CSSスタイルシートの取得（フェッチ）を早期に開始させることができます。 誤った使い方：preloadだけではスタイルシートは適用されない 一部のWebサイトでは以下のようなコードが紹介されていますが、この書き方は避けるべきです。 上記のコードはスタイルシートをプリロードするだけで、実際にページへ適用されるわけで