独学で極める “Webデザイン”の技と心

第7回 (X)HTML+CSS入門

この記事を読むのに必要な時間:およそ 3 分

間があいてしまいましたが,前回は見出しについてお話をしました。Webに限らずあらゆる文書において,見出し+本文という組み合わせは一番シンプルかつ必ず文書中に必要な要素です。

今回は(X)HTML※1+CSS入門の実践を兼ねて,サンプルを作ってみます。

※1) (X)HTML
(Extensible) HyperText Markup Language。XHTMLとHTMLの違いについての詳細は割愛しますが,簡単に説明するとXHTMLはXMLに基づいて書かれた言語であり,HTMLに比べて書式の決まりごと(要素名・属性名が小文字でなくてはならなかったり,使える要素や属性の種類の制約など)が厳格になっています。詳しくは,@ITの記事が参考になります。
その他,HTML,XHTMLはW3C(World Wide Web consortium)が標準化を推進し,言語の仕様の策定が行われていますので,もっと深く学習する際に仕様書に目を通しておきましょう。ただ,仕様書を読んで頭でっかちになってから実践するよりは,実践しながらサイト制作の楽しさを覚えつつ正しさを身につけていくほうが結果的に吸収のスピードは早くなると思います。

見栄えを整えるその前に ~簡単な(X)HTMLの構造を観察してみる~

これから出てくるサンプルでは,シンプルなXHTMLに対してCSSを適用する事で見た目のデザインを変更していきます。Webデザインをこれからはじめる際のすべての基本となる部分でもあるので,しっかりと身につけていくとあとでいろいろな知識が吸収しやすくなります。

(X)HTMLは意味づけを行う言語

それではまず,以下のサンプルファイルをブラウザでご覧ください。特に何もスタイルを適用していない,見出し+本文だけのシンプルな内容です。

では次に,このファイルをテキストエディタ(Notepadなど)で開いてご覧ください。

<body>と</body>で囲まれた内容に注目してみましょう。

<h1>美しい見出しと読み手が心地よい本文</h1>
<p>美しい見出しと読み手が心地よい本文について(本文以下略)</p>
<h2>美しい見出しとは</h2>
<p>美しい見出しと読み手が心地よい本文について(本文以下略)</p>
<h2>美しい本文とは</h2>
<p>美しい見出しと読み手が心地よい本文について(本文以下略)</p>

見出しにあたる部分は<h1>~</h1> <h2>~</h2> ... ,本文にあたる部分は<p>~</p>という具合に,通常のプレーンなテキストに対して「意味付け」を行っているのです。

このような(X)HTMLを生成することのできるホームページ作成ソフトやWebオーサリングソフトと呼ばれるソフトがありどんどん高機能になってきましたが,文書の意味や文脈,重要度が分かっているのは私たち人間だからこそなので,完全にソフトウェアだけにまかせることは本質的には難しいと考えています。

さて,このままでは何のスタイルもあたっていない(デザインされていない)文書のままとなってしまうので,そこでCSS(Cascading Style Sheets)※2の出番です。(X)HTMLのような文書に対して,主に「見た目」の視覚デザインをどのようにみせるかを定義してあげるのがCSSの役割です。

※2) CSS

Cascading Style Sheets。視覚デザイン以外にも,音声を制御するCSSもあるので厳密には見た目だけではありません。

スペースや改行の有無によってブラウザの見栄えには影響しませんが,コードのメンテナンス性や見やすさのためにコロンと値の間やセレクタとかっこの間にスペースをいれるなど,独自の記述ルールを決めている制作者が多いので,自分にあった記述ルールを決めるとよいでしょう。

CSSで見た目を整える

それではこの何もスタイルのあたっていないXHTML文書に,装飾をしてみましょう。

CSSの読み込み方

CSSの読み込み方には何通りもありますが,ここではhead要素の中にlink要素を書いて読み込みしたサンプルを作成しました。

<head>
(中略)
    <link rel="stylesheet" href="sample.css" type="text/css" media="screen,tv" />
</head>

このようにlink要素のhref属性でCSSのファイル名を指定することで読み込まれます。

ではまたこのファイルをブラウザで開いてください。先ほどのsample1.htmlと少し見た目が変わったのが確認できます。

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/

コメント

コメントの記入