プログラミング勉強日記 2021年3月15日 @importとは 外部のCSSファイルを読み込むときに使う。CSSファイルが１つだと記述量が多くなってしまうので、ファイルを分割するときに使われる。 @importの使い方 /* 同じ階層にファイルがあるとき */ @import url("cssファイル名"); /* 違う階層にファイルがあるとき */ @import url("cssファイルが入ってるフォルダ名/cssファイル名"); サンプルプログラム 最初にheader.cssとbody.cssファイルを作る。 次に、main.cssを作成してheader.cssとbody.cssも@importで読み込む。 main.css @import url("./header.css"); @import url("./body.css"); HTMLファイル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample</title> // main.cssの読み込み <link rel="stylesheet" href="./main.css" /> </head> <body> </body> </html> 参考文献 @import 外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】
2021年3月15日
外部のCSSファイルを読み込むときに使う。CSSファイルが１つだと記述量が多くなってしまうので、ファイルを分割するときに使われる。
/* 同じ階層にファイルがあるとき */ @import url("cssファイル名"); /* 違う階層にファイルがあるとき */ @import url("cssファイルが入ってるフォルダ名/cssファイル名");
最初にheader.cssとbody.cssファイルを作る。 次に、main.cssを作成してheader.cssとbody.cssも@importで読み込む。
header.css
body.css
main.css
@import url("./header.css"); @import url("./body.css");
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample</title> // main.cssの読み込み <link rel="stylesheet" href="./main.css" /> </head> <body> </body> </html>
@import 外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】
はじめに 「元々リンクテキストに下線が引いてあって、マウスホバーするとその下線が左から右へアニメーションする。」 そんなあるある要件を満たすためにいろいろと試してみました、が、悪しからず、完璧なIE11対応はできなかったので諦めました、という残念な記事です。 ぜひ、ナレッジがある方はお知恵を拝借できれば幸いです。 追記(2021/03/16): お知恵を頂き、追記しました。 実際にやってみた ベースとなるHTMLは以下の通りです。 HTML <a>リンクテキスト<br>2行目です</a> まずはscale()で実装 widthを使ったりいろいろ実装方法はあると思いますが、まず私はtransform: scaleX()で実装しました。 transform-originを変えればアニメーションの起点を簡単に真ん中にしたり右端にしたり変えられると考えたからです。 Mark.I（疑似要素で実現） a { position: relative; display: inline-block; text-decoration: none; } a::after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1px; background: #000; transform: scaleX(1); transform-origin: left top; } a:hover::after { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } } See the Pen LeftToRight Mark.1 by heeroo-ymsw (@heeroo-ymsw) on CodePen. 疑似要素afterで高さ1pxの線を作ってテキストの下に配置し、左端を起点にanimationで要素を拡大させています。 今回はもともと下線が引いてあるので、マウスホバーを外したときのアニメーションはありません。 しかし、このコードには問題があり、テキストが2行以上になるとそのブロックの下に下線がひかれ、「テキストの下線」ではなくなってしまいます。 複数行にも対応させる Mark.II（複数行対応版） a { background: linear-gradient(#000, #000) 0 bottom/100% 1px no-repeat; text-decoration: none; } a:hover { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { background-size: 0% 1px; } to { background-size: 100% 1px; } } See the Pen LeftToRight Mark.2 by heeroo-ymsw (@heeroo-ymsw) on CodePen. 疑似要素を用いるよりもスッキリした印象です。 linear-gradient()とbackground-sizeで幅100%/高さ1pxの下線を書いておき、background-sizeをアニメーションさせることで実現しています。 しかし、こちらにも問題点が。 IE11はbackground-sizeのtransition/animationに対応していません。 … IE11に対応させる Mark.III（IE11対応） a { background: linear-gradient(#000, #000) 0 bottom/100% 1px no-repeat; text-decoration: none; } a:hover { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { background-position: -190px bottom; } to { background-position: 0 bottom; } } See the Pen LeftToRight Mark.3 by heeroo-ymsw (@heeroo-ymsw) on CodePen. background-positionで左にずらしとくパターンです。 ただし、これも残念ながら万能策ではありません。 むしろ、問題が増えました。 下線を適応させたい要素に応じて、ずらし具合(例だと-190pxの部分)を調整しなくてはいけない ずらし具合の調整が地味に面倒 アニメーション方向が変わった場合などの汎用性が低い そのうちコーダーは考えるのをやめた 今回は以下の言い訳とともにIE11を切り捨て、background-sizeで実装しました。 調べたらpolyfillもあったが、案件でそれを検証している時間がない background-positionを使っても、実装当初はリンクが増える、もしくはテキストが変更になる可能性が大いにあり、その度にズレを調整していられない ついでにレスポンシブ対応&PCサイズのときはリキッド対応の必要がある そして、賢者が現れる 2021/03/16 追記 この記事を出したところ、賢者から知恵を頂くことができたので、改めてこの問題に向き合いました。 非常に勉強になります。ありがとうございます。 MarkIV（IE11対応&汎用性UP） a { background: linear-gradient(to right, #000 50%, transparent 50%) 0 bottom/200% 1px no-repeat; text-decoration: none; } a:hover { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { background-position: 100% bottom; } to { background-position: 0% bottom; } } See the Pen LeftToRight Mark.4 by heeroo-ymsw (@heeroo-ymsw) on CodePen. 端的に言えば、linear-gradient()で横方向のグラデーションを作成し、それをbackground-positionで左右に動かすというものになります。 ■□←こんな感じのグラデーションを作って、横を2倍に引き伸ばして、background-positionは左端に寄せておいて下線を常時表示します。 アニメーション時は、background-positionを右端に寄せて左端へ動かすことで左から右へ下線が動くように見えます。なるほどすごい！ しかしながら、はたまた問題が。 IE11だとkeyframesでアニメーションしない…… transitionだと動くのですが、下線を元々表示したい関係でkeyframesを使っており、これが動きませんでした。 書き方が悪いのか、IE11の仕様なのか…現在調査中です。 まとめ テキストの下線アニメーションの実装を行い、現段階では、background-sizeのanimation / transitionでの実装が最適解かと感じました。 background-positionの代替案が出来たと思ったのですが、keyframesによるanimationがうまくいきませんでした。謎。 鋭意調査続行中であります。
「元々リンクテキストに下線が引いてあって、マウスホバーするとその下線が左から右へアニメーションする。」
そんなあるある要件を満たすためにいろいろと試してみました、が、悪しからず、完璧なIE11対応はできなかったので諦めました、という残念な記事です。
ぜひ、ナレッジがある方はお知恵を拝借できれば幸いです。
追記(2021/03/16): お知恵を頂き、追記しました。
ベースとなるHTMLは以下の通りです。
<a>リンクテキスト<br>2行目です</a>
scale()
widthを使ったりいろいろ実装方法はあると思いますが、まず私はtransform: scaleX()で実装しました。 transform-originを変えればアニメーションの起点を簡単に真ん中にしたり右端にしたり変えられると考えたからです。
transform: scaleX()
transform-origin
a { position: relative; display: inline-block; text-decoration: none; } a::after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1px; background: #000; transform: scaleX(1); transform-origin: left top; } a:hover::after { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
See the Pen LeftToRight Mark.1 by heeroo-ymsw (@heeroo-ymsw) on CodePen.
疑似要素afterで高さ1pxの線を作ってテキストの下に配置し、左端を起点にanimationで要素を拡大させています。 今回はもともと下線が引いてあるので、マウスホバーを外したときのアニメーションはありません。
after
しかし、このコードには問題があり、テキストが2行以上になるとそのブロックの下に下線がひかれ、「テキストの下線」ではなくなってしまいます。
a { background: linear-gradient(#000, #000) 0 bottom/100% 1px no-repeat; text-decoration: none; } a:hover { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { background-size: 0% 1px; } to { background-size: 100% 1px; } }
See the Pen LeftToRight Mark.2 by heeroo-ymsw (@heeroo-ymsw) on CodePen.
疑似要素を用いるよりもスッキリした印象です。
linear-gradient()とbackground-sizeで幅100%/高さ1pxの下線を書いておき、background-sizeをアニメーションさせることで実現しています。
linear-gradient()
background-size
しかし、こちらにも問題点が。
IE11はbackground-sizeのtransition/animationに対応していません。
…
a { background: linear-gradient(#000, #000) 0 bottom/100% 1px no-repeat; text-decoration: none; } a:hover { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { background-position: -190px bottom; } to { background-position: 0 bottom; } }
See the Pen LeftToRight Mark.3 by heeroo-ymsw (@heeroo-ymsw) on CodePen.
background-positionで左にずらしとくパターンです。 ただし、これも残念ながら万能策ではありません。 むしろ、問題が増えました。
background-position
今回は以下の言い訳とともにIE11を切り捨て、background-sizeで実装しました。
2021/03/16 追記
この記事を出したところ、賢者から知恵を頂くことができたので、改めてこの問題に向き合いました。 非常に勉強になります。ありがとうございます。
a { background: linear-gradient(to right, #000 50%, transparent 50%) 0 bottom/200% 1px no-repeat; text-decoration: none; } a:hover { animation: leftToRightUnderline 0.3s; } @keyframes leftToRightUnderline { from { background-position: 100% bottom; } to { background-position: 0% bottom; } }
See the Pen LeftToRight Mark.4 by heeroo-ymsw (@heeroo-ymsw) on CodePen.
端的に言えば、linear-gradient()で横方向のグラデーションを作成し、それをbackground-positionで左右に動かすというものになります。
■□←こんな感じのグラデーションを作って、横を2倍に引き伸ばして、background-positionは左端に寄せておいて下線を常時表示します。 アニメーション時は、background-positionを右端に寄せて左端へ動かすことで左から右へ下線が動くように見えます。なるほどすごい！
■□
しかしながら、はたまた問題が。
IE11だとkeyframesでアニメーションしない……
transitionだと動くのですが、下線を元々表示したい関係でkeyframesを使っており、これが動きませんでした。 書き方が悪いのか、IE11の仕様なのか…現在調査中です。
テキストの下線アニメーションの実装を行い、現段階では、background-sizeのanimation / transitionでの実装が最適解かと感じました。
background-positionの代替案が出来たと思ったのですが、keyframesによるanimationがうまくいきませんでした。謎。 鋭意調査続行中であります。
①class属性 クラスとは、簡単に言うと学校のクラス学級のようなもので、何年何組みたいなものです。 またこのclass名は1ページで何度でも使うことができます。 こちらは、要素に対しての指定として使われます。 例えば、ヘッダーとしての要素があるとします。その際class="header"と使われます? ②id属性 反対にid属性は１ページで1回のみ使うことができます。 こちらは 固有の名前を付ける場合に使われます? class属性とは違いこちらは、出席番号のようなものです。 同じクラスの同じ人が何人もいるわけにいきませんよね(・・;) またこれらは、cssを適用する場合にも影響があります。 cssでは、class属性よりもid属性が強い関係にあります。 では、cssでの優先度について考えてみましょう。 cssには記述方法が3つほどあります。 ①HTMLタグ こちらはHTMLタグの中に書く方法です。 index.html <p style="color:aqua">マイメロディ</p> 外部に書くのが基本なのであまり使われませんが、このような書き方も可能です。 ②head内に書く こちらは、HTMLのヘッド内に書くことによって、このページではこのタグはすべてこのようにしてくださいと指定することができます。 index.html <style type="text/css"> p {color: pink;} </style> <title>Document</title> </head> <body> <p>お願い</p> <p>マイメロディ</p> </body> と書くことにより、このページでpタグが出てきた場合はすべてピンクになります?♡ ③cssの外部ファイルに書く これは一番ベストなので説明する必要もありませんが、cssno 記述の場合、上から順番に読み込まれていき、一番優先されるのは下にある要素だと学習しましたね。 上記の中で一番優先的に反映されるのは、個別的に当てているHTMLタグの中に当てているcssです。 ☆まとめ☆ １．class属性とid属性でcssの強制力が変わる ２．cssを書く場所により強制力が変わる でした！！
クラスとは、簡単に言うと学校のクラス学級のようなもので、何年何組みたいなものです。 またこのclass名は1ページで何度でも使うことができます。 こちらは、要素に対しての指定として使われます。 例えば、ヘッダーとしての要素があるとします。その際class="header"と使われます?
反対にid属性は１ページで1回のみ使うことができます。 こちらは 固有の名前を付ける場合に使われます? class属性とは違いこちらは、出席番号のようなものです。 同じクラスの同じ人が何人もいるわけにいきませんよね(・・;)
またこれらは、cssを適用する場合にも影響があります。
cssでは、class属性よりもid属性が強い関係にあります。
では、cssでの優先度について考えてみましょう。
cssには記述方法が3つほどあります。
こちらはHTMLタグの中に書く方法です。
<p style="color:aqua">マイメロディ</p>
外部に書くのが基本なのであまり使われませんが、このような書き方も可能です。
こちらは、HTMLのヘッド内に書くことによって、このページではこのタグはすべてこのようにしてくださいと指定することができます。
<style type="text/css"> p {color: pink;} </style> <title>Document</title> </head> <body> <p>お願い</p> <p>マイメロディ</p> </body>
と書くことにより、このページでpタグが出てきた場合はすべてピンクになります?♡
これは一番ベストなので説明する必要もありませんが、cssno 記述の場合、上から順番に読み込まれていき、一番優先されるのは下にある要素だと学習しましたね。
上記の中で一番優先的に反映されるのは、個別的に当てているHTMLタグの中に当てているcssです。
☆まとめ☆ １．class属性とid属性でcssの強制力が変わる ２．cssを書く場所により強制力が変わる
でした！！
CSSには優先度というものがあります。 上から書いたものが、下に向かって反映されていきます。 例えば、このように記入したとしましょう。 index.html <h1>今日は何をしていましたか？？</h1> style.css h1 { color: red; } h1 { color:blue; } この場合、優先的に反映されるのは一番最後に記入されたcssになります。 こうなりますね。 赤色を反映したいとしましょう。 ここで使うのが、『!important』です。 では先程のcssに付け加えていきます。 style.css h1 { color: red !important; } h1 { color:blue; } とすると、赤色が反映されました。 ただし、このタグは本当に優先したいものに付けるようにしましょう！ 使わないのがマストです?
CSSには優先度というものがあります。 上から書いたものが、下に向かって反映されていきます。
例えば、このように記入したとしましょう。
<h1>今日は何をしていましたか？？</h1>
h1 { color: red; } h1 { color:blue; }
この場合、優先的に反映されるのは一番最後に記入されたcssになります。
こうなりますね。 赤色を反映したいとしましょう。 ここで使うのが、『!important』です。 では先程のcssに付け加えていきます。
h1 { color: red !important; } h1 { color:blue; }
とすると、赤色が反映されました。
ただし、このタグは本当に優先したいものに付けるようにしましょう！ 使わないのがマストです?
症状 videoタグで動画を表示する時に、 動画の下に余白が生まれることがあります。 「そんな余白を消したい！！」 という時の対処法です。 対処法 videoタグの親要素にline-height: 100%;を指定 videoタグの親要素にdisplay:flex;、align-items: end;を指定 1の方法は下記の記事から引用させていただきました。 ・動画に謎の余白やマージン！削除する方法（HTML / CSS） こちらの方法で問題なければバンザイです。 2へ進む必要はありません。 ただ、私の場合、 こちらの方法でも多少余白が少なくなったのですが、 少しだけ余白が残ってしまいました。 そこで、2の方法を試してみました。 すると、余白がきれいに無くなりました。 よかった。 備忘録なので簡単にしか説明していませんが、お困りのかたのお力になれれば！ 以上です。
videoタグで動画を表示する時に、 動画の下に余白が生まれることがあります。
「そんな余白を消したい！！」
という時の対処法です。
line-height: 100%;
display:flex;
align-items: end;
1の方法は下記の記事から引用させていただきました。 ・動画に謎の余白やマージン！削除する方法（HTML / CSS） こちらの方法で問題なければバンザイです。 2へ進む必要はありません。
ただ、私の場合、 こちらの方法でも多少余白が少なくなったのですが、 少しだけ余白が残ってしまいました。
そこで、2の方法を試してみました。 すると、余白がきれいに無くなりました。
よかった。
備忘録なので簡単にしか説明していませんが、お困りのかたのお力になれれば！ 以上です。
はじめに 私たちが普段見ている様々なサイトでデザイン性を高めるために「Webフォント」が使用されています。 Webフォントを使用するメリットはたくさんあり、「どのブラウザで見ても同じ表示になる」や「文字を画像で表示しないためSEOの効果を維持できる」などがあげられます。 しかし、メリットの反面デメリットもあります。WEBフォントの読み込みが遅く、最悪の場合「サイトが表示されてから数秒の間文字が表示されない」なんていう事象が発生する可能性があるのです。 特に日本語は漢字・ひらがな・カタカナと英語圏のアルファベットに比べると桁違いに文字が多いため、フォントデータのサイズも大きくなってしまいます。 今回はWebフォントのメリットを享受しつつデメリットを打ち消す方法を紹介します。 ※一般的な方法なので「そんなの当たり前じゃん」と思う方もいると思いますがご了承ください。 確認方法 「目視だとわからない・・・。」という方はGoogleのPageSpeed Insight(ページスピードイン)等のパフォーマンス測定サイトで確認してください。 ※PageSpeed Insightの使用方法は割愛します。 以下のような表示になる場合は「サイトが表示されてから数秒の間文字が表示されない」可能性があります。 対処方法 「Webフォントが読み込まれるまで、とりあえず通常のフォントで文字を表示させておく」という設定をします。 基本的に「font-display: swap;」の指定をするだけで完了です。 では具体的に説明します。 １.一般的なWebフォントの場合 font-face内に「font-display: swap;」の指定をするだけです。 ※下記コードの一番下 @font-face { font-family: 'hogefont'; font-style: normal; font-weight: 400; src: url(https://fonts.hoge.com/hoge/hoge/hoge.woff2) format('woff2'); font-display: swap; } ２.Googleフォントを使っている場合 Googleフォント（Google Fonts）はGoogleが提供しているWebフォントサービスです。 すべて無料で利用可能で、かつ商用利用にも対応しています。日本語フォントも豊富なため、Webフォントを利用する方はまずGoogleフォントを選択肢の一つに入れるのではないでしょうか。Googleフォントでの指定方法も紹介します。 Googleフォントを使っている場合は、埋め込みタグのURLに「&display=swap」を追加してください。 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet"> デフォルトの埋め込みタグは下記図の赤枠のように「&display=swap」が付いた状態ですが、ブログ等で紹介されているタグには付いていないことも考えられるため注意してください。 再度パフォーマンス測定サイトで確認 対応後にパフォーマンス測定サイトで確認し、以下の表示になっていることを確認してください。 先程は赤い三角印だったものが緑の丸になっています。 ※GoogleのPageSpeed Insightで確認しています。 これでWebフォントのメリットを享受しつつデメリットを打ち消すことが出来ました。
私たちが普段見ている様々なサイトでデザイン性を高めるために「Webフォント」が使用されています。 Webフォントを使用するメリットはたくさんあり、「どのブラウザで見ても同じ表示になる」や「文字を画像で表示しないためSEOの効果を維持できる」などがあげられます。 しかし、メリットの反面デメリットもあります。WEBフォントの読み込みが遅く、最悪の場合「サイトが表示されてから数秒の間文字が表示されない」なんていう事象が発生する可能性があるのです。 特に日本語は漢字・ひらがな・カタカナと英語圏のアルファベットに比べると桁違いに文字が多いため、フォントデータのサイズも大きくなってしまいます。 今回はWebフォントのメリットを享受しつつデメリットを打ち消す方法を紹介します。 ※一般的な方法なので「そんなの当たり前じゃん」と思う方もいると思いますがご了承ください。
「目視だとわからない・・・。」という方はGoogleのPageSpeed Insight(ページスピードイン)等のパフォーマンス測定サイトで確認してください。 ※PageSpeed Insightの使用方法は割愛します。
以下のような表示になる場合は「サイトが表示されてから数秒の間文字が表示されない」可能性があります。
「Webフォントが読み込まれるまで、とりあえず通常のフォントで文字を表示させておく」という設定をします。 基本的に「font-display: swap;」の指定をするだけで完了です。 では具体的に説明します。
font-face内に「font-display: swap;」の指定をするだけです。 ※下記コードの一番下
@font-face { font-family: 'hogefont'; font-style: normal; font-weight: 400; src: url(https://fonts.hoge.com/hoge/hoge/hoge.woff2) format('woff2'); font-display: swap; }
Googleフォント（Google Fonts）はGoogleが提供しているWebフォントサービスです。 すべて無料で利用可能で、かつ商用利用にも対応しています。日本語フォントも豊富なため、Webフォントを利用する方はまずGoogleフォントを選択肢の一つに入れるのではないでしょうか。Googleフォントでの指定方法も紹介します。
Googleフォントを使っている場合は、埋め込みタグのURLに「&display=swap」を追加してください。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">
デフォルトの埋め込みタグは下記図の赤枠のように「&display=swap」が付いた状態ですが、ブログ等で紹介されているタグには付いていないことも考えられるため注意してください。
対応後にパフォーマンス測定サイトで確認し、以下の表示になっていることを確認してください。
先程は赤い三角印だったものが緑の丸になっています。 ※GoogleのPageSpeed Insightで確認しています。
これでWebフォントのメリットを享受しつつデメリットを打ち消すことが出来ました。
