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