フロントエンド開発でのHTMLとCSSの位置づけ

WEBシステム開発とは何かと問われた場合の最大公約数的答えは、多少くどい言い方にはなりますが、ブラウザからの要求をサーバー側で処理したHTMLを、ブラウザが受け取ってスクリプトを実行した結果をレンダリングしてWEBサイトという形で表示する過程を構築することになります。

タグ(要素)のプロパティ(属性)に値を持たせることでレイアウトを構成していき、なかでもid(ページ内で1個だけ)、 class(ページ内で複数可)、 styleの3つはグローバル属性と呼ばれます。

開発言語(タグ)の役割分担

フレームワークやCMSなどは使わないクラシックなWEBシステム開発で登場する技術の役割分担は以下のようになります。

  1. HTML
    タグ(要素)単位でコンテンツに意味付けし、ブラウザのDOM(API)によりオブジェクト化され、JavaScriptから操作される。
  2. CSS
    HTMLの要素や属性をセレクタというオブジェクトとして扱い、プロパティに値をセットすることで装飾。
  3. PHP
    ブラウザから受け取った要求をサーバー側処理して結果をブラウザにhtmlとして返す。
  4. JavaScript
    ブラウザに内蔵されたスクリプト言語であり、イベントに応じて関数を実行したりDOMを通してWEBサイトの表示を変化させたりする。
  5. jQuery+jQuery Easy UI
    JavaScriptで頻繁に使う関数のライブラリで、セレクタのcssに値セット、サイト構築後に関数実行、エレメントの追加、オブジェクトのプロパティに値セットなどの機能がある。



HTMLのブロックレベル要素とインライン要素

HTML自体はプログラミング言語でなく文章に意味付けするマークアップ言語ですが、大雑把に分類すると以下のようになると思います。

  1. ページ定義タグ <html>, <head>, <body>
  2. HEADの中での情報付加やリンク <meta>, <title>, <link>, <style>
  3. BODYの中の構造化タグ <header>, <footer>, <nav>, <article>, <aside>,
    <section>
  4. セクション内 <p>, <hr>, <pre>, <blockquote>, <div>
  5. テキスト <strong>, <span>, <br>
  6. リスト <ol>, <ul>, <li>
  7. フォーム部品 <form>, <input>, <textarea>, <select>

タグ(要素)を見て一瞬それが何を意味するか判り難いものの例としてp(paragraph), hr(horizontal rule), pre(preformatted text), div(特に意味がある塊ではなくレイアウトや見た目を規定するためにCSSと一緒に使う), ol(ordered list), ul(unordered list), li(list item), span(特に意味があるわけではなくテキストの一部になんらかのスタイルを施す場合)でしょうか。

これらのタグに属性(プロパティ)と値を持たせることで付属情報を持たせることになります。例えば<head>タグ内で使うタグの属性を総動員すると・・・

<meta charset="utf8">
<meta name="description" content="インドネシア生活ブログです。">
<title>嗚呼インドネシア</title>
<link rel="shortcut icon" href="favicon.ico">
<style>
        body { background: red; }
</style>
//または・・・
<link rel="stylesheet" href="style.css">

また属性の中でも id(ページ内で1個だけ), class(ページ内で複数可), styleの3つはグローバル属性と呼ばれます。

HTML5の特徴

本来のHTMLの目的は文書の構造を表すことですが、HTML自体がアプリケーションとしての意味を持つようになったため、タグは要素の開始と終了を表す以外に、システムから見て意味があるカタマリをより明快に表現できるようになりました。

追加されたタグ

例えばこれまでヘッダー部分をあらわすのにID属性で「div id=”header”」と指定していたのが、独立した「header」タグでより明快に表現できるようになりました。

  1. 構造化タグ
    header
    footer
    aside
    section
    article :内容が単体で完結するセクション
    menu
  2. 取得先の意味
    figure:画像
    embed:埋め込み
    time:日時

取得先の意味を表すタグは、他のアプリケーションや検索エンジンのクローラーなどのシステムに対して、理解してもらうという「意味付け」という意味しかもちません。

timeタグ

システムに対してdatetime属性にYYYY-MM-DDやHH:MMのようなフォーマットで意味を伝えることができます。

<time datetime="2016-01-01">2016年1月1日 12:00</time>

CSS上でのタグと属性の指定方法

