のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その6:全体構成とリスト

6日目です。3日続けば良いかなぁと思っていたので自分でもびっくりです。

今のところ、本当に基礎の基礎しかやってませんが、はたして伝わっているのか?

日本語が苦手です。他国語も苦手です。

もう、人間として詰んでますが、さっそく本日のテーマいってみましょう。

 

【webサイトの全体構成について】

●サイト全体を見て、コンテンツの確認をしましょう。

●コンテンツの意味や目的をきちんと把握しましょう。

●必要不可欠なもの、最低限必要なものを考えましょう。

●人間の目の動きは、下図のように主に2タイプあります。

img6_1

その為、以前は左上にロゴを持ってくるサイトが多かったのです。

が!

最近ではyahoo!やTIME、Googleなどでは真ん中に持ってきてますね。

webサイトの流行はとても移り変わりが早いので、その時その時の流行りに敏感になっておく事も必要かもしれませんね。

●検索ウインドウは右上にある事が多いです。

 

視点誘導も視野に入れて全体を構築していきましょうね。

(個人的にはよく見かけるタイプのサイトはあまり好物ではないですげふんげふん)

 

さて、話は変わりまして、今度はタグのお話です。

本日のタグは【リスト】です。

リスト→箇条書きの事ですね。このタグは良く使います。

ていうかほぼ使います。ナビゲーションや、文中の箇条書きなど活躍の場は様々。

主に使うのは、3種類です。

<ul></ul>←あんおーだーりすと。非順序リストです。インデント(●)が付きます

<ol></ol>←おーだーりすと。順序付きリストです。行頭番号が付きます

<li></li>←リストの項目を表します。ulやolに挟まれます。改行後、1行分の空白が空きません

 

これにstart属性というものを付ける事も可能です。

<ol(タグ) (半角スペース)type(属性)="a"(値)>

こう書く事によって、1.2.3.だったものが、a.b.c.となります。

しかも、属性は2つ並べて書くこともできちゃったりします。

ひとまず、ulの見本を見てみましょう。

img6_2

<ul>という箱の中に<li>を入れて、入れ子にします。

こうする事によって、実際の表示はこうなります。

ing6_3

このインデント(●)は、後に書きますCSSにて色や形を変更する事も、

list-style-type:none;と入力する事によって消す事も出来ます。

意外と消す事って多かったりするので、頭の片隅にでも置いておいてもらえたらいいな。

 

では明日は7日目。

明日は

HTML5 Advent Calendar 2013 - Adventar参加記事になります。

まあ、基礎の基礎を書く事に変わりはありませんけどね(゚∀゚)