@importはスタイルシートの最上位で他のアットルールやスタイル宣言の前に定義するする必要がある。
他の人が作ったサイトを読み解いています。トップページにスライダーがあったり、切り抜いた画像が中央においてあって、それらがレスポンシブになっているという初心者には理解できない構造になっているので、検証ツールでコードをコピーしました。
なんとか、WordPress化まで来ましたが、JavaScriptの構文があったりするので、その先に進めなくなっていました。
しかし、壁を越えなければ自分のものはならないと、ひとつひとつを読み解くことにしました。WEB上でググりながら、参考になりそうなページを見つけてはブックマークをする、という繰り返しでした。
それでも、1日やっていると集中力が続きません。たくさん調べても理解できているのか、覚えたそばから忘れてんじゃないのか、疑心暗鬼になっています。
ひとつだけでもいいから、残しておこうと思いました。
<head>タグのすぐ下にこんなコードがありました。
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/import.css" />import.css とあるのですが、これは一体何？ということで、MDNで調べると
@importはスタイルシートの最上位で他のアットルールやスタイル宣言の前に定義する必要があり、そうしなければ無視される、とありました。
@importとは、外部のCSSファイルを読み込み利用することを指しています。
1つのファイルに記述するとファイルが大きくなってバグが見つけづらくなるため、ファイルを分割する時に使われます。
それで、読み解き中の「import.css」を開いてみると、中に、
/*
* import.css
*/
/* ==========================================================
Default
========================================================== */
@import url(cmn_layout.css);
@import url(cmn_style.css);
@import url(animate.css);
/* jquery slick css import */
@import url(slick-theme.css);
@import url(slick.css);
@import url(endlessRiver.css);
/* ==========================================================
Web Fonts
========================================================== */という文言が、そして、import.cssの下には「style.css」がリンクされています。つまり、通常のスタイルシートの前に、何かスタイルをあてるために設定されているものなんですね。
下の３つは、jQeryのslackというプラグインということは突き止めました。上の３つは何なのだろう？
明日の宿題ということになります。
