CSSを使用してテキストをレイアウトする方法

提供：Dev Guides
移動先:案内、検索

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Webページでのテキストの表示方法によって、コンテンツがどれだけ読みやすく、読者がコンテンツをどれだけ喜んで読むかが決まります。 Web 植字は、テキストをレイアウトする技術であり、コンテンツを制御して、読者に快適で効率的な読書体験を提供することを目的としています。

このチュートリアルでは、テキストコンテンツのレイアウトに最も効果的なCSSプロパティの使用方法を説明します。 line-height、letter-spacing、text-transformなどのプロパティをデモコンテンツとともに使用して、読みを最適化し、見出しを目立たせることでコンテンツ階層を定義します。 これらの概念とアプローチは、Webサイトでコンテンツをより適切に提示するのに役立ちます。

前提条件

HTMLおよびCSSファイルの設定

このセクションでは、チュートリアル全体でスタイルを設定するHTMLコンテンツを設定します。 このチュートリアルのHTMLの目的は、スタイルを設定するためのさまざまな要素と状況を提供することです。 また、CSSファイルを作成し、基本スタイルを設定します。

まず、テキストエディタでindex.htmlを開き、次のHTMLをファイルに追加します。

index.html 

<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

次に、<head>タグに、このページの文字セットにmetaタグ、ページのタイトルにtitle要素、metaモバイルデバイスでのページの処理方法とロードするCSSファイルを定義するタグ：

index.html 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Text Layout</title>
        <meta name="viewport" content="width=device-width" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;family=Quicksand:wght@700&amp;display=swap" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
    </body>
</html>

CSSファイルには、 GoogleFontsのフォントとこのセクションの後半で作成するstyles.cssファイルが含まれていることに注意してください。 Google Fontsの使用方法について詳しく知りたい場合は、 CSS でフォント、サイズ、色を使用してテキスト要素のスタイルを設定する方法を確認してください。

次に、ページの<body>タグに含まれるHTMLコンテンツを設定します。 このコンテンツは<article>に含まれ、<h1>要素、<h2>および<h3>要素のそれぞれのカップル、およびいくつかの<p>要素。 これらのタグに、 CupcakeIpsumフィラーテキストジェネレーターからのテキストコンテンツを入力します。 このフィラーコンテンツは、このチュートリアルのビジュアルスタイルを適用するために必要なすべてを提供します。

次のコードブロックの強調表示されたセクションに示すように、HTMLをindex.htmlに適用します。

index.html 

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
        <article>
            <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
            <h2>Tootsie roll oat cake macaroon</h2>
            <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
            <p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
            <h2>Jelly beans tiramisu pastry danish donut</h2>
            <h3>Lemon drops pastry marshmallow</h3>
            <p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
            <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
            <h3>Apple pie pudding topping</h3>
            <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
            <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
        </article>
    </body>
</html>

これらすべての追加をindex.htmlファイルに保存してから、Webブラウザーでファイルを開きます。 スタイルを作成するときは、index.htmlファイルをブラウザにロードして、スタイルがコンテンツにどのように適用されているかを確認してください。

次に、index.htmlと同じディレクトリにstyles.cssというファイルを作成し、テキストエディタで新しいファイルを開きます。

Googleフォントからロードするフォントファミリーは2つあります。 最初のフォントは、ページ上のすべてのコンテンツで使用されるため、ページのデフォルトフォントになります。

bodyタイプセレクターを作成し、フォントスタック'Public Sans', sans-serifでfont-familyプロパティを追加して、これを新しいデフォルトフォントとして設定します。

styles.css 

body {
    font-family: 'Public Sans', sans-serif;
}

これにより、フォントがbody要素に適用されます。 この例のすべてのコンテンツは、個別に宣言する必要なしに、そのフォントを継承します。 フォント名はPublicSans で、ブラウザのデフォルトのsans-serifフォントを使用するフォールバックフォントが使用されます。 フォントには、フォントスタックと呼ばれるコンマ区切りのリストを使用したフォールバックフォントが常に必要です。 フォールバックフォントは、カスタムフォントが読み込まれないか、特殊文字がない場合に読み取り可能なオプションを提供します。

次に、見出し要素h1、h2、およびh3は、流砂と呼ばれるページの残りの部分に特別なフォントを取得します。 3つのヘッダーh1, h2, h3で構成されるグループセレクターを作成し、流砂を使用してbodyと同じフォントスタック設定を適用します。

styles.css 

