ホームページ講座
あえて旧式のＨＴＭＬ手書き
近年、ＷＥＢサービスの発展に伴い、ブログやＭｉｘｉなどのＳＮＳ、Twitterといったサービスによって、誰でも気軽に情報を世界に公開できるようになっています。
以前では、ネットに情報を公開するにはＨＴＭＬを覚える必要がありましたが、そんなことは現在では必要ありません。
ですが、このサイトはあえてＨＴＭＬによる手書きを選んでいます。
ここでは、HTMLの知識が多少ある方を中心に解説していきますので、単純に情報を公開したいと思う方は、ブログをすることがお勧めです。
いや、初心者でも、やりたいという根気があれば、WEBサイト作りは十分に楽しめます。
CSSによるレイアウト
ポイントはfloat:left
HTMLでレイアウトを作るときは、CSSによるレイアウトが基本になります。 こちらのサイトでは、このような構成で作っております。
<html>
<head>
<style>
*{margin:0;padding:0;}
/* わかりやすいように境界線 */
.head, .body, .contents, .menu, .foot{
border-style:solid;
border-width:1px;
}
.body{
width:600px; /* 幅を設定 */
float:left; /* ここがポイント */
}
.contents{
margin:5px;
}
.menu{
width:160px; /* 幅を設定 */
float:left; /* ここがポイント */
}
.foot{
clear:both; /* ここがポイント */
}
</style>
</head>
<body>
<!-- ヘッダーの部分 -->
<div class="head" id="head">
Header
</div>
<!-- 記事の部分 -->
<div class="body" id="body">
<!-- 記事の内容の部分 -->
<div class="contents">
Conetents
</div>
</div>
<!-- サイドメニュー -->
<div id="menu" class="menu">
Menu
</div<
<!-- フッター -->
<div id="foot" class="foot">
Footer
</div>
</body>
</html<
コンテンツとサイドメニューは幅を指定する必要があるため、「width」プロパティを指定します。
そして、コンテンツとサイドメニューを横に並べるため「Float」プロパティに「left」を設定する必要があります。
フッターは横に並べるわけではないので、「clear」プロパティに「both」を設定することで、回り込み設定を解除します。
floatを解除する設定は「clear:both」これが意外とわかりにくい
レイアウトの雛形サンプル
レイアウトはこのようにしておき、コンテンツ以外の部分はJavascriptで外部のファイルを参照するようにしておくと、サイトの修正が非常に便利です。
詳しくはJavascriptで作る基本ページ～document.writeを参照。
サイドメニューは右に配置
昔のWebサイトは、フレームを利用して、サイドメニューを左に配置しているものが多かったと思います。
しかし、現在は右に配置するのが主流になっています。
なぜか？
スマートフォンでは、幅の大きなコンテンツは画面の左端に合わせて表示されます。
要するに右側が見えなくても、記事の内容を読むのに支障はありません。
また、HTMLは上から順番に解釈されます。右配置ではメインコンテンツの下に書く必要ことができます。
これにより、PC版とスマホ版をCSSで切り替えた時にメニューを下に配置することができます。
検索エンジンで訪れた場合、真っ先に訪問者が見たい情報はメニューではありません。
なので、メニューはPC版では右、スマホ版では下に配置した方が訪問者にとってありがたいことでしょう。
左メニューの場合
右メニューの場合
このように真っ先に記事の内容が読めるので、使い手にとって非常にありがたい。
このサイトでは１つのHTMLをCSSでPCとスマホと3DSに対応させています。
詳しくはJavascriptで作る基本ページ～スタイルの分離を参照。
リキッドレイアウト
CSSのfloatプロパティでは、ブロック要素(コンテンツを構成する四角い領域)を、横に並べて表示できます。
そして、画面の端に達したら自動的に改行のように折り返されます。
この特徴を利用して、画面のサイズに合わせて柔軟に配置が変化するレイアウトをリキッドレイアウトといいます。
液体のように、容器(サイズ)に合わせて柔軟に変化するレイアウトという意味
このサイトでは、主にプチコンのＱＲコードを表示する部分で使用しています。
ブラウザのズーム機能(「Ctl」+「＋」か「－」または、「Ctl」押しながらマウススクロール)でページの拡大縮小ができ、画像も同時に拡大縮小されます。
この時にリキッドレイアウトでページが作られていれば、画像サイズに合わせて、横に表示する画像の枚数も変動します。
QRコード以外にも、画像をたくさん表示するアルバムのようなページでは特に有効です。
幅を広げた場合
幅を狭めた場合
プチコンの作品紹介～ここにQRコードのポップアップがある
。HTML 5はWebアプリケーションのクライアントサイド開発における事実上の標準技術です。Webブラウザが使える環境であればどこでも動作するため、スマートフォンはもちろん、最近ではテレビなどでも利用できます。本書はユーザビリティからパフォーマンスまで実際に利用する際に役立つ技を逆引きリファレンスとして活用できるテクニック集です。