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