body {
    font-family: 'Public Sans', sans-serif;
}

h1, h2, h3 {
    font-family: 'Quicksand', sans-serif;
}

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlをリロードします。 次の画像に示すように、カスタムフォントが読み込まれます。

ファイルの設定の最後の部分については、テキストエディタでstyles.cssファイルに戻ります。 h1、h2、h3、およびp要素の特異型セレクターを作成して、それぞれにfont-sizeを定義します。 値はrem単位で、h1を2.5rem、h2を1.875rem、h3に設定します。から1.5、およびpから1.25rem：

styles.css 

...
h1, h2, h3 {
    font-family: 'Quicksand', sans-serif;
}

h1 {
    font-size: 2.5rem; /* 40px */
}

h2 {
    font-size: 1.875rem; /* 30px */
}

h3 {
    font-size: 1.5rem; /* 24px */
}

p {
    font-size: 1.25rem; /* 20px */
}

コードブロックには、各rem値がpx単位として何を返すかを示すコメントが含まれています。 remユニットを使用すると、font-sizeをpxの値よりも適切な比率に調整することができます。 これらのユニットの詳細については、CSSで共通ユニットを使用する方法をお読みください。

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlファイルをリロードします。 テキストのフォントサイズは、次の画像のように調整されます。

このセクションでは、index.htmlでHTMLコンテンツを設定し、styles.cssファイルを作成しました。 Google Font書体をCSSのbody要素にグローバルに適用し、具体的にはh1、h2、およびh3要素に適用しました。 また、ページ上のすべてのテキスト要素にfont-size値を設定します。 次のセクションでは、widthプロパティを使用して、より読みやすい行の長さを作成します。

widthおよびmax-widthを使用して行の長さを改善する

このセクションでは、widthおよびmax-widthプロパティを使用して、テキストに適切な行の長さを設定します。

Webタイポグラフィの見落とされがちな側面は、1行のテキストが表示される長さです。 アクセシビリティ支援を必要としているユーザーとそうでないユーザーの両方にとって、行の長さはテキストを読むために必要な労力に大きく貢献します。 テキストの行が長いほど、読者はテキストを追跡するのが困難になる可能性が高くなります。 テキストの短い行は、読者がコンテンツをナビゲートしてスキャンするのに役立ちます。

テキストエディタでstyles.cssを開き、articleタイプセレクタを記述して、90%のwidthを適用し、marginプロパティを追加します。 0 autoの値。 この組み合わせにより、コンテンツが画面の幅の90 % oに設定され、marginのauto値によってコンテンツブロックがページの中央に保持されます。

styles.css 

...
article {
    margin: 0 auto;
    width: 90%;
}

これらの変更をstyles.cssに保存し、ブラウザにindex.htmlをリロードします。 テキストは中央に配置されますが、テキストの行は非常に長くなります。 これがブラウザでどのように表示されるかについては、次の画像を参照してください。

Clarissa Peterson がレスポンシブタイポグラフィに関する講演で説明しているように、理想的な行の長さは45〜75文字です。 75文字を超えると、読者は自分が読んでいる行を見失い始める可能性があります。 一方、45文字より短いと、読者の目は、行から行への絶え間ない移動によって疲れることがあります。

コードではchで表される文字単位と呼ばれる単位で、文字数に基づいて幅を設定することができます。 chの単位は、フォントのゼロ文字（0）のサイズによって決まります。 理想的な行の長さは45〜75文字であるため、その範囲でmax-width値を設定でき、article要素はそのサイズに達すると成長を停止します。

テキストエディタでstyles.cssファイルに戻り、articleタイプセレクタのwidthプロパティの後に、max-widthプロパティを追加して値を指定します70chの：

styles.css 

...
article {
    margin: 0 auto;
    width: 90%;
    max-width: 70ch;
}

これは、要素が拡大できる最大幅が、そのスペースで使用されているフォントの70個のゼロ文字の幅であることを意味します。これは、body要素に設定されているフォントです。

これらの変更をstyles.cssファイルに保存し、ブラウザにindex.htmlをリロードします。 コンテンツはページの中央に配置され、最大幅は約70文字です。 次のアニメーションに示すように、ブラウザの幅のサイズを変更して、articleコンテナが90％の幅から最大幅に移行するのを確認してください。

注： CSSTricksのChrisCoyierは、便利なブックマークレットツールを作成しました。このツールは、45〜75の文字の範囲を強調表示して、コンテンツを設定するのに最適な幅を見つけるのに役立ちます。


