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

第7回　(X)HTML＋CSS入門

2008年2月1日

山田あかね

Webデザイン

デザイン, スタイル, HTML, html, サンプル, XHTML

間があいてしまいましたが，前回は見出しについてお話をしました。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は意味づけを行う言語

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

サンプル1（sample1.html）
見出しと本文で構成されたシンプルなXHTML文書サンプル（XHTML 1.0 Transitional）

では次に，このファイルをテキストエディタ（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要素を書いて読み込みしたサンプルを作成しました。

サンプル2（sample2.html）
XHTML文書にsample.cssを読み込んだサンプル（XHTML 1.0 Transitional）

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

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

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

Webデザイン

山田あかね（やまだあかね；purprin）

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

URL：http://purpr.in/blog/

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

バックナンバー一覧

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

最新ソフトウェアプロテクションの導入方法（3/8～4/16）
Adobe FLASH PLATFORM CAMP Tokyo（3/16）
「組込みデータベースを利用した開発のポイントとDeviceSQLのご紹介」セミナー（3/17）

2010年版SEO体得講座: 本連載では，いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて，最新トレンドからすぐに使えるTipsまでを紹介します。
小型Linuxサーバの最高峰 OpenBlockS 600活用指南: 搭載メモリの増加，CPUクロックの向上など，あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から，活用するためのさまざまなノウハウを紹介していきます。
はじめMath! Javaでコンピュータ数学: プログラミング言語入門者向けに，知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で，即活用できる知識を目指します。
教科書には載っていないネットワークエンジニアの実践技術: ネットワークエンジニア，インフラエンジニアのトラブル対応には，時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について，実例を元に紹介します。
Googleケータイ，世に現る: 2008年9月，Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。
モバゲーオープンプラットフォームに挑戦！――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ: 2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが，アイデアを企画に落とし込み，開発までのノウハウを紹介します。
プロトタイピングツールSketchFlowを用いた，Silverlightアプリ開発: SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。
Ubuntu Weekly Recipe: Ubuntuの強力なデスクトップ機能を活用するための，いろいろなレシピをお届けします。