CSS入門

今日のアジェンダ

まず復習

HTMLとCSSとは、 HTMLが文字を書くためのプログラム、 CSSがHTMLで書いた文字をデザインするためのプログラム。

HTMLのお約束事

HTMLにはいくつかのお約束があります。 たとえば、日本語を書いたときに文字化けしないようにするためには、 <meta charset="utf-8">ってHTMLファイルに書いてあげなければいけません。 機械は、まだ人間より遥かにあたまが悪くて、今自分が読もうとしている言葉が「日本語」なのか「英語」なのかわからないのです。(最近はプログラムの躍進によりそんなこともないのですが)

そこで、これからはHTMLファイルに必ずお約束でこれを書きましょう。

<html lang="ja">
  <head>
    <title>練習</title>
    <meta charset="utf-8">
  </head>
  <body>
    <img src="assets/images/logo.png">
  </body>
</html>

一個一個説明します。 まずは<html></html>で全体を囲います。 HTMLの大前提、<></>で囲うということもお忘れなく。

<html>タグ

<html>タグの役割は、「このファイルはHTML5というHTMLのバージョン」で書かれていますよ。という意味を与えます。

<head>タグ

<head>タグの役割は、いわゆる「設定」を書く場所です。 設定とは、例えば

  • 文字化けしない設定
  • CSSファイルを読み込ませる設定
  • ページタイトルの設定

まあ難しく考えずにいきましょう。

<body>タグ

みなさんがブラウザを開いてサイトを見るときに、目にするものすべてが記載されている箇所です。

要するに

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>練習</title>
</head>
<body>
</body>
</html>

をHTMLファイルに必ず記載して、 <body></body>の中にすべてを記載するということです。

画像を読み込んでみる

<img src="リンク">

  • まず、imagesフォルダに画像を入れる
  • 次に、index.htmlを開き、<img src="リンク">と入力
  • "リンク"の箇所に、"assets/images/任意のファイル名"を入力する
  • index.htmlをダブルクリックしてブラウザで画像が表示されているか確認

リンクとは

リンクとは、普段みなさんが入力しているhttpなんちゃら〜のやつ。 あれは、厳密に言うと「場所」を表しています。 場所です。 場所とは、「自分からみて、目的のファイルがどこにあるか」です。今回で言うと、HTMLファイルに画像をのっけたいので、「HTMLファイルから見た画像の場所」を<img>タグに書いてあげれば、画像が表示出来ます。

では、場所をどう書くか。

例えば、

f:id:dorak:20160913103147p:plain

この場合。 画像がimagesフォルダに入っている場合。

正解は assets/images/ファイル名です。

index.htmlassetsフォルダは横並びなので、となりにあるassets、そしてそのを表す/スラッシュで区切ってあげて、完成形はassets/images/ファイル名です。

で、ここで重要な言葉を1つ。ここで言うリンクは「パス」とも言い換えられます。

さて、ひとつ下はスラッシュで表現しますが、それでは「一つ上」は? 答えは../です。 ※ ひとつ上のディレクトリを表す時は、..を用いる。例: ../assets/js/app.js

CSSとは

Cascading Style Sheetの略。 HTMLで作られた文章を装飾するためのもの。 HTMLは文章しか書けないプログラミング言語CSSは色をつけたり四角をつくったり、デザインするためのプログラミング言語。超重要です。

CSSはじめの一歩

  1. index.htmlを開く
  2. <p>hello</p><p style="color:red;">hello</p>に変更
  3. index.htmlをブラウザで開く

フォルダとディレクト

フォルダとディレクトリはほぼ同義。PC的にはディレクトリと故障することが多いので、以降ディレクトリと呼称する。

CSSを別ファイルにつくる

上記はじめの一歩だと、CSSがHTMLファイルの中に書かれている。 これだと、複雑なスタイルに対応できない。 具体的にはこうなってしまう。 <p style="background: #e33328;color: #ffffff;margin: 0 auto;width: 80%;display: block;font-weight: bold; padding: 12px 0; text-align:center;background-color: #e8574d;-webkit-transition: background-color .15s ease-in-out;transition: background-color .15s ease-in-out;">hello</p> こんなのメンテナンス出来るわけがないので、通常CSSはHTMLとは別のファイルに記述します。