このセクションでは、アクセシビリティと読みやすさがテキストコンテンツの行の長さと共通点を共有していることを学びました。 widthプロパティとmax-widthプロパティを使用して、chユニットを使用してテキストの長さを45〜75文字に制限するサイズを設定しました。 次のセクションでは、line-heightプロパティを使用して、テキスト行間の適切な間隔を設定します。

line-heightプロパティを使用して読みやすくする

このセクションのline-heightプロパティを使用して、テキスト行間のスペースを拡大および縮小します。 通常、見出しの行間のスペースは少なく、段落テキストのスペースは多くなる傾向があります。 この間隔の目標は、コンテンツを読みやすくすることです。 テキストの行の幅と同様に、行が近すぎると、読者は上または下の行に気を取られる可能性があります。 一方、テキストが離れすぎていると、読者の目が行間のスペースを飛び越えて飽きてしまい、テキストをスキャンするのがはるかに難しくなる可能性があります。

テキストエディタでstyles.cssファイルを開き、bodyセレクタに移動します。 font-familyと同様に、line-heightを使用して、ドキュメント全体の行間のデフォルトの距離を設定します。 line-heightプロパティを追加し、1.5の値を指定します。 この値は、ベースライン、テキストの下部が置かれている線の間の距離の測定値です。

styles.css 

body {
    font-family: 'Public Sans', sans-serif;
    line-height: 1.5;
}
...

line-heightのデフォルトは、フォントサイズの1.2に等しいnormalのキーワード値に関連付けられています。 これは、font-sizeが16pxの場合、normalに設定されたときのline-heightは約19.2pxであることを意味します。 これは適切な中央値です。 ただし、段落テキストには通常少し多くのスペースが必要ですが、見出しには少し少ないスペースが必要な場合があります。

次に、h1, h2, h3を対象とするグループセレクターに移動し、line-heightの値を1.15に設定します。 これにより、行間のテキストが少し近づき、長い見出しのタイトルの表示に役立ちます。 次のコードブロックに強調表示された行を追加します。

styles.css 

...
h1, h2, h3 {
    font-family: 'Quicksand', sans-serif;
    line-height: 1.15;
}
...

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlをリロードします。 テキストの行の間に配置されるスペースが増えると、コンテンツの長さが長くなります。 これがブラウザでどのように表示されるかについては、次の画像を参照してください。

line-heightプロパティの値は、固定単位値、ピクセル（px）またはremを受け入れることができますが、デフォルトの動作は単位を残さない方がよいです。値にfont-sizeを掛けます。

このセクションのline-heightプロパティを使用して、ページのコンテンツを読みやすくし、リーダーをスキャンしやすくしました。 次のセクションでは、marginプロパティを使用して、HTMLで定義されているコンテンツのタイプ間に定義されたスペースを設定します。

marginプロパティを使用した間隔

このセクションでは、marginプロパティを隣接する兄弟セレクターとともに使用して、テキスト要素間に異なる垂直方向の間隔を適用します。 line-heightプロパティが要素内のテキスト行間の制御を提供する場合、marginを使用してコンテンツ要素間の間隔を調整できます。

まず、テキストエディタでstyles.cssに戻り、h3セレクタを見つけます。 この状況では、要素にスペースを追加して、テキストの上にスペースを増やし、下にスペースを減らします。 これにより、上のコンテンツから遠くなり、下のコンテンツに近くなります。

marginプロパティを2em 0 0.5emの値で追加します。 これにより、font-size値に相対的な間隔が適用されます。つまり、上部マージンは48pxでfont-sizeの2倍になり、下部は12pxでfont-sizeの半分になります。

styles.css 

...
h3 {
    font-size: 1.5rem; /* 24px */
    margin: 2em 0 0.5em;
}
...

marginは要素の外側で機能するため、各要素のmarginプロパティは重複します。 つまり、下側のh3 marginは12pxに相当しますが、<p>要素のマージンが大きいため、<h3>間のスペースが定義されます。 ]および<p>。 この問題は、2つのセレクター間のプラス記号（+）で定義される隣接する兄弟コンビネーターを使用し、後者にスタイルを順番に適用することで解決できます。

隣接する兄弟コンビネーターをh3 + pとして使用して、テキストエディターのstyles.cssに新しいセレクターを作成し、セレクターブロック内に[の値を持つmargin-topプロパティを追加します。 X183X]：

styles.css 

