1-2. コーダーのスキルを身につけよう(CSS編)

こんにちは!Webエンジニアのたけです!

前回は、HTMLの編集について更新しました。今回は、CSSの編集方法をお伝えします!実際に、前回編集したHTMLに装飾をしていきたいと思います!

前回編集したファイルはこちら!

犬

犬の画像を表示させましたね!

では、実際に編集していきたいと思います!

CSSの編集方法

CSSファイルの作成と読み込み

まず始めに、cssディレクトリ(フォルダ)を作成し、その中にmaster.cssファイルを作成します。そして、<head>タグの中に<link>タグを書きましょう!linkタグの属性についてはこちらの記事を参考にするとわかりやすいと思います!ここでの注意点は、href属性の指定です。こちらは前回学んだ<img/>タグのsrc属性と同じで、ファイルパスを指定します!ファイルパスの指定の仕方は覚えていますか?

実際指定するとこのようになります!

css導入

CSSの書き方

では、実際に装飾してみましょう!master.cssのファイルに以下のように書き込んでみてください!

css書き方

ここでは、HTMLのh1要素の文字の色を赤に指定しています!

CSSではセレクタとプロパティという概念を用いて装飾します。ここでは、セレクタはh1、プロパティはcolor: red;の部分です。(詳しくはこちらに書かれています。)

h1カラー

h1要素のHello World!の文字が赤になりましたね!

では流行りのカードスタイルにしてみたいと思います!

カードスタイルの作り方、クラスとは?

index.htmlとmaste.cssのファイルを以下のように編集してみてください!

index.htmlの編集

master.cssの編集

index.htmlでは<div>タグを使いグループ化しました。classにはそのグループの名前をつけます。そして、master.cssのセレクタで頭に「.」をつけることでクラス単位での指定が可能になります。それぞれの、プロパティについては後半に紹介するおすすめ教材か、ネットで調べてみてください!そうすると以下の様になります!

カード

ちゃんとカードっぽくなりましたね!

ブロック要素を縦または横並べにするFlexBox

ここで違うカードを2つ追加し、カード3つを横並べにしたいと思います!画像を2枚追加し、同じカードクラスを二つ作り、さらにそのカードの親要素としてcard-containerというグループを作ります。

index.htmlとmaster.cssを下記の様に編集してみてください!

index.htmlラストmaster.cssラスト

ここで重要な点は、card-containerクラスのdisplay: flex;プロパティです!ここではcard-container内のブロック要素をフレックスボックスとして扱うことを指定しています。フレックスボックスって何やねんって感じですよねw

フレックスボックスはボックスを行か列でレイアウトをするということです。つまり縦並びか横並びにするという意味です。プロパティを指定しないと横並びになります。flex-directionプロパティで、縦か横かを指定できます!(その他プロパティはこちらによくまとめられています)

その他は微調整のために追加したので、気になった方は各プロパティを調べてみてください!そうすると以下の様になります!カードリスト

ちゃんとカードリストを横並べにできましたね!

HTMLとCSSに関してはここまでにしようと思います。(あまり詳しく触れられなくて申し訳ありません)

今回お伝えした内容をザックリまとめると・・

  • CSSファイルの読み込み方
  • カードレイアウトの作り方
  • クラスの説明
  • FlexBoxの作り方

です!

HTML/CSSオススメ学習法

HTMLとCSSに関しては参考書を一冊目を通していただければ問題ないと思います!そして、自分のポートフォリオサイトを作ることを目標に学習するといいと思います!オススメの参考書は以下になります!

オススメ書籍:1冊ですべて身につくHTML-&-CSSとWebデザイン入門講座


いかがでしたか?次回はいよいよJavaScriptの学習法について更新します!TODOアプリを作ることを目標に頑張りましょう!

それではまたお楽しみに〜👋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です