3分読める！【CSS】ページ内リンクへの移動をスムーズにする方法
本日のテーマは、
ページ内リンクをクリックするとスクロールが
スルスル動く方法です！！
通常ページ内リンクを移動する際は、
一瞬でリンク先の表示へ変わります。
今回の方法では、
この一瞬で切り替わる動きを
画面がスルスルと移動するような動きに帰ることができます。
さっそく実装方法を見ましょう！
実装方法
CSSとして「scroll-behavior: smooth」を指定すればOKです！
html{ scroll-behavior: smooth;}
これでページ内リンクをクリックすると
画面がスルスルと動いて動きがキレイになります。
3分で読める！【HTML】ul要素でリストマークの位置を指定する方法 2つ
本日のテーマは、
ul要素でリストマークの位置を指定する方法です！
実装方法
結論、ul要素の属性値として
「list-style-position:outside;」か
「list-style-position:inside;」を指定すればOKです。
両者の違いを説明します。
「list-style-position:outside;」は「・（リストマーク）」を
文章の左側に表示します。
ちなみにこの方法は「list-style-position」のデフォルト値と
なっているので別に「outside」を書かなくても大丈夫です。
「list-style-position:inside;」は「・（リストマーク）」を
文章のインデント位置に表示します。
※インテンドとは「文章の行頭に空白を挿入して先頭の文字を右に押しやる」で
す。
1分で読める！【CSS】アニメーションの発動時間を指定する方法
本日のテーマは、
アニメーションの発動時間を指定する方法です。
CSSで「:hover」「:active」などを使用し要素に動きをつける際に、
要素がどれだけの時間をかけて動くのかを指定する方法です。
使用するプロパティ
結論から言うと、
transitionプロパティを使用します。
＜サンプルコード＞
.image-box{
transition: 0.7s;
}
指定する時間は0.6sや1.2sなどで指定できます。
※sは秒数(Second)の単位
個人的にいい感じになる秒数は0.7ぐらいです。
1分で読める！フォルダ名に日本語を含んでいる場合の問題
本日のテーマは、
フォルダ名が日本語の場合に起きる問題とその対処方法についてです！
どのような問題が起こるのか？
結論から言うと、
img要素などで画像を使用する場合にスクショのURLを認識しなくなります。
日本語を含む場合と含まない場合のURLは
下記のように違ってきます。
＜フォルダ名に日本語を含む場合＞
_Users_umedadaiki_original_%E6%96%B0%E5%8D%92%E6%8E%A1%E7%94%A8%E3%83%98%E3%82%9A%E3%83%BC%E3%82%B7%E3%82%99_index.html.png
＜フォルダ名に日本語を含まない場合＞
_Users_umedadaiki_original_portfolio_index.html .png
フォルダ名に日本語を含んでいると
暗号みたいな文字がURLに含まれます。
対処方法
フォルダ名を英語にすれば解決します。
2分で読める！【CSS】要素を中央に寄せる方法 3つ
本日のテーマは
要素を中央に寄せる方法3つです！
要素を中央に寄せる方法3つ
要素を中央に寄せる方法は3つです！
パターン①：justify-content:center;
パターン②：text-align:center;
パターン③：margin:0 auto;
それでは1つ使い方を見ていきます！
パターン①（justify-content:center;）
こちらのCSSはdisplay:flext;とセットで使うことが必須です。
ちなみにdisplay:flex;はインライン要素をブロック要素に
ブロック要素をインライン要素にするCSSです。
使用するタイミングは、
縦に並んでいる要素を横並びにしたい時などです。
パターン②（text-align:center;）
この方法が一番手っ取り早いかもしれません。
他にセットで指定しなければいけないCSSもないです。
パターン③（margin:0 auto;）
こちらのCSSは使用する際は
widthプロパティで要素の幅を指定しておきましょう。
なぜなら、要素の幅が画面横一杯になり左右に余白を取れなくなるからです。
通常、要素の幅は指定しなければ親要素の100％の長さになります。
その状態でmargin:0 auto;を使用しても
要素の幅は横一杯の100％なので左右に余白を取れなくなります。
余白が取れないので中央に移動することも出来ないというわけです。
