HTMLやCSSの基礎

今見ているページを構成しているものはHTMLという文書の構成を決定する言語と、CSSというデザインを決定する言語です。

HTMLだけでも基本的なレイアウトは可能ですが、かなりシンプルなページになります。CSSと組み合わせることにより、デザイン性が豊かなWebページを制作することができます。

今回はHTMLとCSSの基礎を紹介したいと思います。

HTMLの基礎枠

HTMLの基本の型は以下のようになります。
<html>
  <head>
    <title>title</title>
  </head>
  <body>
  </body>
</html>

htmlタグで全体を囲みその次のレベルにheadタグとbodyタグがあります。基本的に文書を記述するのはbodyタグの中です。headタグの中にはCSSやJavaScriptを読み込むタグを書き込みます。

headタグの中にtitleタグがあります。titleタグの中にテキストを書き込むと、そのテキストがページのタイトルとして表示されます。

見出し

見出しはh1〜3のタグを使用します。h1タグは見出しを意味します。見出しのタグは以下のように記述します。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

08

段落

段落はpタグを使用します。pタグは一つの段落の塊を示します。

pタグは以下のように使用します。

<p>
      あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</p>
<p>
      またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
</p>

09

特徴としては段落と段落の間に若干の隙間が生じます。この隙間により文書の切れ目を表現します。

リスト

リストを表示するにはulタグとliタグを使用します。ulタグの中にliタグを書いてリストを表現します。使用例は以下のようになります。
<ul>
      <li>hoge</li>
      <li>huga</li>
      <li>foo</li>
      <li>bar</li>
</ul>
10

divタグ

divタグは文書のレイアウトに影響を与えませんが、文書のまとまりやレイアウトの調整等に使います。divタグの中にはいろいろな要素を詰め込むことができます。
<div>
      <h1>みだし</h1>
      <p>
        あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
      </p>
</div>

11

他にもJavaScriptを読み込むscriptタグやcssを読み込むstyleタグなどがあります。

CSSの定義

cssの定義は以下のように定義します。
 
タグ名 {
  CSSの定義
}

具体的な例を挙げると以下のようになります。以下はpタグの中の文字サイズを16pxにするCSSです。

p {
  font-size: 16px;
}

font関連

文字を装飾するにはfont関連のCSSを使用します。
p {
  color: red;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  font-family: serif;
}

colorは文字の色を定義します。色はredなどの文字列で指定できるのと、RGBや16進数で指定することもできます。

text-alignは文字をどこにそろえるかを指定します。leftだと左揃え、centerだと中央揃え、rightだと右端揃えになります。

font-sizeは文字の大きさを指定できます。ピクセル単位での指定やemでの指定が可能です。

font-weightは文字の太さを指定します。boldは太字を設定します。

font-familyではフォントの種類を決定します。コンピュータに標準的にインストールされているフォントを指定するのが一般的です。

背景関連

背景を装飾するなら背景関連のCSSを設定します。
p {
  background-color: red;
  background-image: url("./background.png");
}

background-colorでは背景の色を決定できます。これもfontの色と同様文字列による指定とRGBや16進数で指定することもできます。

background-imageでは背景に画像を指定することができます。指定の方法はurl("画像の場所”)です。画像の場所はそれが記述されているCSSからの相対パスで指定します。 

まとめ

HTMLとCSSの基礎を紹介しました。ここで紹介したもの以外にも細かく指定することが可能です。全てを一度に覚えるのは難しいので、その都度調べてWebページを作成していきましょう。

イベント

2017/12/05(火)
Design Thinking Square