スタイリングの紹介

ここ数週間、私たちは必要な情報をすべて Web ページに掲載する方法について議論してきました。ただし、手順に従ってコーディングを進めていると、ページがあまり魅力的に見えないことにおそらく気づいたでしょう。実際にはかなり悪く見えるかもしれません…

これまでのところ、Web ページにスタイルを追加していません。スタイルは、ページ上で HTML 要素をどのように表示するかをブラウザーに伝えるためのルールです。サイズ、フォント、色、位置、配置などを変更できます。しかし、どうやって?

最初のスタイルを追加する

<p style="color: blue;">This text is blue now!</p>

ログイン後にコピー

それだけです!興味がある場合は、それをコピーしてドキュメントに貼り付け、ブラウザーで開いてください。何を見たのですか？文字が青になりました！いいですね！

それで、ここで何が起こっているのでしょうか？テキストコンテンツを段落要素で囲み、その段落要素に style 属性を与えました。冒頭の

の style= に注目してください。タグ。属性の値で、色のスタイルを青の値「color: blue;」に割り当てました。

これは素晴らしいことですが、テキストをページの中央に配置したい場合はどうすればよいでしょうか?

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

ログイン後にコピー

変更する必要があるのは、style 属性の値だけです。パワフル！しかし、その value 属性では何が起こっているのでしょうか?この構文はこれまで見たことがありません。それがCSSです！でもちょっと待って、HTML を書いているのになぜここにあるのでしょうか?

そうだよ！しかし、HTML はスタイルを設定するために設計されていません。構造とセマンティクスを考慮して設計されています (これについては後の投稿で説明します)。ページの外観を変更したい場合は、スタイルシートを変更する必要があります。デフォルトでは、ブラウザは「ユーザーエージェントスタイルシート」と呼ばれるものを使用して HTML 内の情報を解釈する方法を決定します。これまでの文字サイズや色はそれをベースにしています！ CSS を style 属性に追加すると、定義したスタイルはユーザーエージェントスタイルシートをオーバーライドし、定義していないスタイルはすべてそのシートに戻ります。 CSS は Cascading Style Sheets の略です。それが理由です!

これは素晴らしいですね。ページの外観を変更できるようになったので、可能性は無限です。しかし、さらにカスタマイズしたい場合を想像してください:

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

ログイン後にコピー

うわぁ…たった 2 行のテキストなのに、これは大量のコードですね…何が起こっているのかをすぐに理解するのはとても難しいです!これは、後でこの情報を編集するために戻って編集しようとすると、次のような場合よりもはるかに時間がかかるため、問題です。

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

ログイン後にコピー

この問題はどうすれば解決できますか?

CSSの紹介

HTML が乱雑にならないように、すべてのスタイルを .css ファイルに移動します。小規模なプロジェクトの場合、通常、これを style.css と呼びます。コードを整理するだけでなく、スタイルを新しいファイルに移動することは、関心の分離と呼ばれるプログラミングの概念も満たします。これは、コードを機能コンポーネントに分割する必要があることを意味します。コードはすべてを実行しようとするのではなく、1 つのことをうまく実行する小さな部分に分割する必要があります。

この例では、コンテンツを構造化してスタイルを設定するファイルが 1 つあるのではなく、構造化用のファイルとスタイル用のファイルの 2 つのファイルがあります。懸念は解消されました！さて、これはどのようなものでしょうか?

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

ログイン後にコピー

ああ、ずっと良くなりました!これで、HTML ファイルがこのようなスタイルで乱雑にならなくなりました。上に表示されているのは 2 つの CSS ルールセットです。ルールセットは、セレクターと、セレクターのスタイル設定方法に関するすべての情報を含む 2 つの中括弧で構成されます。この例では、h1 と p という 2 つのセレクターが表示されます。これは、ここにリストされているすべてのスタイルが任意の HTML

に適用されることを意味します。または <

これはどのタイプの要素でも実行できます。実際には、CSS セレクターを使用してオブジェクトを選択する方法はたくさんありますが、それについては別の週に取っておきます。ここでは、要素のタイプを入力すると、中括弧内にスタイルを追加できることだけを知っておいてください。

いくつかのスタイルを定義しましたが、それらを適用するファイルをブラウザが認識できるようにするにはどうすればよいですか?

リンク要素

最初のここで学習する要素はです。要素。使用例はいくつかありますが、ここでは style.css をindex.html にリンクするために使用します。言い換えれば、この要素はブラウザにページにどのスタイルシートを使用するかを指示します。実際には、次のようになります:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

ログイン後にコピー

それで終わりです! style.css は HTML ドキュメントにリンクされており、スタイルが適用されます。

このリンク要素を詳しく見てみましょう。まず、これは自己終了要素であるため、終了タグは必要なく、内部にコンテンツも取りません。この要素には、href と rel という 2 つの必須属性があります。が必要なため、これらは必須です。要素は外部リソースを HTML ドキュメントにリンクします。したがって、ブラウザに、1) そのリソースがどこにあるのか、2) そのリソースが何に使用されるのかを伝える必要があります。「ハイパーテキスト参照」の略である href がどこで使用されるかを決定し、rel または関係が使用を決定します。

href 属性では、指定するパスは絶対パスまたは相対パスのいずれかであることに注意することが重要です。これは、ルートディレクトリからファイルパスの場所を指定できることを意味します (例: /Users/username/Documents/project/style.css (絶対))。または、上記のように、作業中のファイルの場所を基準にして相対的に実行することもできます。ファイル名の前の ./ は、ブラウザが style.css の HTML ファイルと同じフォルダー (またはディレクトリ) を参照する必要があることを示します。ここに URL を追加することもできます。多くのコンテンツ配信ネットワークでは、を使用して接続する既製のスタイルシートを使用できます。要素も!

チャレンジ

さて、今日はたくさんのことを取り上げました。さあ、実践してみましょう。先週のチャレンジで作成した About Me ページを取得し、それを style.css という新しいファイルに作成します。 (必ず HTML ファイルと同じフォルダーに置いてください!)

次に、各要素のスタイルを作成します。自己紹介ページがより見栄えよくなるまで、割り当てることができるさまざまなスタイルを試してみてください。 (注: 要素と要素をターゲットにすることもできます!)

適用できるスタイルの完全なリストについては、Mozilla Developer Network を確認してください。 Web 開発言語 (HTML、CSS、JS) の完全なドキュメントをホストしています。ここに彼らのサイトへのリンクがあります。サイドバーの「参照」の下にあるプロパティのリストを使用して、何が可能かを確認してください!

また来週お会いしましょう!

以上がコンテンツのスタイリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。