コーディング 復習
またまた授業の復習です。
まずはこの部分を作っていきます。
HTML
<section class="profile sec">
<i class="far fa-user icon"></i>
<h2 class="ttl">Name Name Profile</h2>
<div class="profile_container">
<figure class="profile_img"><img src="image/sea.jpg" alt=""></figure>
<div class="profile_box">
<p class="profile_name">名前 名前</p>
<p>
2000/00 生まれ<br>
なんとか県出身、大阪府大阪市在住<br>
前職は◯◯で、ウェブデザイナーという職業を知り面白そうだと思い勉強をするためスクールに通いました。<br>
想像よりウェブデザインやコーディングはロジカルなもので、おもしろさにハマり、いろんなものを勉強がてらに制作しました。<br>
のちほどご紹介させていただきます。
</p>
</div>
</div>
</section>
今回画像は、<figure>で囲みました。
・figureタグ=写真、挿絵、図表、コードなどのまとまりを表す。
その部分を文書から切り出したとしても元の文書に影響がなく、切り出した内容自体で意味がわかるものである必要がある。
①アイコンを、アイコンフォントで挿入する。
・アイコンフォント
画像じゃなく文字として扱える。
文字に使っていたCSSをかけれる。(colorやfont-sizeなど)
画像が荒れない。
〜使用準備〜
CDNを使う
(簡単にいうと、他のサーバーに上がっているデータを読み込むこと)
<手順>
①以下のコードをコピーする。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
②headタグ内に貼付けする
<head>〜</head>の中に貼り付ける。</head>の直前に貼ればOK。
<使い方>
①使いたいアイコンフォントを探す
②アイコンフォントのコードをコピー
③アイコンを表示させたい位置に貼付け
※iタグ=インラインブロックの性質
・line-height
文字の行間を調整できるCSS
※基本的には相対的な数値で表す。↓
font-size: 22px;
line-height: 2;
これは、行間をfont-sizeの2倍の44pxにするということ。
②タイトル横の横線を付ける
これを擬似要素で作ります。
・擬似要素とは
HTMLには書かれていないことをCSSで作ることができる。
<CSSの書き方>
以下のコードで、横線が作れる。↓
beforeが左線、afterが右線。
.ttl::before{
content: "";
display: inline-block;
width: 20px;
height: 1px;
background-color: #333;
vertical-align: middle;
}
.ttl::after {
content: "";
display: inline-block;
width: 20px;
height: 1px;
background-color: #333;
vertical-align: middle;
}
擬似要素は、タグ名やクラス名、id名などの後に::beforeや::afterをつける。
中に必ず、content: "";をいれる。
content: "";には書きたい文字などを入れる。
(※文字は必ずしも入れる必要はない)
・beforeとafterの違い
::before
⇨要素の直前に内容が来る。
::after
⇨要素の直後に内容が来る。
さっき書いたコードは1つにまとめることもできる。↓
.ttl::before,
.ttl::after {
content: "";
display: inline-block;
width: 20px;
height: 1px;
background-color: #333;
vertical-align: middle;
}
③画像を丸くする
<方法1>
border-radiusを使う。
border-radius
⇨角の丸みを指定できる。
div {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
数値はpx指定する。
これを1つに書くこともできる。↓
div {
border-radius: 10px 20px 30px 40px;
}
順番は、左上、右上、右下、左下と左上から時計周り。
<方法2>
overflowを使う。
overflow
⇨要素のボックスからはみ出た部分をどう扱うかを指定する。
・overflowの4つの値
・visible:初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
・hidden:はみ出た部分が隠れる
・scroll:はみ出た部分が隠れてスクロールできる状態になる
・auto:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)
次はこれを作ります。↓
この中の吹き出しの作り方だけ記録する。
吹き出しの飛び出ている部分は、三角形で作成する。
<三角形の作り方>
・ジェネレーターを使う
http://apps.eky.hk/css-triangle-generator/ja
三角形はborderプロパティで作れる。
仕組みは、以下を参照にする。
https://www.granfairs.com/blog/staff/make-triangle-with-css
箱の高さと幅を0にすると、三角形が作れる(理由は省略)ので、文字などの中身があると、無くなってしまう。
なので、三角だけを作りたかったら擬似要素を使うと便利。
この記事が気に入ったらサポートをしてみませんか?