MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

テキストのスタイリング

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストのスタイリングです — これは、CSS で行う最も一般的なことの一つです。ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。

事前準備

このモジュールを開始する前に、Introduction to HTML モジュールで議論さているような HTML の基本をよく知っているべきです。また、Introduction to CSS で議論されているような CSS の基礎を容易に使いこなせるべきでもあります。

注記: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、JSBinThimble のようなオンラインコーディングプログラムでサンプルコードを試してください。

ガイド

このモジュールは、以下の記事を含みます。HTML テキストコンテンツのスタイリングを手助けする基礎のすべてをあなたに教えます。

テキストとフォントのスタイリング基礎
この記事では、フォントの太さや種類、ショートハンド、アラインメント、その他の効果、線や文字の間隔を含むすべてのテキスト/フォントスタイリングの詳細を確認します。
リストのスタイリング
リストの多くの部分は他のテキストと同様にふるまいますが、リストに特化した知っておくべき CSS プロパティや考慮すべきベストプラクティスがいくつかあります。この記事ではそれらをすべて説明します。
リンクのスタイリング
リンクをスタイリングするとき、リンクの状態を効果的にスタイルする疑似クラスを使用する方法やナビゲーションメニューやタブのようなさまざまなインターフェイス機能で使用する方法を理解することが重要です。この記事ではこれらのすべてのトピックスを確認します。
ウェブフォント
ここでは、ウェブフォントを詳しく確認します — あなたのウェブページに沿ったカスタムフォントをダウンロードでき、より多様にテキストをスタイリングをカスタマイズできます。

課題

以下の課題は、上記のガイドで説明されているテキストスタイリング技術の理解を確かめられます。

コミュニティスクールホームページの植字
この課題では、コミュニティスクールのホームページ向けのテキストをスタイルリングすることで、テキストスタイリングの理解度をテストします。

ドキュメントのタグと貢献者

 このページの貢献者: dskmori
 最終更新者: dskmori,