[PR]
2024/04/21（Sun）00:35
10年ぐらい前の知識で適当に作ったページだと、いかにも素人っぽい感じがアリアリと・・・
WEBの黎明期は、素人さんがWEBページを見る機会も限られてて、
概ね、業界内の情報伝達の手段だったので、ともかく情報を整理して、
見やすく、必要な順番に並べるのが肝だったのです。
テキストブラウザでブラウジングしてる人も結構いたんですよ。
（実は、私もLinuxのコンソール上で、Lynx使ってた）
下手に画像を置くと、「重たい」といって、怒られたものです・・・（遠い目）
・・・で、今頃、WEBページ（ホームページ）の作り方、というか、
スタイルシートなるものをお勉強中です。
すべてを知ろうとするとドツボな感じなので、やりませんが、
基本的なところは、そんな難しくありません。（たぶん）
ほとんど同じようなページを表現するのに、異なる何通りかのやり方があるので、
どれか、ひとつ、自分にとって理解しやすいものを覚えればいいんじゃないかなと思います。
たぶん、業界ごと（派閥ごと？）に流儀がありそうな気がします。
今のところの私の理解（というか、いまのところの私の流儀）としては、
例えば、htmlを
<html>
<head>
<title>タイトル</title>
<link href="スタイルシートのファイル名" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap"> ←全体を覆うフレームのようなもの
<div id="header">
ここにヘッダの内容を書く。
</div><!-- header_end -->
<div id="contents">
<div id="menu">
ここにメニューを書く
</div><!-- menu_end -->
<div id="main">
ここに中心となる情報を載せる
</div><!-- main_end -->
</div><!-- contents_end -->
<div id="footer">
で、フッターを適当に・・
</div><!-- footer_end -->
</div><!-- wrap_end -->
</body>
という感じ（実際には、それぞれのdivisionの中をもっと細かくdivで分けてあげますが）
で書いてやって、それに対応するようにスタイルシートファイルを用意します。
cssの中では、上の例だと、次のようなdivisionの設定をしてやります。
body { }
#wrap { }
#header { }
#contents { }
#menu { }
#main { }
#footer { }
設定内容は、中カッコ｛ ｝の中に書く。例えば、
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
background-color: #000000;
background-image: url('背景画像ファイルの名前');
background-repeart: no-repeat;
background-position: center top;
border-style: double;
border-width: 5px;
border-color: #443300;
なんて感じ。改行と半角スペースは気にせず、好きなレイアウトで書きます。
（詳しくは、それぞれのワードをググれば、でてきますんで）
＃marginとpaddingの実装上の違いがイマイチ分からんです。意味の違いは分かるけど
＃まあ、実際には、適当に数値を変えながら、できばえを見つつ判断するわけですが。
background-imageってのを上手く使ってやって、
それっぽくビジュアルなものを作ってやるのが肝かもしれない。
div同士の位置関係にも気を配る。このあたりには、
float: left;
clear: both;
なんていう感じで、設定してやる。
あとは、
#main a { text-decoration: none; }
#main a:link {color: #ff0000; }
#main a:visited {color: #00ffff; }
#main a:active {color: #ffffcc; }
#main a:hover {color: #ffffcc; }
てな感じで、その枠内に記述するリンクの文字列の設定をしてやる。
#menu li { }
というような感じで、リスト表示の設定をしてやる。
とりあえず、こんな知識で、”素材の画像さえあれば”（←これが実は肝）
どっかのページをまねながら、それなりのデザインはできるかなぁ・・と。
微妙なTIPSとしては、
「全角スペースがかなり悪さするみたいなんで、なんかおかしいと思ったら、
とりあえず、全角スペースを検索してみるのが吉」というところぐらいかな。
このブログのテンプレートもいじってみようかと思ったけど、
人の作ったhtmlおよびcssってのは、訳がわからなくていじれない。
とりあえず、「拍手する」のコメントについての注意文と、
正規のブログコメントへのリンクを張ってみました。いかがでしょ？
[0回]
PR