id属性の値は「#」、class属性の値は「.(ピリオド)」で定義します。リンクタグ「a」に対するマウスオーバーとかの擬似クラスには「a:hover」みたいに「タグ+コロン+スタイル」で定義します。

このようにHTMLタグ(要素)や属性をCSS上でセレクタというオブジェクトとして扱いプロパティに値を設定します。

//header
#header {
	width: 100%;
}
#header-inner {
	width: 800px;
	margin: 0 auto;
}
#header-top {
	height: 80px;
	font-size:1.1em;
}
/*header-topブロック領域内のheadlineクラス属性*/
#header-top .headline {
	float: right;
}

/*header-topブロック領域内のh1, h2, h3見出しタグ*/
#header-top h1,h2,h3 {
	padding-top: 12px;
}
/*header-topブロック領域内の段落タグ*/
#header-top p {
	padding-top: 5px;
}

タグの記述パターンは「スペース区切りが継承、カンマ区切りが列挙」です。

/*タグ(セレクタ)複数指定(カンマ区切り)*/
main, article, aside, header, footer {
	display: block;
}

/*タグ内のクラス(ピリオド)*/
body.mceContentBody {
	background-color:#fff;
}

/*リンクタグ領域内の画像のマウスオーバー(スペース区切)*/
a:hover img {
	-moz-opacity: 0.8; opacity: 0.8;
}

/*画像タグ内のクラス複数指定(カンマ区切り)*/
img.size-full, img.size-large {
	margin-bottom: 10px;
}

/*タグ指定領域のクラス指定領域のリンク(スペース区切)*/
header .sitename a{
	font-size: 22px;
}

レイアウト

スタイルシートでとまどうのは主にレイアウト定義の部分だと思います。HTMLタグにはdivやpなど下に積み重なっていくブロックレベル要素が確保するブロックボックスとspanやaなど左につめられて配置されるインラインレベル要素が確保するインラインボックスがあります。

HTMLタグで囲まれた要素(内容)は四角い領域を確保するというのがボックスモデルというCSSの基本的な考えで、具体的には要素を囲んだタグに対して「width, height, padding, margin, border」プロパティを指定し「px, em, %」の値を与えることです。

displayプロパティ

displayプロパティではHTMLデフォルトの要素のレイアウトを恣意的に変更することができます。

display : block;
display : inline;
display : none;

floatプロパティ

//bodyタグ内の左カラム
#left{
    float : left;
    width : 30%;
}
//bodyタグ内の右カラム
#right{
    float : right;
    width : 70%;
}

img{
      /*左寄せで右に文字を回りこませる*/
      float:left;
      /*時計周りに上10右20下30左40*/
      margin:10px 20px 30px 40px ;
}

paddingとmarginについては4つまとめて指定すれば時計回りに読みますが、それ以外の指定の場合は以下の意味になります。

  1. 1つ:all
  2. 2つ:top/bottom, right/left
  3. 3つ:top, right/left, bottom
  4. 4つ:top, right, bottom, left

marginが隣同士になる場合には小さいほうが相殺され、大きいほうが優先されます。

backgroundプロパティ

背景画像の配置ではurl・position・repeatを指定します。

blockquote{
      background-image: url(images/quote.png);
      background-position: left 5px top 5px;
      background-repeat: no-repeat;
}

potisionプロパティ

またブロックレベル要素やインラインレベル要素ののデフォルトの基準値であるstatic(左上)を変更できるのがpositionプロパティで、値をrelative(相対的)に変更の上、top, bottom, left, rightはpositionで決めた配置からの位置を決めるプロパティです。

<div id='parent'><div id='child'>子ブロック</div></div>

<style>
#parent{
    width : 400px;
    height :200px;
    background : green;
    position : relative;
    top : 20px;
    left : 50px;
}
#child{
    width : 50%;
    height :50%;
    background : yellow;
    position : relative;
    top : 20px;
    left : 50px;
</style>

pxはピクセル(画面1つ1つの点)で絶対指定、emと%は親要素の値に対しての比率なので相対指定になりますが、注意するのはwidthの%指定は無条件OKですが、heightの場合は親要素のheightの%を明示的に示す必要があることです。

親ブロック

子ブロック




簡単に言うとrelativeはOriginal position(staticの状態で居るべき位置)からの位置、absoluteは親要素を基点とした位置を表します。

positionプロパティは通常この組み合わせでしか使用しません。