準備

atomを開き、ファイル -> 新規ファイルを作成します。
html拡張子でファイルを保存してください。その後、以下のタグを打ち込み、該当ファイルをブラウザで開くことで実行結果を確認できます。より簡単に確認するには、atomで、パッケージ->previewHTMLを選ぶことで、実行結果をリアルタイムでみることができます。以下、htmlの雛形です。

<html>

  <head>
    <meta charset="utf-8">
    <!-- 設定などを記述する -->
  </head>
  
  <body>
    <!-- 表示される内容を記述する -->
  </body>

</html>

head領域はwebページの設定などを記述する部分です。この中にcharset=”utf-8″とありますが、これは文字コードをutf-8にするという意味があります。他にもありますが、文字化けを避けるために、基本的にはこれを記述してください。最後に、body領域に対して、実際に表示する内容（文字や写真など）を表示していきます。

文字その1

文字その2

style引数を用意し、margin-top, margin-left, margin-right, margin-bottomを入れ、ピクセル（px）を入れると、その文字の上左右下の余白を設定することができます。上の例では上と左の余白を与えています。複数のスタイルを設定するには、上の例のように、セミコロンを使用します。

文字サイズを変更するには、以下のようにstyleを設定します。

文字その1

文字その2

これだと、pタグやh1タグを使用するとき毎回styleを記述しなければなりません。一括してstyleを変更する方法として、CSSという機能があります。
以下はCSSの例です。これはhead領域に記述して下さい。

その後、以下の内容をbody領域に記述してください。

文字その1

文字その2

文字その3

文字その4

こうすることで、h1やpタグを使う場合に、styleを毎回記述しなくても、反映されます。webページのデザインがちぐはぐにならないようにするため、基本的にタグのstyleは統一させるという意味で、この記法は大変有効です。

Divタグによる領域分割：
まず、body領域に以下のように記述してください。


        div領域その1
        ここは領域1です。
        



        div領域その2
        ここは領域2です。
        



        div領域その3
        ここは領域3です。ここはcontents01のスタイルが反映されます。

webアプリを作っているとき、領域ごとに用意するコンテンツを変えたい場合があります。これを明示的に分けるために、divタグを利用します。よく見ると、divタグの囲いが3つあり、1つ目にcontents01、2つ目にcontents02、3つ目にcontents01と記載されていることがわかります。これは、それぞれのコンテンツでスタイルを変えたいという意図があります。1つ目の3つ目にはcontents01のスタイルが、2つ目にはcontents02のスタイルが反映されます。スタイルは、これまで通りhead領域で定義します。

background-colorは背景色を定義します。rgb(x, x, x)は赤緑青の色の強さを意味し、最低は0、最大は255となります。（0, 0, 255）は青になります。(0, 0, 0)は黒、(255, 255, 255)は白となります。あとは直感で決めてください。

widthはdiv領域の幅を意味します。contents01は400px、contents02は70%となっています。パーセンテージで表記することで、ブラウザ画面の70%で幅を取ってくれます。

marginはdiv領域の外側の幅、paddingはdiv領域の内側の幅となります。数字を変えて挙動を確認してみてください。marginの左右にautoを与えると、div領域を画面の中央に配置させることができます。

borderはdiv領域を囲う線となります。線の太さ、形状、色で定義します。solidは実線、dashedは破線を表します。他にも色々あるので興味がある場合には調べてみてください。

なお、margin, border, paddingはそれぞれ、top, bottom, left, rightで上下左右を指定することができます。また、top, leftなどの位置を省略することもでき、この場合、上下左右にこの結果が反映されます。

inputのスタイル変更：
inputは、typeの指定により様々な機能が付与できます。inputに対し同じスタイルを指定すると、ボタンや入力フォームがすべて同じスタイルになってしまい、見栄えが悪いです。こういった場合は、以下のように書けば解決できます。

inputのtypeにsubmitとtextを設定し、ボタンと入力フォームを作成しました。これらに異なるclassを与えています。そして、そのclassごとにstyleを決めています。これにより、ボタンと入力フォームで異なるクラスを与えることができます。

widthとheightで幅と高さ、colorで文字の色を決めています。また、border-radiusでボタンの角の丸みを表現します。font-sizeで文字のサイズを決定します。

箇条書き：
箇条書きを作るには、olタグかulタグでその領域を作ります。olは「1., 2., 3., …」と数字付きの箇条書きを作ります。ulタグは数字なしの箇条書きを作ります。箇条書きの各項目は、liタグを使用します。


 りんご
 みかん
 キャベツ



 みそ
 しお
 ソース

リンクの付け方：
aタグを利用します。href引数に対してurlを指定すればokです。以下のように書くことで、文字列も追加できます。

Google検索へ！

html

準備

タグ

見出しA

見出しB

見出しC

文字その1

文字その1

文字その1

文字その3

div領域その1

div領域その2

div領域その3