■背景色を変える→「background-colorプロパティ」
その行の色の変更
HTML
< h1 >大見出し< /h1 >
< p >段落< /p >
大見出し
段落
↓
CSS
h1{
background-color:#dddddd;
}
p{
background-color:#ffd800;
}
■背景色の幅、高さを変える＝width、heightプロパティをPXで指定。
HTML
< h1 >大見出し< /h1 >
< img src="https://prog-8.com/images/wanko.jpg" >
大見出し
↓
CSS
h1{
width:500px;
height:80px;
background-color:#9de8ea:
}
imag{
width:500px;
height:200px;
}
■文字の大きさを変える→「font-sizeプロパティ」を使う
< h1 >赤で10px< /h1 >
< p >青で40px< /p >
↓
HTML
赤で10px
青で40px
CSS
h1{
color:#ff0000:
font-size:10px:
}
p{
color:#0000ff;
font-size:40px;
}
■文字の種類を変える→「font-familyプロパティ」を使う
HTML
< h1 >hello< /h1 >
< p >hello< /p >
↓
CSS
h1｛
fomt-fa,ily:serif:
}
p{
fomt-size:"Avenir Next";
}
※明朝体：serif、YuMincho
※ゴシック体：sans-serif、"Lucida Grande"
■要素の一部にだけ反映させる→< span >を使う。
メイン部分の構造
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 >
< img src="url" >
image source
イメージソース
src属性のurlの部分に画像のリンクを指定。
![]()
要素はテキストを囲むことがないため、終了タグ不要。
< img src="https://prog-8.com/images/html/beginner/school.jpg" >
■編集：横向きの動画を切り取って縦向きにする（クロップ）
Avidemux→動画を選択
→「VideoOutput」を「Mpeg4 AVC (x264)」→「フィルタ」
→「変換」→「Crop」をダブルクリック
→トップ画面が出てクロップする部分が赤枠で囲まれる。
→「Lock Aspect Ratio」を9：16にする。
※コンテンツ別推奨
Youtube 16:9 /1280*720
Instagram ストーリーズ 9：16 /1080*1920
＜ 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へ
■レクチャー
SKILL HUB
無料
初心者向けの内容っぽいが、ざっくりでも流れがわかっていないとわからない。
しかし、コードを書きながらプレビューしていくので
要するに覚えたいことをやってくれる。
※行間とかインデントは関係ないようだ
■エディター
SUBLIME TEXT2
一部無料
アクセスするとOSのダウンロードが始まる
https://eng-entrance.com/sublimetext-start
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ
