HTMLとCSSの初心者ガイド
今日、私たちのサイトを支えるさまざまな技術が存在しますが、インターネット全体で最も重要な2つのファイルはHTMLとCSSです。はい、複雑なものが必要な場合は、それに伴う他の技術も必要になります。しかし、シンプルな個人ウェブページを作成したいだけなら、HTMLとCSSだけで十分です。
基本の紹介
これはHTMLとCSSの初心者向けガイドで、できるだけ早くシンプルなサイトを作成する方法を示します。結果は必ずしも「標準準拠」ではありません。そして、さらに調整や拡張をしたい場合は、自分でいくつかの読み物をしなければなりません。しかし、それはサイトであり、ほとんどのブラウザで「あるべきように」機能します。
スペースが限られているため、ウェブ開発とデザインのすべての側面に深く入り込むことはしません。代わりに、ゼロから完全に動作するウェブページに至るまでのステップを説明し、その過程ですべてが何をするのかを説明します。
必要な2つのファイル
現代のサイトは多くのファイルで構成されていますが、最も重要なのはHTMLファイルとCSSファイルの2つです。HTMLファイルはページの要素と構造を定義します。CSSファイルはそれらの要素の外観を定義します。
両方とも本質的に典型的なテキストファイルで、特に構造化されたテキストを含んでいます。これらを作成または調整するために特別なプログラムは必要ありません：通常の「シンプル」なテキストエディタで十分です。「シンプル」とは、LibreOfficeのエディタやMicrosoft Wordのようにテキストを「豊かに」する可能性のあるアプリケーションではなく、通常のメモ帳スタイルのアプリケーションを指します。
最初のステップは、デスクトップに2つの空のテキストファイルを含む新しいフォルダーを作成することです。一方を「index.html」と名付け、もう一方を「style.css」と名付けます。
作業スペースの設定
お気に入りのブラウザを起動し、HTMLファイルを読み込みます。「ファイル -> 開く」を選択するか、ファイルをウィンドウにドラッグアンドドロップします。
お気に入りのメモ帳タイプのテキストエディタでHTMLファイルとCSSファイルの両方を開きます。
すべてのウィンドウを同時に表示できることが最も便利な作業方法です。2つの画面がない場合は、以下の画像のようにウィンドウを配置することをお勧めします。
ブラウザウィンドウを画面の片側に「固定」して半分を占め（縦に）、もう一方の側に2つのメモ帳ウィンドウを上下に配置します。
ビルディングブロック
メモ帳にHTMLファイルの内容を書き込み、変更を保存します。次に、F5を押してブラウザウィンドウを更新します。書いたテキストがブラウザウィンドウにすぐに表示されるのがわかります。
最初のサイトを設定したことをおめでとうございます！冗談ではありません。インターネット上の最初のサイトは、あなたが作成したものと見た目があまり変わりませんでした。当時重要だったのは、コンテンツそのものでした。
HTMLは「各コンテンツの部分が何であるかをマークアップする」ことを可能にし、特定の「コード」のセットを使用します。最も重要なもののいくつかは次のとおりです：
html: HTMLドキュメントを示します。各HTMLファイルの先頭にあるべきです。body: ブラウザで見るすべてのコンテンツはこのbodyタグで囲まれています。これはHTMLドキュメントの視覚的な側面を表します。p: テキスト段落img: 画像a href: ウェブアドレスへのリンクdiv: CSSで「スタイル」を設定できる任意のコンテンツの周りに「ボックス」を設定します。
コンテンツの部分を「定義」するには、通常、始まりと終わりにわずかな違いを持つ同じコードで囲む必要があります。たとえば、テキストの段落は次のように定義されます：
「
」は「次に続くのは段落であることを示し」、「
」は「段落がここで終了することを示します。」両方の場合で「p」を「div」に置き換えることで、コンテンツを「段落としてマークする」のではなく、コンテンツを囲むボックスを定義します。
画像（img）や区切り線（hr）などの要素には「閉じるコード」が必要ないことに注意してください。
変更と更新
HTMLファイルのすべてを次の内容に置き換えます：
CONTENT
FOOTER
ブラウザを更新（F5）すると、HEADER、CONTENT、FOOTERの言葉が1つずつ下に表示されます。私たちは3つの見えない、自律的な「div」ボックスを作成しました。それぞれが1つの単語を含んでいます。
CSSを通じて外観を定義できるようにするために、各ボックスにキーワードを割り当て、「アイデンティティ」（コード内の「id=name」）を設定しました。すべてのウェブページの要素には、そのようなエイリアスを持つことができ、「クラス」または「id」として設定されます。クラスは、段落やリンクなど、同じウェブページに複数回表示されるアイテムのエイリアスを定義します。IDは、各ページに1回だけ表示される要素のエイリアスを定義します。サイトの名前やロゴなどです。
実際のコンテンツ
divコードの間にある「HEADER」という単語を削除し、その構造を変更せずに、サイトの名前を入力します。
「CONTENT」についても同様に行いますが、単にテキストを入力するのではなく、前に見たように各段落の始まりと終わりを「マーク」することを確認してください。「CONTENT」を2つまたは3つの段落のテキストに置き換えます。
今こそリンクについても話す時です。テキスト内の任意のフレーズをリンクに変換するには、次のように構成します：
これをコピー＆ペーストし、「ADDRESS」を「リンク先にしたいもの」に、「TEXT」をサイトに表示されるフレーズに置き換えます。私たちはフッターのフレーズを次のように私たちのウェブサイトにリンクしました：
最後に、「FOOTER」という単語をあなたの名前、サイトをデザインまたは所有していることを示す小さな文、または他に何か好きなものに置き換えます。
変更を保存し、ブラウザを更新してそれらを表示します。
スタイルを持っています (.CSS)
ウェブページの最初の要素はヘッダーです。ここには、サイトのアイデンティティ、名前、作成者、言語、HTML以外で使用される技術を定義するコードが通常含まれています。ここには、外部のJavaScriptやCSSファイルへのリンクがほとんど存在します。次のコードをHTMLファイルの最上部、htmlタグのすぐ後に挿入して、サイトに1つ追加します：
ウェブページの要素をCSSでスタイル設定するには、HTML内からCSSファイルを読み込む必要があります。つまり、これを「head」に含める必要があります。次のコードは、HTMLページが「スタイルシート」ファイル（タイプ「text/css」）である「style.css」に「リンク」することを示しています：
私たちのコードをそのままコピー＆ペーストし、「head」の「」の中に「」の下に配置します。変更を保存し、CSSファイルに移ります。そこに次の内容を入力します：
body {}
#header, #content,#footer{}
#header,#footer{}
#header{}
#content{}
#footer{}
img {}
実際のサイト
CSS、すなわちカスケーディングスタイルシートは、ウェブページの特定の要素に対応する表示ルールのセットです。CSSを使用すると、ウェブページ上のすべてが「どこに」そして「どのように」表示されるかをスタイル設定できます。
前のステップでは、ページ上のすべての要素に対して空のルールのセットを導入しました。今、これらにパラメータを追加して外観を定義する方法を見てみましょう。
まず、ウェブサイト上のすべてを含むbodyを修正します：
body {
width:100%;
position:relative;
margin:0;
padding:0;
}
上記のルールは、サイトがブラウザウィンドウの全幅を占めること（width: 100%）、ブラウザウィンドウの端から距離を持たないこと（margin: 0）、周囲に空白がないこと（padding: 0）を示しています。
要素のすべてのルールはブラケットで囲まれ、各ルールは「;」で終わる必要があります。次のように：
#Element_ID{
RULE 1;
RULE 2;
RULE 3;
}
次に、「#header, #content, #footer」のCSSを次のように更新します：
#header, #content,#footer{
float:left;
position:relative;
}
これにより、3つの要素の位置は共通のルールに従うべきであることを示しています：それぞれは「相対的」であり、前の要素に「従う」べきです（float: left）。サイズ、形状、外観、または他の要因に関係なく、それぞれが次の要素を「押し出し」、重なることはありません。
次に、#header、#footerを次のように更新して、ウェブページが実際のサイトのように見えるようにします：
#header,#footer{
width:100%;
height:100px;
background:rgba(0,0,0,0.9);
color:rgba(255,255,255,0.9);
text-align:center;
font-size:12px;
}
上記は、ウェブサイトのヘッダーとフッターを100%の幅、100ピクセルの高さにし、表示されるテキストを3emのサイズで中央に配置することを定義しています。
背景と色のルールは、それぞれ、ヘッダーとフッターの「divボックス」の全体の色と、それに含まれるテキストの色を指定します。「RGBA」は、赤、緑、青の色混合基準に基づいて色を設定します。各色は0から255の値を持ち、異なる赤、緑、青の値の組み合わせにより、任意の色を表示できます。最後の数字は透明度に対応します。したがって、RGBA(255,0,0,0.5)は半透明の赤を、RGBA(50,50,255,1)は明るく「固体」の青を提供します。
サイトの基本コンテンツに焦点を当てて終了します。その外観を次のように定義します：
#content{
width:80%;
background:rgba(255,255,255,0.9);
color:rgba(0,0,0,0.9);
margin:010%;
}
すべての変更を再度保存し、ブラウザウィンドウを更新してそれらを表示します。
画像スタイリング
サイトに画像を追加するには、HTMLファイルに戻る必要があります。そこで、コンテンツの「内部」で、最初の段落の前に次の内容を入力します：
ここで「PATH」と「FILE.JPG」は、オンラインまたはローカルで利用可能な任意の画像の「場所」とファイル名であり、「TEXT」はアクセシビリティの目的でそれが表すものの説明です。
この追加後に保存して変更を確認しようとすると、サイトが変形していることがわかります。この問題は、ウェブサイト上で画像がどのように表示されるべきかに関するCSSルールを作成すると解決されます。
CSSファイルに戻り、すべての画像（img）を左揃えにし、他の要素の流れに従うように指定します（float: leftおよびposition: relative）。
ページの境界を超えないように、画像の幅をページ自体の最大に指定します（width: 100%）。テキストに画像が触れないように、上下にいくつかの垂直マージンを追加します。結果は次のようになります：
img {
float:left;
position:relative;
width:100%;
margin:5px0;
padding:0;
}
左または右に整列された別の画像を追加して完了します。前と同様に、最初にHTMLコードに戻り、そこに画像へのリンクを貼り付けます。違いは、「クラス」、要素の識別子を追加する必要があることです。次に、CSSでそれに関する表示ルールを指定し、同じクラスが「添付」されている他の要素にも適用します。
私たちはクラスを「alignright」と名付け、添付された任意のオブジェクトがページの右側に表示されるようにしたいと考えました。
自分でコードを作成してみてください。「style.css」に.alignright {}クラスを追加し、それをスタイル設定するルールを作成します。CSSコードは、要素をページの右側に浮かせ、46%の幅を持つように指定する必要があります。画像がテキストに触れないように、周囲に2%の隙間を追加する必要があります。これを1%のマージン（他の要素からの距離）と1%のパディング（要素の周囲の「余白」）に分けます。
したがって、私たちのルールは、.alignrightクラスが添付された任意の画像がページの幅の46%を占め、各側に1%のマージン、各側に1%のパディングを持つことを定義します。すべてを合計すると50%になり、ちょうどページの幅の半分になります。結果は次のようになります：
img.alignright{
float:right;
width:46%;
margin:1%;
padding:1%;
}
次のページ
あなたの最初のウェブページは準備が整い、完全に機能しています。HTMLとCSSについてさらに学ぶことで、コンテンツをさらに豊かにし、新しい要素を追加し、外観を改善できます。次のステップとして、HTMLファイルをコピーして名前を変更し、その内容を修正し、各新しいページを他のページにリンクしてみてください。
それほど難しくないでしょう？ウェブ開発へようこそ：異なるページをリンクを通じてコピー、修正、リンクすることで、最初の完全な「適切な」多ページサイトを作成することができます！
画像クレジット：Pluks kittens, Pluks kittens, IMG_20171124_142629
