読者です 読者をやめる 読者になる 読者になる

デザインスケッチをしながら、もう一度丁寧にHTMLとCSSの勉強

概要

色々なHTMLを組んでみた今、あらためて基本から学び直す。 2回に分けて行います。

今日の流れ

題材を元にコーディング。 今日の題材はインスタグラム。 ※(宣伝)ビビビクリエイターズとして、ユーザーの作品を公開中ですので、ぜひフォローしてみてください^^ www.instagram.com

完成図

f:id:dorak:20160609095746p:plain

ステップ

  1. instaフォルダを作成
  2. index.html, assetsフォルダを作成
  3. assetsフォルダの中にimagesフォルダ, cssフォルダを作成
  4. imagesフォルダの中に、使う予定の画像を入れる
  5. cssフォルダの中に、ファイルapp.cssをつくる ※app.cssNew Fileからつくります!New Folderでつくるとファイルとして認識されないので要注意です。
  6. 完成図のデザインをグループ分け(どんなHTMLにするかを考える)
  7. HTMLコーディング
  8. CSSでデザイン
  9. 可能であれば、javascriptを使って動きをつける
  10. 完成

HTMLコーディングの大前提

・ HTMLはただの文書!ワードみたいなワープロソフトとかと変わらない!上から文章を書くだけ。

・色を付けたり並べたりといったデザインをするのはCSS

CSSは、すでにある物を変形したりするだけ。なので、HTMLがないとそもそも何も表示されない。

HTMLとCSSの読み込み

HTMLを書いたら、CSSで装飾しないといけない。

そのためには、HTMLからCSSを読み込まないといけない。

どうやるか。

HTMLにCSSファイルまでのリンクを書いてあげる。

具体的にはこう。

<link rel="stylesheet" href="ファイルまでの場所">

この「ファイルまでの場所」って書いてある場所にはリンクを書く。具体的には、HTMLファイルから見たCSSファイルまでの場所。

今回の例だと、

  1. app.cssの場所はcssフォルダの中

  2. つまり、index.htmlからみて、

  3. 隣のassetsフォルダを通り、

  4. assetsフォルダの中のcssフォルダを通り、

  5. app.cssにたどり着く。

  6. これをhref=""に入れる形式にすると、assets/css/app.css となる。

  7. <link ref="stylesheet" href="assets/css/app.css"> という形になれば完成。

HTMLの文法復習

HTMLは、<p></p>という形式で書く。必ず</p>みたいな感じで閉じる

CSSの文法復習

CSSは、どこの・なにを・どうするか という文法

f:id:dorak:20160609103252j:plain

「どこの」の書き方

どこの、とはどのHTMLタグもしくはクラス(もしくはid)を指定するか、のこと。

タグであれば p { } の用に指定し、クラスであれば.keyvisualのように頭にドットを付けてあげて .keyvisual { } のように指定する。

超重要!これからはCSSファイルの冒頭に必ず次のコードを追加してください。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

超重要!これからはHTMLのheadタグの中、app.cssのリンクより上に必ず次の1文を入れてください!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">

これは、ノーマライズと言われるcssで、ブラウザが勝手にデザインしてしまう部分をすべて解除してくれます。 で、超重要なのがapp.cssより上に入れること。つまり、下記の用にしてください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link ref="stylesheet" href="assets/css/app.css">

なんでかというと、ノーマライズcssのデザインを解除するためのcssなので、app.cssより下に書いちゃうと、app.cssノーマライズによってデザイン解除されちゃうからです。

親要素ってなに

Photoshopで言えばグループフォルダのようなものです。 顔というグループがあって、中に顔を形取るレイヤーがあったとして、レイヤーからみた親要素はです。 HTMLも同じで、

<div class="world_hellos">
  <p>hello</p>
  <p>여보세요</p>
  <p>你好</p>
  <p>こんにちは</p>
</div>

こんなHTMLがあったとき、pタグの親要素はdivタグです。 親要素は、1つ上のタグです。 わかりにくいのですが、上の例のように、pが並んでる場合は親も子もありません。一緒です。 pタグたちの親はdivです。

ブロック要素とインライン要素

HTMLのタグには2種類あります。 それがブロック要素とインライン要素。

ブロック要素、インライン要素って言ってもただ幅の話をしているだけです。

Photoshopを思い出して見てください。

キャンバスがあって、そこに絵を書いたりシェイプを入れたりすると思います。

キャンバスいっぱいに四角のシェイプを入れたらどうなるか。

並べようと思っても並ばないですよね。

これと同じで、ブロック要素は、親要素の幅と同じ幅を持ちます。 つまり、次の要素が並ばないんです。キャンバスいっぱいに広がっちゃってるから。

インライン要素は、コンテンツの幅しか持ちません。<span>こんにちは</span>というHTMLがあった時、spanの幅は、「こんにちは」という文章の幅と同じです。 なので、次に来る要素は並んできます。画像もインライン要素なので、幅が1000pxで画像が200pxしかないとき、次に来る要素は並びます。800pxもアキがあるので。

幅が1000pxあったとき、ブロック要素は1000px。つまりいっぱいいっぱいに幅を持ちます。

ブロック要素かインライン要素かは、タグ名で決まります。 aタグやspanタグやimgタグを除くと、ほとんどブロック要素です。pとかdivとか。aタグやspanタグはインライン要素です。

HTMLはほぼほぼブロック要素なので、並べようと思った時はcssで調整が必要です。

ブロック要素を並べる

float: left;を用います。 超重要なのは、並べようと思ってる要素の親要素には、必ずcfクラスを設定してください。こんな感じです。

<div class="cf work_lists">
  <div class="list">
    <img src="リンク">
  </div>
  <div class="list">
    <img src="リンク">
  </div>
</div>