20200706　①FontAwesomの学習・メディアクエリからのスマホ対応のサイト作成　::before・overflow・

FontAwesom

リストの箇条書き・に付けられるロゴ画像が集まったサイト

以下やり方を簡潔にまとめた

①HTMLのheadタグの中にFontAwsomeのリンク（下記）をはりつける
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

※FontAwesomで使いやすいのはver5とのこと。

②下記のサイトから使いたいロゴを選ぶ
https://fontawesome.com/?from=io

③決まったらロゴのHTMLをコピーしてhtmlのbodyタグの中に張り付ける。

通常アイコンの設定について

文字の開始位置の設定
i要素にclass名「fa-fw」を追加

例））

このようにfa-fwを追記することによってロゴ画像のサイズに関係なく文字の開始位置を揃えることができる。

リストアイコンの設定について

ul要素にclass名「fa-ul」を追加
li要素内のi要素をspan要素で囲んでclass名「fa-li」を追加

例））

<ul class="fa-ul">
<li>
List icons can</li>

回転・反転アイコンの設定

i要素に以下のclass名を追加

fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

例））

違うロゴをいちいち拾ってくるのが面倒な時に使えるか？

多分あまり使わないアイコンの設定なのかも・・・。

アニメーションの設定

i要素に以下のclass名を追加

fa-spin→滑らかに回転
fa-pulse→点滅しながら回る？カクカクしながら回転している気が・・。

例））

これは面白い。

::before、::after

コンテンツの前か後ろに何かを入れるための要素
content: とセットで使わないと無効化されてしまう必須プロパティ

font-familyも同時に使用すること。
→font-family:"Font Awesome 5 Free", "Font Awesome 5 Brands"

同じ番号の種類違いはfont-weightで指定（100～から順番に）
アイコンがうまく読み込めないと□で表示されてしまう！

例））

h1::before{
content: "逆スラッシュf4f9";
font-family:"Font Awesome 5 Free", "Font Awesome 5 Brands";

}

重要
ロゴは文字扱い
大きさを変えるときはwidthじゃなくてfont-sizeで！！

※自宅用のPCは逆スラッシュが打てないキーボードのため、このような表記になってしまっている。。

メディアクエリ

画面幅によってデザインが変わる

例））画面幅を変えると背景色が変わる

このメディアクエリを利用して、PCで見た場合とスマホで見た場合の画面表示の切り替え設定を行う。

記述例））
html
/* すべての画面幅：PCデザインをメディアクエリなしで記述 */
body {
background-color: green;
}

/* 画面幅480pxまで：スマホデザイン */
@media screen and (max-width: 480px) {
body {
background-color: orange;
}
}

青字はスマホ用の設定で必ず必要になるコードなのでコピペして使う。

スマホサイトのCSS対応

cssにて設定も可

@media screen and (max-width: 480px)｛

body{------

の以下に下記のものに書き換える。

①width指定をautoにする。
②min-width指定を0にする。　
③画像の最大幅を100％にする。

img{
max-width:100%!important;←インポータントで最優先
height:auto!important
}

・・・他にもまだあったような、、要確認

スマホサイトについて詳しくはこちら
https://jobtech.jp/html_css/3877/

CSS overflowについて

はみ出た要素の表示方法を指定するプロパティ。

これを使うことで表記がめちゃくちゃ長くなるような要素でも決まったサイズの要素の中でスクロールでめくって見れる形にできる。

overflowプロパティに使える値

①visible

...ボックスからはみ出して表示される（初期値）

②hidden

...収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない

③scroll

...収まらない部分はボックスからはみ出さない。
内容が収まらない場合には、スクロールバーなどが表示される

④auto

...ボックスに収まらない内容をどう表示するかは、ユーザーエージェントに依存する。
内容が収まらない場合には、スクロールバーなどが表示される。

⑤no-display

...display：none; が指定されたかのようにボックス全体が削除される

⑥no-content

...visibility：hidden; が指定されたかのようにボックス全体が非表示となる

注意！
テーブルそのものにoverflowプロパティをかけても反映されない。
テーブルを囲むdivタブを設けてそこに記述する。

テーブルに幅の指定がないとうまく表示されない事例あり！

ーー便利機能メモーー

☆検証ツール　スマホ画面機能
shift+alt+ドラッグ→ピンチイン、ピンチアウト（拡大・縮小）

ーーーーーーーーーーーー

週の初日から詰詰詰

途中で力尽きないようにペース配分をしっかり行う

alienHRNの訓練日記

IT業界初心者で勉強中。