HTMLとCSSの使い方

HTMLとCSSはウェブページを構成する重要な要素です。新しいウェブ開発者として、HTMLとCSSの基礎を身につけることはとても重要です。HTMLを学ぶということは、ウェブページの構造やワイヤーフレームの作り方を学ぶということです。CSS（カスケーディング・スタイルシート）を追加することで、HTMLの構造をスタイルでより生き生きとしたものにすることができます。

パート1

HTMLとCSSを理解する

1. HTMLの構造を3つのセクションに分けて考えてみましょう。

   • Headタグは最初のセクションです。ここには、ウェブページの目的や情報に関連するすべてのデータが含まれます。これには、メタデータ、タイトル、外部ファイルのソースなどが含まれます。いくつかのウェブサイトでは、ウェブサイトのアクセス解析やページランクなどに関する重要な情報も含まれています。これらはすべてこのセグメントに含まれます。
   • 次にBodyタグです。これはウェブページの構造の中心です。ウェブサイトのワイヤーフレームやビルディング・ブロックがここに記載されます。実際には、このスペースで要素やタグに言及します。記載した順番に従って、最終的なウェブページに要素が配置されます。
     • 例えば、フォームタグを書いてから画像タグを書くと、ウェブページにはフォームが表示され、その下に画像が表示されることになります（もちろん、これらの順番や位置は高級CSSで変更可能です）。ウェブページの異なるセグメント（左、右、中央）は、それに応じて扱われなければならない。そのために、tableタグやlistタグがあります。HTMLで利用可能なすべての種類のタグを学び、その実装を理解しましょう。
   • 最後にフットのセクションです。このセクションには通常、ウェブページのフッター部分に表示されるすべての内容が含まれます。しかし、通常はこれを個別に含めることはありません。その代わり、フッターの内容は本文に追加されます。
2. CSSの要素を理解するCSS（カスケーディング・スタイル・シート）は、HTMLのファイルサイズを小さくし、コードをすっきりさせ、スタイルをHTMLとは別に同期させるために、W3Cによって導入されました。これらはHTMLのheadセクションに含まれる別個のファイルに過ぎず、HTML文書の様々な要素に対するスタイル定義が含まれています。

   • CSSで定義されたスタイル・コードには、フォントの振る舞い、色、高さ、幅、表示スタイルなどが含まれます。また、マウスオーバーやマウスアウトのイベントに対する動作定義も含まれます。実際、CSS3の最新版では、スタイリングはまったく異なるレベルにまで強化されています。アニメーション、変形、トランジションなど、すべてCSSコードから作成できるようになったのです。 ほとんどの場合、CSSを使って幅、高さ、色、フォントなどを宣言します。これらは最も一般的なスタイリング・オプションであり、いくつかのHTML要素の外観と位置を定義するのに役立ちます。

パート2

HTMLとCSSの組み合わせとリンク

• 非常に一般的で重要な疑問の1つは、「スタイル・シートは、特定のオブジェクトにどのようなスタイルを置くべきか、どのようにして知るのだろうか」というものです。これは、すべての初心者にとって非常に重要な疑問のひとつです。さて、現在のスタイルでどの要素にアクセスしたいかをCSSコードに理解させるには、いくつかの手順があります。

1. 必要であれば、クラスとidの助けを借りてこれを行います。これは最も一般的な手順で、インターネットの世界ではマスター・ストロークとして行われています。HTML文書で要素を宣言する際に、属性「class」を追加し、特定の名前を割り当てます。id」も同様だ。あとはCSSファイルにclass名やid名を記述し、スタイルを定義するだけだ。自動的にその要素がスタイル定義を導き出します。

   • クラス名で宣言する場合は、CSSファイルの先頭にドットを付けます。idの場合は、名前の前にハッシュを付けます。これが構文だ。さて、最も重要な部分だ。
   • では、クラスとidの違いは何でしょうか？共存しているのであれば、同じであるはずがない。そう、大きな違いがあるのです。HTML文書では、同じクラス名で好きなだけ要素に名前をつけることができます。しかし、idは1つの要素専用でなければなりません。したがって、クラスはHTMLページ上の複数のアイテムに同じスタイルが必要な場合に使用され、idsは1つのアイテムにのみスタイルを設定する場合に使用されます。
2. DOM（データ・オブジェクト・モデル）要素、つまりHTML要素にはタグ名でアクセスします。つまり、ページ内のすべての画像タグから枠線を消したい場合は、'img'と記述して'border : none'と宣言するだけです。しかし、これは文書上のすべての画像タグに適用されます。特定の要素（たとえば画像タグ）を、その要素名で指定する方法はないだろうか？はい、方法はあります。次のポイントに飛び込んでください。
3. タグ名で特定の要素にアクセスすることもできます。ただし、親要素をすべてたどって、親要素にたどり着く必要があります。ちょっと難しかったですか？わかりました。例を見てみよう。form要素があって、その中にinput要素があるとします。フォームの外側にも入力要素があります。そこで、上記のポイントに従って入力要素にスタイルを宣言すると、これらのスタイルはフォームの内側と外側の両方の入力要素に実装されることになります。I

   • フォームの内側の要素にだけスタイルを実装したい場合は、次のようにします。そこで、特にスタイルを設定したい入力要素にどのようにアクセスしたかに注目してください。まず親要素にアクセスし、次にメイン要素にアクセスします。こうすることで、外側の入力要素は捨てられます。

その3

さらにステップアップする

1. 学ぶ時間を与えよう。コーディングのベテランになるには、かなりの時間がかかります。しかし、ここでは基本的な方法論を理解し、標準的なHTMLページを素早くデザインするのに役立つトピックをいくつか紹介します。
2. ウェブページのデザイン構造を正しく理解する。使用可能なタグを理解し、それらを使用してページを最もシンプルな構造に分解する方法を見つけましょう。
3. CSSボックス・モデルが非常に重要であることを知ってください。要素の幅と高さを理解することが最初のステップです。しかしその後、パディングとマージンの助けを借りて間隔を調整する方法を学ばなければなりません。マージンが適用できない場合もあります。そのため、パディングを使わなければなりません。これらはいったい何なのか、どのように使われるのかを知るようにしましょう。
4. フロートとその使い方CSSのfloatも、スタイリングにおいて非常に重要な要素です。コンテンツを左右にフロートさせることは、ウェブサイトの構造において重要な役割を果たします。

この記事は、CC BY-NC-SAで公開されている「 HTMLとCSSの使い方 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。