コーディング　復習

2020年1月6日 16:46

またまた授業の復習です。

スクリーンショット 2019-12-25 16.03.10

まずはこの部分を作っていきます。

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：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）

次はこれを作ります。↓

スクリーンショット 2020-01-06 16.20.59

この中の吹き出しの作り方だけ記録する。

吹き出しの飛び出ている部分は、三角形で作成する。

＜三角形の作り方＞
・ジェネレーターを使う
http://apps.eky.hk/css-triangle-generator/ja

三角形はborderプロパティで作れる。
仕組みは、以下を参照にする。
https://www.granfairs.com/blog/staff/make-triangle-with-css

箱の高さと幅を０にすると、三角形が作れる（理由は省略）ので、文字などの中身があると、無くなってしまう。
なので、三角だけを作りたかったら擬似要素を使うと便利。

この記事が気に入ったらサポートをしてみませんか？

コーディング 復習

・擬似要素とは

コーディング　復習