■属性
fontよりstyleよりclass
style属性＝
指定範囲を直接的に装飾する。
同じ装飾を複数箇所させたいときに都度同じ記述をしなければならず、微調整をしたい場合、すべてを書き直す必要がある。
class属性＝
装飾内容はCSSファイルに記述されているので、HTML等のファイル中での記述が少なく、
修正があった場合CSSファイル内の記述を書き換えれば全てに適用される。
整理と効率化のために一般にはCSSファイルに集約して、class等で指定することが多い。
HTML5以降ではclass属性がよい。
ただし、部分的な装飾だけでいい場合は、cssの方が手間なのでstyle属性で十分。
■CSS
https://udemy.benesse.co.jp/design/web-design/what-is-css.html
Cascading Style Sheets
HTMLのサイトの、見た目（文字色、大きさ、拝啓、配置など）を設定する言語。
コードごとに直接反映させるのではなく、複数のHTMLファイルに一貫したデザインを適用できる。
「CSSでスタイル適用する」。
簡単なアニメーションの記述も可能
・マウスを置くとボタンの色を変更。
・クリックに合わせてラジオボタンの表示
・数秒ごとに画像切り替え
（本格的な動的サイトはjavascriptが必要）。
■余白調整
-----------------
上下左右に値を反映させる
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｛
----------------------------------
< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< title>Progate
< link rel="stylesheet" href="stylesheet.css">
< /head>
< body>
< div class="header">
< div class="header-logo">Progate
< div class="header-list">
< ul>
< li>プログラミングとは
< li>学べるレッスン
< li>お問い合わせ
< /ul>
< /div>
< /div>
< div class="main">
< /div>
< div class="footer">
< div class="footer-logo">Progate
--------
body {
font-family: "Avenir Next";
}
li {
list-style: none;
/* 以下の2行を削除してください */
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
/* header-listの中のli要素にのみ適用したいCSSを記述してください */
.header-list li{
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
