トップページ  > ウェブ制作チュートリアル  > 最後に、CSS無しで表示してみる
第29章 HTML・CSSソース全文

★最後に、CSS無しで表示してみる

最後に、CSS無しで表示してみる

広告

サンプルサイトの制作も今回で修了となります。 最後に、これまでに作成してきたウェブページからCSSを外すとどのように表示されるのか、表示テストをしてみましょう。

index.htmlの<head>~</head>の中にある以下の3行を削除して、index_nocss.htmlというファイル名で新規保存してください。

HTMLソース(index_nocss.html)

<!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.htmlというファイル名で新規保存をしたら、ブラウザで表示してみましょう。

変更後

CSSファイルが外されたことで、ウェブページの見栄えが大きく変化したことが分かります。 CSSファイルを外す前は、以下の状態でした。

変更前

上図のとおり、CSSを外したことで見栄えは大きく変化しました。 しかし、これだけ見栄えが変わってもHTMLでマークアップした情報の構造は変わりません。 HTMLで適切にマークアップしてあれば、最低限ユーザーに対して情報の意味を伝えることができます。

ここまでHTMLとCSSでウェブサイトを作ってきましたが、 「HTMLで情報構造を指定して、CSSでスタイリングを指定する」 「情報構造とスタイリングはそれぞれ独立している」 という基本を再確認してもらうために、 ウェブページからCSSを外して表示テストをしてみました。

ウェブページの構造を実感していただければ幸いです。

今回でウェブ制作チュートリアルは修了です。お疲れさまでした。 最終的に完成したサンプルサイトは以下の状態となっています。

まとめ
  1. これまでに作成したウェブページを、CSS無しの状態にして表示テストする
  2. CSS無しでもHTMLで適切にマークアップしてあれば、最低限ユーザーに情報の意味を伝えられる
  3. 「HTMLで情報構造を指定して、CSSでスタイリングを指定する」のがウェブ制作の基本
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