サンプルサイトの制作も今回で修了となります。
最後に、これまでに作成してきたウェブページからCSSを外すとどのように表示されるのか、表示テストをしてみましょう。
index の<head>～</head>の中にある以下の3行を削除して、index_nocss というファイル名で新規保存してください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="東海エリア中小企業向け会計システム開発実績ナンバーワン企業。あしたをみつめるウェブサンプル株式会社"> <meta name="keywords" content="会計システム, 中小企業向け,東海エリア,ウェブサンプル株式会社,帳票出力,カスタマイズ,見積無料"><link rel="stylesheet" href="base.css"> <link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css"> <link rel="stylesheet" media="print" href="print.css"><link rel="shortcut icon" href="favicon.ico"> <title>ウェブサンプル株式会社</title> </head> ： （以下略） ：
index_nocss というファイル名で新規保存をしたら、ブラウザで表示してみましょう。
CSSファイルが外されたことで、ウェブページの見栄えが大きく変化したことが分かります。
CSSファイルを外す前は、以下の状態でした。
上図のとおり、CSSを外したことで見栄えは大きく変化しました。
しかし、これだけ見栄えが変わってもHTMLでマークアップした情報の構造は変わりません。
HTMLで適切にマークアップしてあれば、最低限ユーザーに対して情報の意味を伝えることができます。
ここまでHTMLとCSSでウェブサイトを作ってきましたが、
「HTMLで情報構造を指定して、CSSでスタイリングを指定する」
「情報構造とスタイリングはそれぞれ独立している」
という基本を再確認してもらうために、
ウェブページからCSSを外して表示テストをしてみました。
ウェブページの構造を実感していただければ幸いです。
今回でウェブ制作チュートリアルは修了です。お疲れさまでした。
最終的に完成したサンプルサイトは以下の状態となっています。
| <前へ | 目次へ | 次へ> |