...
h3 {
    font-size: 1.5rem; /* 24px */
    margin: 2em 0 0.5em;
}

h3 + p {
    margin-top: 0;
}
...

隣接する兄弟コンビネーターの動作方法。つまり、ブラウザーに<h3>要素があり、その直後に<p>要素がある場合、これらのスタイルはその<p>にのみ適用されます。 ] エレメント。 他の<p>要素は影響を受けません。

変更内容をstyles.cssに保存し、ブラウザにindex.htmlをロードします。 次の画像に示すように、<h3>要素の上のスペースははるかに大きくなり、<h3>と最初の<p>の間のスペースははるかに近くなりました。

このセクションでは、marginプロパティを使用して、ページの要素間に異なる間隔を適用しました。 隣接する兄弟セレクターを使用して、<h3>要素の前に<p>要素がある場合に、より大きな間隔量を適用する条件を設定します。 次のセクションでは、text-alignプロパティを使用して、行上のテキストの配置を調整します。

効果的なコンテンツプレゼンテーションのためのtext-alignの使用

ここで、text-alignプロパティを使用して、テキストが行のどこに配置されるかを変更します。 プロパティには、left、right、center、およびjustifyの4つの値があります。 このプロパティのデフォルト値は、ブラウザの言語設定によって異なります。 左から右に読む言語の場合、leftがデフォルトですが、右から左に読む言語のデフォルトはrightです。 centerプロパティは、テキストをテキスト行の中央に配置し、テキスト行の両側に同じ量の空白を残します。 最後に、justifyの値は、単語をコンテナーの端に広げ、単語間に視覚的に一貫性のないスペースを残します。

テキストエディタでstyles.cssを開き、h3タイプセレクタを見つけます。 次のコードブロックの強調表示された部分に示すように、値がcenterのtext-alignプロパティを追加します。

styles.css 

...
h3 {
    font-size: 1.5rem; /* 24px */
    margin: 2em 0 0.5em;
    text-align: center;
}
...

変更内容をstyles.cssに保存し、index.htmlファイルをブラウザにリロードします。 2つのh3レベルの見出しの内容が、それぞれのセクションの中央に配置されるようになりました。 これがブラウザでどのように表示されるかについては、次の画像を参照してください。

text-alignプロパティをデフォルトに設定したままにしておくことをお勧めします。これは、ユーザーとその設定に最適です。 ただし、配置値を変更すると、一部のテキストをより適切に区別したり、見栄えを良くしたりするのに役立ちます。

このセクションでtext-alignを使用して、テキストコンテンツをコンテナ内の中央に配置しました。 また、text-alignプロパティで使用可能な他の値をいつどのように使用するかについても学びました。 次のセクションでは、text-transformおよびletter-spacingプロパティを使用して、テキストを読みやすくし、効率的な階層を維持しながら、視覚的な個性を作成します。

letter-spacingおよびtext-transformを使用する

次に、text-transformプロパティとletter-spacingプロパティを使用して、見出しのテキストの表示方法を調整します。 text-transformプロパティは、テキストの大文字化のフォーマット方法を制御し、テキストをuppercase、lowercase、またはcapitalizeに変更するオプションを提供します。各単語。 letter-spacingプロパティは、各文字間のスペースの値です。 これらの2つの特性を組み合わせることで、読みやすく目立つ美学を生み出すことができます。

テキストエディタでstyles.cssを開いて、text-transformプロパティから開始し、h1タイプセレクタに移動します。 この見出しは記事全体のタイトルであるため、タイトルケース形式にするのは理にかなっています。

text-transformプロパティをcapitalizeの値で追加します。 この値は、HTMLで大文字になっているかどうかに関係なく、各単語の最初の文字を大文字にします。

styles.css 

...
h1 {
    font-size: 2.5rem; /* 40px */
    text-transform: capitalize;
}
...

この追加をstyles.cssファイルに保存し、ブラウザでindex.htmlを開きます。 次の図に示すように、見出しのコピーには、各単語の最初の文字が大文字になっています。

次に、テキストエディタでstyles.cssファイルに戻り、h3タイプセレクタを見つけます。 今回は、uppercaseの値を持つtext-transformプロパティを追加して、各単語のすべて大文字になるようにh3スタイルを設定します。 次のコードブロックの強調表示された行をstyles.cssファイルに追加します。

styles.css 

...
h3 {
    font-size: 1.5rem; /* 24px */
    margin: 2em 0 0.5em;
    text-align: center;
    text-transform: uppercase;
}
...