どうやるか

<head></head>の中に、CSSへのリンクを書いて、読み込ませます。 具体的な方法...

こんな感じでheadタグの中に入れます。

<head>
  <link rel="stylesheet" href="リンク">
</haed>

反映できたら完成。

文字コードとは、パソコンが文字を表示するときの取り決め。英語とか日本語を、わからない人に話しても分からないようなもので、文字コードを間違うと文字化けする。
パスとは、「場所」のこと。道という意味から転じて。例えば、「さっきダウンロードしたあのファイルどこにやったっけ・・・ああそっか、Downloadフォルダだ」という場面を想像する。これは頭のなかで、ファイルの場所=Downloadフォルダだ、という変換をしている。機械も、場所を教えてあげなければ、指定するファイルがどこにあるか分からない。この時、ファイルまでの場所を「パス」と呼ぶ。
いつどんな条件でも変わらないものを「絶対」といい、条件によって変わるものを「相対」という。
ディレクトリとは、いわゆるフォルダのこと。「階層」を意味する。
パソコンの中身は、いわゆる「ディレクトリ(フォルダ)」と「ファイル」の集合で成り立っています。
「ファイル」がパソコンの動作を担当しており、ディレクトリはあくまで「ファイル」を整理するためのものです。
つまり、「ディレクトリ」がなくてもパソコンは動きます。
しかし、「ディレクトリ」がないととても開発がしずらいです。

------------------------------------------------------ たぶん9/20の授業はここまで

練習2

3つ上のディレクトリを相対パスを表す時はどうしますか?どのようなディレクトリ構成だと3つ上の相対パスを使えますか?練習1でつくったディレクトリ構成をもとに考えてください。

アジェンダ

色々なボタンのつくり方

https://coolors.co/
クラス(class)とは:
HTMLのタグにつけて、CSSからスタイリングするときの目印にするためのもの。
例として、以下のHTMLをスタイリングしたいとする。
見出しを大きく、本文を小さく。

<p>見出し</p>
<p>本文</p>

このとき、p { font-size: 24px; } とすると、見出しも本文も24pxになってしまう。
ということは、別々にスタイリングしたいはず。
そんなときに便利なのが「クラス(class)」です。

<p class="headline">見出し</p>
<p class="text">本文</p>

p.headline {
    font-size: 24px;
}
p.text {
    font-size: 14px;
}

このようにしてあげることで、見出しは24px、本文は14pxというかたちに収まる。ぜひブラウザで試してみてください。

宿題1

nanapiの検索ボタンをもう一度つくってみよう。

[やること]

  • 必須: プロジェクトディレクトリからつくろう
  • 必須: マウスカーソルを合わせた時、色が変わるように
  • 必須: 押した時へこむように。それをするにはどうしたらいいか、考えてみてください。
    • ヒント: マウスカーソルを合わせた時はクラス名:hoverでいけました。では、押した時はクラス名:?の?に入る文字をググってみましょう。
  • 必須: 完成したら俺までbutton_sampleをzipで送ること
:hover のようなものを「擬似要素」といいます。
擬似要素とは、条件をつけて要素のスタイルを変更するための仕組みです。
条件とは、マウスが合わさった時、押された時・・・を指します。
なぜ擬似要素が生まれたのか?
それは、クラスが生まれた理由にちょっと似ています。
クラスだけだと、「マウスが乗ったときに色を変えられない」という問題がありました。
このとき、どっかの頭いい人が :hover というものを作りました。こうすることによって、"こういうときにこうする"といった条件をつけることが可能になりました。
正しい読み方を身につけよう。
width「ウィス」
height「ハイト」
href「エイチレフ」

宿題2

画像しか参考がない場合のボタンをつくってみよう

https://jp.pinterest.com/pin/298856125250789152/

[やること]

  • 必須: プロジェクトディレクトリからつくろう
  • 必須: index.htmlの中に複数のボタンをつくろう。
  • 必須: マウスが乗った時の動作を考え、それぞれに実装してみよう
  • 必須: 押された時の動きも実装しよう
  • 必須: 完成したらzipにしてサイトにアップロード
広告を非表示にする