htmlとcssをまとめたかったのですが、分量の都合でDAY3から後編になります。実際にデイトラを学習した人やhtml,cssを動かした経験のある人ならわかるかと思いますが、文字だけでプログラミングの話をするのは難しく、デイトラなどのプログラミング動画学習サービスが流行っているのは、「動画と一緒に動かしてみる」方が初心者には分かりやすいからではないでしょうか。とはいえこのブログを残しておきます、「読み物」としてどうぞ、初心者にしか書けないレビュー記事となっています。
DAY3「CSS」
CSSファイルを準備するところからの説明です。index.htmlがあるフォルダにcssフォルダを作ってその中に「style.css」ファイルを作るとあります。今後の制作ことを想定するとその通りですが、cssフォルダを作らずいきなりstyle.cssファイルを書いても読み込むことはできます。
この辺りが僕も最初理解していなかったポイントで、style.cssやreset.cssや中級で学びますが、animate.cssやstyle.min.css、さらにはstyle.scssという「scss」というファイルまでcssフォルダに含めることになります。
つまりcssファイルをまとめておく「フォルダ」がcssフォルダで、「ファイル」にいろいろと書いて、ファイルを読み込んで反映させていきます。プログラミングを学んだことがないと「ファイルもフォルダも何か紙を挟んでおくもので、一緒でしょ」と大小がわからないんですよね。
imgフォルダの中にcomment.pngやabout.jpgやminus.svgなど「.の後ろのは何が違うの？」ですよね。「拡張子」と呼ばれファイルの種類を識別しています。何でもいいわけではないですよ、画像の色数や形によって適した拡張子があり、詳しくは初級DAY15,16で触れることになります。
ファイルの読み込みは<link rel=”stylesheet” href=”./css/style.css”>という形で、「スタイルシートだよ、同じ階層のcss フォルダのstyle.cssファイル、を読んでね」といった感じです。ここで絶対パス・相対パスは様々な例えがありますね、
絶対パスはファイルの住所のような「ここだ！」のピンポイント
相対パスは今の地点から「まっすぐ行って、右に曲がって…」と道を教えてくれるガイド
僕はこんな感じが覚えやすくイメージしています。「今の地点」とはstyle.cssを読み込むなら、index.htmlのことです。index.htmlでstyle.cssを反映させるには「style.cssの住所を教えるか」「style.cssへの道順を教えるか」
デイトラでは相対パスを勧めていますね、今いる階層なら「./」ひとつの上の階層なら「../」となります、「階層？海藻？」まぁこれもわからないですよね。
index.html
css
style.css
img
test.pngがあってとして、
index.htmlからstyle.cssを探すなら、「同じ階のcssさん家のstyle.css君」です
style.cssで背景画像を指定する際background-imageというプロパティがあります。style.cssからtest.pngを探すなら、「ひとつの上のcssに上がってimgに横移動してimgさん家のtest.png君」です。ちなみに「../img/test.png」こうなります
いよいよ本題、前置きが長いですね、cssの書き方に入ります。
h2 {
font-size: 16;
font-weight: bold;
color: #333:
padding: 25px 0;
}「ま～た呪文かよ」です、h2の所はセレクタ「ここの」font-sizeはプロパティ「これを」16pxはバリュー「こうしてね」、つまり「h2のfont-sizeを16pxに」と読んでください。
上記のようにいくつも指定できますが、「:;」でないと正しく反映されないですよ。「::」「;:」では間違いです、#333の後ろの「:」に気づきましたか？「そのくらいこっちの意図くみ取ってくれよ…わかるだろ…」は通用しませんので注意。
ただ、これだと全てのh2が同じスタイルになるので、DAY2で学んだクラス属性を付けます。
<h2 class=”top-message”>テキスト</h2>
cssでは
.top-message {
color: skyblue;
}このように書きます。クラス名を指定する時は「.」id名を指定するときは「#」などの決まりもあります。
子孫要素という書き方は知っておくと便利系です。(子孫要素っていう名前なんですね、これは馴染みがない…)以下のｐだけにスタイルを付けたい時は
<div class=”top-message”>
<h2>見出し</h2>
<p>テキスト</p>
</div>.top-message p {
color: pink;
}これで「top-messageクラスのpをピンクにしてね」となり、h2にスタイルは付きません。
次も最初は躓くpadding,border,marginです。デイトラの図を見れば分かるかと思いますが、まずborderはイメージしやすいのでは？「囲い」ですね、そのborderに中がpaddingで外がmarginです。ページを作っていく際に「ここはpaddingでもmarginでも見た目が一緒ならいいでしょ」という場面がありますが、当然そういうケースだけではなく、違いを理解していないと作れないデザインも多々ありますので、覚えましょう。
ここから動画でのレッスンが４０分ほどありますが、まずは右クリック「検証」から「デベロッパーツール」を開いて使い方の説明があります、これは大事！このデベロッパーツールは今後必ず使いますので、動画を見返して使い方をマスターしてください。
実際にcssでHello Worldを変化させていきます。多くのプロパティが出てきて「呪文が多いよ、覚えられないよ…」かと思いますが、全てをこの段階で暗記なんてしなくても大丈夫です。ただ僕も「一気に進めすぎじゃね？」とは思いました。いきなりfloatとclearはさすがにキツい、flexの方がよく使うので、floatは「ふ～ん」でいいかも。
positionもcss初日にはキツいな…fixed,relative,absoluteを使い「これに対してこう」と指定していきます。初めはrelativeが親、absoluteが子と覚えておくといいのでは。
DAY3もおまけの東京フリーランスのページリンクがありますが、内容はレッスンとほぼ同じです。
デイトラではありませんが、僕からもおまけをひとつ。Youtubeの「しまぶーのIT大学」さんの「CSS講座」というシリーズがあります、めっちゃ良質です、もちろん無料です。特にflexは参考になると思います。
DAY4「環境構築」
今回は面倒くさいと噂の環境構築です。名前は出しませんが以前他のプログラミングオンライン学習サービスを利用していましたが、「Rubyのローカル環境」という項目で面倒くさいというか説明通りに何度やってもできませんでした。質問もできるサービスでしたが、何日掛かってもダメという苦い経験があります…
ただご安心を、デイトラに関してはサッと片付きます。それに環境構築といっても今回大したことはやりません。VScodeのおすすめプラグインが紹介されていて、「install」のボタンを押すだけでひとつずつ片付きます。
プラグインというのは「あったらいいな」機能で、とえあえずここで紹介されている９つ+aをインストールしておきましょう。スペルミスを「ここおかしくない？」と知らせてくれたり、ペアになる{}()に色を付けて見やすくしてくれたりといいことだらけです。
VScodeの設定を自動保存に変えておくと「ん？書き換えた？わかった、保存しとくよ」と保存し忘れもなくなります。「コマンド(Ctrl) + ,」のショートカットも紹介されていますが、「設定」はデイトラには書いてないですが、「ファイル」→「ユーザー設定」→「設定」と僕のはなっています。バージョン違いみたいなものでしょうか？
ただ「元はどういうコードだったっけ？」も当然起こり得るので注意。「コマンド(Ctrl) + z」で「ひとつ前に戻る」ができるので、ゆっくりと元の状態に近づけるか、大幅に直す場合にはその部分をコピーしておいて「直す用」と「元の状態用」を作りましょう。
Live Serverを特におすすめしているみたいです。コードの変更がページの更新をしなくても反映され「作業が捗る」と評判ですが、僕はそこまで気に入っていませんし、あまり使いません。理由は「変更が見えないから」です。
Live Serverを否定はしませんが、エディタでコードを書きブラウザ画面に戻り、「この部分が(更新ポチッ)こう！」を見たいんですね。文章で伝えにくいですね…書いたコードの反映を見て「達成感！」ということではないですよ、「そう、ここがこうなる」と「確認」をしたい。伝わったでしょうか？
常に仮想サーバーを立てているとPCに負担となるそうです、こまめに停止すること。そういう負荷や表示スピードの低下などは自分では気付きにくいですね。
Chromeの検証機能はもう学びましたね、検証画面を開きながら作業することもしばしば、僕も「ここはどうしよう…」となったら検証画面でスタイルを当ててみて「よし、これで」を確かめてからエディタに同じのを書く、という手順を使います。
Emmetという入力補完・予測変換がVScodeには標準でついています。いつも助かってます、ホントに。以前の動画でも「！」押して「TAB」とかありましたよね、cssでは「w」と押したら「width?」と聞いてきてくれたり「p」だと「padding?」とこんな感じです。作業スピードも上がりますが、手打ちによるスペルミスも減って「あれ、動かない…どこがおかしい？え～と」もなくなります。
DAY4では１～４のまとめ記事がおまけでありますね、これもサラッと読んでおきましょう。このブログよりキレイにスッキリまとまっています。先の話ですが、今回名前が出てきた「はにわまん」さんと「サルワカ」さんのサイトには今後何度も助けられることになります。
ではまた
コメント