この変更を行った後、styles.cssを保存してから、ブラウザでindex.htmlを更新してください。 h3コンテンツは、HTMLでの記述方法に関係なく、すべて大文字になります。 これがブラウザでどのように表示されるかについては、次の画像を参照してください。

注： CSSを使用して大文字のスタイルをコンテンツに適用すると、スクリーンリーダーがコンテンツを解釈する方法に影響を与える可能性があります。 たとえば、macOSのVoice Overでは、CSSによって大文字に設定された3文字の単語は、単語ではなく頭字語として読み取られます。 このスタイリングアプローチを使用する場合、コンテンツの読み取り方法とともにaria-label属性をHTML要素に適用すると便利です。


テキストがすべて大文字になったので、視覚的には、デザインの美学のためにテキストが少し束ねられているように感じます。 次に、letter-spacingプロパティを使用して、各文字の間に0.125emの間隔を追加します。 次のコードブロックで強調表示されているコードを参照してください。

styles.css 

...
h3 {
    font-size: 1.5rem; /* 24px */
    margin: 2em 0 0.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.125em;
}
...

letter-spacingプロパティでemユニットを使用すると、文字間の間隔をfont-sizeに比例させることができます。 0.125emは、間隔をフォントの高さの8分の1に保ちます。

変更内容をstyles.cssに保存し、ブラウザでindex.htmlをリロードして、h3コンテンツへの変更をレンダリングします。 次の画像でこれがどのように見えるかを確認してください。

このセクションでは、text-transformプロパティを使用して、<h1>要素のスタイルを変更し、各単語の最初の文字を大文字にしました。 また、text-transformおよびletter-spacingプロパティを使用して、<h3>要素を変更し、文字を含むすべての大文字の単語を分散させました。 前のセクションでは、fontプロパティを使用して、複数のプロパティを1つにまとめます。

font省略形の使用

この最後のセクションでは、fontプロパティを使用して、複数のプロパティを1つのプロパティに凝縮します。 fontプロパティは、複数のテキスト関連の値をグローバルに定義し、カスケードの高レベルに配置する場合に役立ちます。 fontの省略形を使用すると、含まれている個々のプロパティが上書きされることに注意してください。

開始するには、テキストエディタでstyles.cssファイルに戻り、bodyセレクタに移動します。 ここで、font-familyおよびline-heightプロパティをfont省略形プロパティに凝縮できます。 ただし、fontの省略形では、font-sizeとfont-familyの両方の値が存在する必要があります。 これは、line-heightおよびfont-familyの値に加えて、font-sizeの値を追加することを意味します。 これを書き出す方法については、次のコードブロックの強調表示されたセクションを参照してください。

styles.css 

body {
    font: 1em/1.5 'Public Sans', sans-serif;
}
...

1emのfont-size値と1.5のline-height値の間にスラッシュ（/）があることに注意してください。 これは、line-height値をfont省略形プロパティで設定する唯一の方法であり、font-size値の後に指定する必要があります。 font-sizeの値は1emに設定されます。これは、最も混乱の少ない値であり、値に関係なく、ドキュメントのデフォルトのfont-sizeを引き継ぐためです。 さらに、fontプロパティの省略形は、font-stretch、font-style、 font-variant、およびfont-weightプロパティの値を受け入れます。

変更内容は必ずテキストエディタでstyles.cssに保存してください。 ブラウザにindex.htmlをリロードし、視覚的な変化がないことを確認します。 省略形のプロパティは既存のプロパティを1つのプロパティに結合するため、スタイルに変更はありません。

チュートリアルのこの最後のセクションでfontプロパティを使用して、複数のプロパティを1つに結合し、CSSのサイズを縮小しました。 このプロパティは非常に便利ですが、カバレッジが広いためにプロパティの再定義が必要になる可能性があるため、考慮して使用する必要があります。

結論

読みやすいテキストレイアウトは、効果的なデザインと効果のないデザインの違いを示すことができます。 テキストのレイアウトは、コンテンツを目立たないように表示するために、テキスト行、単語、およびブロックの間に十分なスペースを提供するという主観的なバランスです。 テキストを操作する場合、レイアウトが不適切だと、読者がコンテンツを理解できなくなる可能性があります。 これらのプロパティとその使用法を念頭に置いて、よく読まれたコンテンツを作成します。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

「https://www.finddevguides.com/index.php?title=CSSを使用してテキストをレイアウトする方法&oldid=101145」から取得
Powered by MediaWiki