公開記事

フリーランスになりたい。 サービスを作りたい。
すべての道を一緒に考え、 支援するスキルアップ × ライフアップスクール

  • WEBデザイナー
  • UI
  • UXデザイナー
  • 事業デザイナー
  • WEBディレクター
  • 起業家
  • エンジニア
  • WEBマーケター
  • 新規事業コンサルタント
  • WEBコンサルタント
  • WEBデザイナー
  • UI
  • UXデザイナー
  • 事業デザイナー
  • WEBディレクター
  • 起業家
  • エンジニア
  • WEBマーケター
  • 新規事業コンサルタント
  • WEBコンサルタント

DAY.5「CSSの基本を学ぼう」

前回はHTMLのタグをいくつかご紹介しました。
今回はCSSの書き方について、学んでいきます。

HTMLだけで書いていた時は、デザインは表現できず、その構造を指定することしかできませんでした。

CSSを使うことで、WEBサイトは初めて、色やレイアウトと言ったデザインを表現することが可能になります。では、はじめていきましょう。

目次

  1. CSSを格納するフォルダをつくろう
  2. CSSファイルをつくろう
  3. HTMLファイルにCSSファイルを読み込む
  4. CSSを書いてみよう
  5. CSSの「プロパティや値」はたくさんある
  6. 補足 : カラーコード
  7. CSSをHTMLに反映させてみよう
  8. 表示を確認してみよう
  9. 運営サービス

CSSを格納するフォルダをつくろう

今回は、1つ1つ実践しながら、読み進めていってください。
慎重に書かれた通りに実践しながら進めましょう。

基本的にCSSは、HTMLとは異なる「別のファイル」に書いていきます。

HTMLファイルは「index.html」というように、拡張子が「.html」でしたが、CSSの場合、拡張子が「.css」のファイルを作り、その中に書いていきます。

拡張子 :
ファイルの形式。通常、ファイル名の後ろに「.jpg」「.html」「.css」のように書かれている。パソコンの設定により、表示されていないこともあるので、もし表示されなければ、それぞれ表示のさせかたを調べてみてください。

ただ、CSSファイルとHTMLファイルを同じフォルダ内に作ると、HTMLやCSSファイルが混在して、ごちゃごちゃしてしまいます。

なので、CSSファイルを入れておくフォルダを先に作りましょう。
下記のようなフォルダの構造になります。

フォルダの作り方は、macとwindwsで異なりますが、何もない場所で左クリック ( macであればcontrol+右クリックでも可 ) をすると「新規フォルダ」などの、フォルダを作るメニューがあるはずです。

CSS用のフォルダを作ったら、次にCSSファイルを作ります。

CSSファイルをつくろう

次に、CSSファイルを作っていきましょう。
Visual Studio Codeを開き「 File > New File 」で新しい画面を開きます。

そして、開いた画面で、macならキーボードの「Command + S」、windowsなら「Ctrl + S」を押し、保存画面を表示します。

次に、先程つくったCSSフォルダを選択し、名前を「common.css」などに変えて、保存しましょう。
フォーマットの指定がある場合は、cssを選択してください。

保存したら、しっかりと、確実に、CSSフォルダの中にcssファイルが保存されていることを確認してください。

ここまで確認できたら「HTMLファイル」を開きます。

HTMLファイルにCSSファイルを読み込む

CSSファイルは、HTMLに読み込んで、はじめて使えるようになります。
CSSファイルを読み込む下記の記述を、head内に書きましょう。

<link href="css/common.css" rel="stylesheet" type="text/css">

ここで1つポイントなのが、画像の読み込みで使った「パス」が、ここでも使われているということです。

今回のパスは「css/common.css」と指定してあります。

つまり「index.htmlから見て、同じ階層にあるCSSフォルダに入り、その中にあるcommon.cssを呼び出す」という記述になっています。

CSSを書いてみよう

では、いよいよCSSを書いていきます。
「CSSファイル」を開き、下記の内容をコピーして貼り付けましょう。
こちらは「文字を赤にするよ」という指示です。

.color-red{
   color:#d60000;
}

CSSには「クラス」という名前をつける必要があります。
それが「color-red」の部分です。
color-redという名前は、自由に変えることができます。

color-redの前についている「 . 」は固定で、必ずつけてください。
「これはCSSの名前だよ」という指示を意味します。
外すと、CSSとして認識されず、エラーになります。

そして {  } の中の「color:#d60000;」「文字の色を赤くするよ」という指示です。

「color」が「文字色を変えてください」という指示を意味しており「プロパティ」と呼ばれています。

そして「#d60000」が「色の種類 ( 今回は赤 ) 」を表しており「値」と呼ばれています。

CSSの「プロパティや値」はたくさんある

なお、今回はプロパティとしてcolor ( 文字色を変えてください ) を設定しましたが、プロパティの内容はたくさんあります。

例えば一部だけ紹介すると、下記のような指示があります。

font-size:3em; – フォントの大きさを変える
font-weight:bold; – フォントの太さを変える
padding:30px; – 周囲に30pxの隙間をあける
line-height:1.5em; – 文字の行間を調整する
display:flex; – 2つ以上の要素を横並びにする

