Progate：Html&css中級編
今回の作成物：
トップ部分のレイアウト：
背景画像を指定する①
background-imageプロパティを使用する。
「background-image: url(画像のurl)」と記述する
ex. background-image: url(top.png)
背景画像を指定する②
background-sizeプロパティを使用して大きさを指定する
「background-size: cover;」と記述すると1枚の画像で表示範囲を埋め尽くすように背景を縮小・拡大してくれる。
要素を中央に配置する
marginプロパティを使用して要素を中央に配置する。
ステップ①：widthプロパティで幅のサイズを決める
ステップ②：「margin: 0 auto」で中央に位置する
*widthを必ず併用すること。autoを使うときはmarginの左右のみ。
ex.
.box {
width: 300px;
margin: 0 auto;
}
*実践ではboxではなくて、containerクラスというのを作成した
実践：
.container {
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 180px 0 100px 0;
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
color: white;
}
透明度を調整しよう
opacityプロパティを使用すると0.0（完全に透明）~1.0（完全に不透明）を選択できる。
「opacity: 0.5」など
文字感覚を調整しよう
letter-spacingプロパティをしようすると、文字感覚が調整できる。
「letter-spacing: 〇〇px」
ボタン部分を作ろう
displayプロパティでblock, inline-block, inlineを指定しよう。
aタグはインライン要素なので、width,height,padding,marginが指定できず、不便である。なのでdisplayプロパティでインラインブロック要素に変換すると出来なかったことが出来るようになる。
複数クラスの指定
Htmlの方でスペースを開けて記述すれば複数クラスを指定できる。
<div class=“btn blue”></div>
実践：
index.html
<div class="btn-wrapper">
<a href="#" class="btn signup">新規登録はこちら</a>
<p>or sign up with</p>
<a href="#" class="btn facebook">Facebookで登録</a>
<a href="#" class="btn twitter">Twitterで登録</a>
</div>
stylesheet.css
.btn {
padding: 8px 24px;
color: white;
display: inline-block;
opacity: 0.8;
}
.signup {
background-color: #239b76;
}
.facebook {
background-color: #3b5998;
margin-right: 10px;
}
.twitter {
background-color: #55acee;
}
.btn-wrapper {
margin: 20px 0;
}
.btn-wrapper p {
margin: 10px 0;
}
マウスを乗せたときに処理を変えよう
「セレクタ:hover {処理}」とするとカーソルが載ったときの処理が記述できる
ボタンの角を角丸にする
border-radiusプロパティを使うと角が丸くなる。
「border-radius: 10px」などと記述。
テキストを中央に寄せる
text-alignプロパティを使用すると、left, center, rightのように文字列の位置を設定できる。
「text-align: center;」などと記述。
「margin: 0 auto」と「text-align: center」の違い：
「margin: 0 auto」：広い範囲を囲むブロック要素のときに使う
「text-align: center」：テキストやボタンなど、インライン要素やインラインブロック要素のときに使う
アイコンを使おう
Font Awesomeのurl：https://fontawesome.com
Font Awesomeの使い方：
①Font Awesomeのcssファイルを読み込む
<head>
<link rel=“stylesheet” href=“//maxcdn….”>
</head>
②<span>のクラスに「faクラス」と「fa-アイコン名」クラスを指定する
ex. <span class=“fa fa-twitter”></span>
*faはfont awesomeの頭文字
③マージンでアイコンと文章のスペースを空けるのを忘れないように
.top-wrapper span {
margin-right: 5px;
}
ヘッダーのレイアウト：
背景色のみ透明にする
rgbaプロパティはopacityプロパティとは違って中身全体を透明にすることはなく、背景色のみを透明化することができる。rgbaはred,blue,green,alphaの略である。
rgbとは：red,green,blueの組み合わせ
「background-color: rgb(255, 174, 30);」のように色を設定できる
rgbaとは：aが透明度を表し、opacityプロパティと同じで0.0~1.0の間で透明度を設定
「background-color: rgba(255, 174, 30, 0.5)」とすると背景色のみに透明度を与えることができる
💡ログインリンクを作ろう💡
①header-leftをfloat: left;させる
②header-rightを作って、その中にaタグを用意しloginクラスをつける
③header-rightをfloat: right;させる。また背景色をセットする
④header-right:hoverでhover時に背景色を変える
アニメーションをつけよう
transitionプロパティを使うとアニメーションがつけられる。
「transtion: 変化の対象 変化にかかる時間」を設定できる
ex.
div {
transition: all 1s;
}
div:hover {
background-color: red;
}
*transitionは多くの場合、hoverと組み合わせる。
行間を指定する
line-heightプロパティを使用すると行の高さを設定できる。
「line-height: 〇〇px」で設定できる。
line-heightプロパティと縦の中央寄せ
要素の高さ(height)とline-heightプロパティのpxを同じにすると、文字が真ん中に位置してくれる。
ex. header-rightのheightが65pxだったら、line-heightプロパティも65pxにすれば縦の中央に位置してくれる。
<a>タグをブロック要素にする
aタグはインライン要素なので、中身のテキスト部分しか押すことのできない大きさである。そのため、displayプロパティでブロック要素に直せば、押せる範囲を広めることができる。
実践：
.header-right {
float: right;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s;
}
.header-right:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.header-right a {
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
}
レッスン一覧のレイアウト：
文字の太さを指定する
font-weightプロパティを使用すると、フォントの太さを変えることができる。
normalかboldを指定することができる。
font-weight: bold;
実践：
①index.htmlで必要な項目を用意した
②paddingを設定した
③その他もろもろ設定した
レッスンを並べよう
幅を％で区切って表示する場合、widthやheightをpxで記述するのではなく％で記述すればよい。この%は親要素に対して、子要素が何％かという意味である。
ex.
index.html
<div class=“parent”>
<div class=“child”></div>
<div class=“child”></div>
</div>
stylesheet.css
.child {
width: 25%;
}
レッスン紹介部分の構成
💡レッスン部分を作る💡
①index.htmlで全ての要素を用意する（この場合lessonクラスは全部で4ついる）
②lessonクラスをfloat: left;とwidth: 25%;とした
lesson-icon部分の構成
「postion: absolute;」を使おう
Html要素同士は基本重なることがないが、postion: absolute;を使うと要素同士を重ねて表示することができる。
サイト全体の左上部分が基準となり、topとleftからの距離を指定する。
ex.
.box1 {
position: absolute;
top: 50px;
left: 70px;
}
「position: relative;」を親要素につけよう
postion: absolute;だとページ左上が基準となってしまう。基準にしたい要素があればその要素にposition: relative;とつけておくと、その要素の左上からの距離を指定することが出来る。
index.html
<div class=“parent”>
<div class=“child”></div>
<div class=“child”></div>
</div>
stylesheet.css
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 70px;
}
実践：
①.lesson-wrapperをtext-align:center;
②.lesson-iconをposition: relative;
③.lesson-iconのpタグをpostion: absolute;とtop:90px;にした。width:80%;にして、display:inline-block;にすることで①のtext-align:center;が反映されたと思う。margin-top:20px;をした
*text-align: center;とwidth:〇〇%;とmarginやpaddingは一緒に使いやすいかも
メッセージ部分のレイアウト：
影を作ろう：
box-shadowプロパティで影を作れる。
「box-shadow: 水平方向→ 垂直方向↓ 色;」で影を設定する。
ex. box-shadow: 10px 10px black;
ボタンを押したら凹むようにしよう：
「セレクタ:active」でクリックした時に処理を設定できる。
box-shadow: none;にすると影が消える。
positive: relative;とabsolute;を使って、ボタンの位置も移動させる
ボタンを基準に「position: relative;」にして、そこから「top: 影の分のpx;」とすると影の分だけボタンが下がる（押し込まれるように見える）
ex.
.btn:active {
position: relative;
top: 6px;
box-shadow: none;
}
フッターのレイアウト：
ヘッダーを固定しよう
position: fixed;とすると要素の位置を固定できる。
top, left, right, bottomを指定することができる。
要素の重なり順
position: fixed;を使うと、要素の重なりができてしまう。
そこでz-indexプロパティを使用すると、重なる順番を指定できる。
z-indexは値が大きいほど上に表示される。
実践：
position: fixed;
top: 0;
z-index: 10;
早見表
cssプロパティ
background-image: url(top.png);
background-size: cover;
margin: 0 auto;
opacity: 0.5;
ーーーーーーーーーーーーーーーーーーーーーー
letter-spacing: 10px;
display: inline-block;
div:hover {}
div:active {}
ーーーーーーーーーーーーーーーーーーーーーー
border-radius: 10px;
text-align: center;
background-color: rgba(255, 174, 30, 0.5)
div {transition: all 1s;} div:hover {color: red;}
ーーーーーーーーーーーーーーーーーーーーーー
line-height: 65px; と display: block;
font-weight: normal;
width: 50%;
position: relative;
ーーーーーーーーーーーーーーーーーーーーーー
position: absolute;
top: 30px;
left: 30px;
box-shadow: 10px 10px black;
ーーーーーーーーーーーーーーーーーーーーーー
box-shadow: none; と btn:active {}
position: fixed;
top: 0;
z-index: 10;
Font Awesomeの読込
・<link rel="stylesheet" href="FontAwesomeのcssファイル">
・<span class="fa fa-twitter"></span>
