ピクチャ上のサイズ変更で変更。
縦も横も幅400がちょうどいいぐらい。
解像度を上げたければ幅1,000。 それ以上は重くなる。
ただしスマホからの閲覧では表示サイズは同じ。
アップの前に。
EXif:画像に仕込まれた個人情報の削除をする。
画像で右クリック→プロパティ→詳細→「プロパティ→個人情報を削除」→OK
全体を赤にする
HTML
< ul >
< li >萬澄枝さん< /li >
< li >モアメタルちゃん< /li >
< li >永尾まりあちゃん< /li >
< /ul >
CSS
li{
color:red;
}
---------------------------------
↓
萬澄枝さんだけ赤にする
該当の文字をclass(指定範囲)として任意の名前を付けて、
そこだけにCSSを反映させる。
HTML
< ul >
< li class="selected">萬澄枝さん< /li >
< li >モアメタルちゃん< /li >
< li >永尾まりあちゃん< /li >
< /ul >
CSS
.selected{ ← 頭に.がつく。
color:red;
}
li{
color:#444;
}
■背景色を変える→「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
会社概要
採用
お問い合わせ
↓
■アレンジ1)リストを横並びにしたい
Progate 会社概要 採用 お問い合わせ
li{
float: right;------------listの要素を右に横並びになる
}
■アレンジ2)ロゴは左寄せ、リストは右寄せにしたい
Progate 会社概要
採用
お問い合わせ
左端に配置したい「footer-logo」にはfloat: left;を、
右端に配置したい「footer-list」にはfloat: right;を指定
---------------
一般的には
< header >< /header >
< footer >< /footer >
ul>
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