これはほんの一部で、指示自体は膨大な数があります。
また、指示に応じて、数字や単語など、詳細な「値」もたくさんあります。
最初はすべて覚えようとせず、調べながら書いていくと良いでしょう。
調べて使っているうちに、自然と覚えてきます。

補足 : カラーコード

先程「#d60000」のような英数字が出てきましたが、これはカラーコードと呼ばれており「色」を意味してまいます。
「すべての色」がカラーコードを持っています。

例えば「#0010dd」は青を意味します。

カラーコードの調べ方ですが、PhotoshopやXD、Figmaなどの画像加工ツールで色の調べられますし、カラーコードを調べられるサイトが検索すれば見つけられますので、探してみてください。

CSSをHTMLに反映させてみよう

では、HTMLにCSSを反映させていきます。

まず、index.htmlファイルを開いてください。
そして次のソースコードを書きましょう。

<p>テキストテキストテキスト</p>

そして「保存」し、ブラウザで一度、確認してみてください。

当然ですが「黒い文字」が表示されていますね。

次に、cssを書き込みます。
先程書いたソースコードに下記のように書き足してください。

<p class="color-red">テキストテキストテキスト</p>

「class=” “」をタグに加えることで、そのタグに対し、CSSで設定した装飾を反映させることができます。

今回の場合「class=”color-red”」とすることで、先程CSSで設定した装飾と紐付けられ、反映されるわけです。

「color-red」は、先程CSSファイルで書いた名前ですね。

つまり、予定どおりなら「color-red」で指定したプロパティと値 ( 文字色を赤くする )が、今回指定した「pタグ」に対して反映されるはずです。

表示を確認してみよう

では、さっそくブラウザで確認しましょう。
すると下記のようになっているはずです。

赤い文字が表示されたのがおわかりでしょうか。
もし、赤くならなければ、下記のエラーを確認してみてください。

・誤字脱字
・head内のCSSを読み込むパスが間違っている
・CSSに余分なスペースなどが入っている

ここで反映されないのなら、間違いなく「凡ミス」です。
よく、目を凝らして確認してみてください。

ひとまず、今回はここまでとします。

CSSについての理解が、少し深まったのではないでしょうか。
次回は、CSSの書き方について、さらに深堀りしていきます。

フリーランスになりたい。WEBなど使ってサービスを作りたい。
すべての道を一緒に考え、支援するスキルアップ × ライフアップスクール

専属メンターが、あなたのキャリアから学習内容まで一緒に相談し考えます。

すでに自己実現の成功を収めた、経験豊富な専属メンターが、あなたのキャリアや学習について相談にのります。そして最短で成長し、理想を達成するためのアドバイスを提供してくれるでしょう。彼らはあなたの人生とスキルにおいて、最高の相談役となり、魅力的な未来を歩む手助けしてくれます。

詳しく見てみる!

スキルアップ×ライフアップ公開講座

OPEN COURSE

10年後「新時代でも生き残る」WEBクリエイターへの最新ロードマップはこれだ!

10年後「新時代でも生き残る」WEBクリエイターへの最新ロードマップはこれだ!

こんにちは。uptick運営チームのたきです。 これからWEBクリエイターになりたい方や、学んでいるけど、これからどう進めば良いか迷われている方が、たくさんいらっしゃると、お伺いしました。そこで、これまでの経験と今の時代 […]

今後のWEBクリエイターに必須の視点。STEAM教育とは何か。

今後のWEBクリエイターに必須の視点。STEAM教育とは何か。

こんにちは、皆さん。uptick運営チームの上山です。 今日は、STEAM教育について学びましょう。STEAM教育って聞いたことありますか? Sは科学(Science)、Tは技術(Technology)、Eは工学(Eng […]

徹底解説! 最速で「フリーランスになれる」スクールとは何か。

徹底解説! 最速で「フリーランスになれる」スクールとは何か。

はじめまして。uptick運営チームの南と申します。 みなさんの中には「どうすれば最も早くスキルアップできるのか」「どうすればフリーランスに最速でなれるのか」お悩みの方もいらっしゃるのではないでしょうか。 そんな中で、ス […]

uptickが次世代のWEBクリエイター育成スクールである理由

uptickが次世代のWEBクリエイター育成スクールである理由

こんにちは。uptick運営チームの、たまです。 僕たちは、uptickを立ち上げるまでに、9年、クリエイターや起業家人材の育成について、数々のプロジェクトを実践しながら研究してきました。だからこそ、uptickのシステ […]

uptickってどんな人がやってるの?これまで辿った道のりも解説!

uptickってどんな人がやってるの?これまで辿った道のりも解説!

はじめまして! uptick運営チームの岩瀬と申します。 正直、私たちは特にインフルエンサーとして名をあげているわけでもなく、知名度もまだまだ無いので一見「この人たちは誰?」「uptickって、どんな人がやっているの?」 […]

どのプランを選べばいい? プラン参考ケーススタディ集!

どのプランを選べばいい? プラン参考ケーススタディ集!

uptickをご検討頂いている皆様、興味を持っていただき、本当にありがとうございます! uptickは、すべての生徒に専属メンターがつき、すべてのカリキュラムを個人のゴールから逆算した「オーダーメイド」で構築します。ゴー […]

もっと講座を見る

お気軽に無料相談にお越しください!
もちろん、キャリアや学習ロードマップについての相談もさせて頂きます!