ListItem
箇条書きしたいことばそれぞれをとで囲む
で囲む→中黒。
unordered list:順序がないリスト
で囲む→数字の連番。
ordered list:順序があるリスト
----------------
リスト表示で中黒ありとなし
中黒あり
萬澄枝さん
岡 裕美さん
高石ひかりちゃん
中黒なし
li{
list-style:none;
}
------------------
HTML
PHP
Ruby
内容は字下げする（インデントでずらす。tab）
↓
■余白調整
-----------------
上下左右に値を反映させる
CSSで、padding:値; → 上下左右にその値の余白ができる。
HTML
Progate
CSS
.logo1{
padding: 20px;
}
---------------
特定の方向にのみ値を反映させる
HTML
Progate
CSS
.logo1{
padding-top: 20px;
}
上＝top
下＝bottom
左＝left
右＝right
--------------
方向別に値を変える
書き方１）上下左右をきちんと表記する
.logo1 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
書き方２）省略計。上右下左（時計回り）で適用される
.logo1{
padding: 20px 10px 20px 10px;
}
書き方３）上下セットと左右セットとして表記する
.logo1{
padding: 20px 10px;
---------
ヘッダー部を入力するよ
Progate ヘッダーロゴはProgate
ヘッダーリストは、
箇条書きで、
萬澄枝さん
モアメタルちゃん
岡裕美さん
箇条書き終わり
ヘッダーリストの部分終わり
ヘッダーの部分終わり
-------------------
横並びにする→cssで「float:left;」
・liにかければli要素のみ
・header-logoにかければロゴとli要素が並ぶ
ただし、そのままだとフッターにもかかってしまう。
ヘッダーだけでよい場合は、「.float-list□ li｛
-----------------------------
一般的には
HTMLのレイアウト
念頭＝ヘッダー、メイン、フッター、という構成
要素で構成。
・division
・要素をグループ化するもの。
----ヘッダーの要素
-------メインの要素
----フッターの要素
※タグ名→tadキー→で終了タグまで自動入力できる。
HTMLの全体構造
■headとbody
head要素→ページに関する情報。ブラウザに表示されない。
body要素→実際に表示する内容
■構造の概要
--------------HTMLのバージョン宣言。
----------------------WEBページの設定に関するする情報。必ず3項目ある。
---------------------------①文字コード
Progate---------------------------②ページのタイトル名（ブラウザのタブに表示）
-----③CSSの読み込み指示
岡 裕美さん
すてきなアナウンサーです
※①文字コード（meta charset）
指定することで文字化けを防ぐことができる。
UTF-8はHTMLで推奨されているコード。
title>
メイン部分の構造
3つの要素で構成されいてる
copy-container-------タイトルバナー部
contents-------------メニュー部
contact-form---------記述部
■基本
-----------------------フッターの部分をやる。
Progate----ロゴの部分はProgate
-----------------リストの部分は次の通り
-------------------------------------unorderdlist（順序無関係のリスト）
会社概要
採用
お問い合わせ/li >
------------------------------------listの内容終わり
------------------------------------listの部分終わり
-------------------------------------フッターの部分終わり
--------------------
■そのままだと縦に並ぶ
Progate
会社概要
採用
お問い合わせ
↓
■アレンジ１）リストを横並びにしたい
Progate 会社概要 採用 お問い合わせ
li{
float: right;------------listの要素を右に横並びになる
}
■アレンジ２）ロゴは左寄せ、リストは右寄せにしたい
Progate 会社概要
採用
お問い合わせ
左端に配置したい「footer-logo」にはfloat: left;を、
右端に配置したい「footer-list」にはfloat: right;を指定
---------------
一般的には
ul>
＜ a >progate
＜a>progate
↓
リンクの飛び先を指定するには、href属性を追加
Hypertext Reference
a href=アンカーエイチレフ
progate
progategoogleへ
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ
