Archive for category XHTML

XHTMLとCSS、時々レスポンシブ [準備体操 – cssで迷いなくす為のポイント]

Posted by 西本泰 in CSS, XHTML on 2013年6月28日

みなさん、こんにちは。

インフォアライブの二等兵西本です。

最近、「忍者衣装やたこ焼きの被り物を着用しながら、日々プログラムと戯れている人」というキャラクターのせいで、
社内から少々頭のネジが緩そうな人柄として認識されているような気がしますが、そんなことは無いです。

真面目で好青年なイメージを改めて認識してもらう為にこちらのブログでは若干真面目に記事を書きます。

さて、弊社スタッフ達が色々な知識を投稿しておりますが、
私はWEBサイト構築時の原点であるXHTMLとCSSの内容をピックアップ致します。

最初のお題ですが、cssにあまり触れない方に対する覚えておいた方が良いcssのポイントをご紹介いたします。

1.CSSファイル読込場所について

ズバリ「タイトルタグ下にまとめて記載」するのが一番理想的です。

スタイルシートの基本書sampleでもhead内に記載されていますので
「今更感」がありますが、head内に記載するだけでは駄目です。

「head内に記載するだけ」守れば良いという方に良くあるミスが特定の理由も無しに
外部js読込タグ下でCSSの読込を記載しているパターンです。

というのも、ブラウザがページを表示する時にHTMLに記載されている内容を上から順に読込む為、
表示時のレスポンスを左右する可能性があるからです。

jsファイルをスタイルシートの読込前に記載した場合にjsの読込時間が大幅に掛かると、
ブラウザが一時的に真っ白になってしまいます。

エンドユーザがストレス無くサイトへアクセス出来るようにする為にも
こういった基礎的な所に気を使わなければなりません。

尚、補足ですがｊｓファイルの読込場所に関しては特定の理由がない限り、bodyの閉じタグ上に書込むのが理想的です。

詳細な説明は下記参考書に記載されておりますので、興味がある方は是非読んで下さい(^o^)

https://www.oreilly.co.jp/books/9784873113616/

▼ 理想的な配置例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>
<body>

～ 内容 ～

<script type="text/JavaScript" src="scriptfile1.js" />
<script type="text/JavaScript" src="scriptfile2.js" />
<script type="text/javascript"><!--

～  js処理 ～

--></script>
</body>
</html>

WEBページの表示速度に不満を感じた場合はこの書式を意識して記載してみて下さい。

今回は初の投稿なのでここらへんで終了いたします。

来週は今回の続きで