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

HTMLとCSSをもっと深く知る

概要

これまではHTML/CSSの入門編。ここからは「これ知ってたらとりあえず現場出れる」の知識。

最初に用意するもの

  • いつも通り「161108」という名前でフォルダをつくる
  • 中身はいつもどおりこんな感じ
    • 161108(フォルダ)
      • index.html(ファイル)
      • assets(フォルダ)
        • css(フォルダ)
          • app.css(ファイル)
        • images(フォルダ)
          • 前回使った画像1枚入れる

※assetsの中にindex.htmlを入れないように注意!

今回やりたいレイアウト

f:id:dorak:20161108095633p:plain

要点:

  • 画像を横並びにしたい
  • 画像と、画像のタイトルが1グループ

これを実現するには、今までの知識ではできない。 ので、新しいことを覚えます。

まず、簡単に実現方法。 下記をまるっとコピペしちゃってください。画像のところは適宜自分のファイル名に置き換え!

  1. HTMLを編集
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>プロフィールページ</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

  <div class="work-list cf">

    <div class="work">
      <div class="work-image">
        <img src="assets/images/1.jpg">
      </div>
      <p class="work-text">ねこのイラスト</p>
    </div>

    <div class="work">
      <div class="work-image">
        <img src="assets/images/2.jpg">
      </div>
      <p class="work-text">人のイラスト</p>
    </div>

    <div class="work">
      <div class="work-image">
        <img src="assets/images/3.jpg">
      </div>
      <p class="work-text">死神のイラスト</p>
    </div>

  </div>

</body>
</html>
  1. CSSを編集
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #ddd;
}

.work-list {
  margin: 160px auto;
  width: 600px;
}

.work {
  padding: 0 16px;
  float: left;
  width: 33.333333%;
}

.work-image {
  width: 100%;
}

.work-image img {
  width: 100%;
}

.work-text {
  text-align: center;
}

ただimgタグを並べただけではこうなりません。 何故並ばないか。 それはHTMLの成り立ちがふかーく影響しています。

HTMLのタグを覚える

HTMLのタグとは、

div
p
meta
img
span

みたいなやつで、<p>こんにちは</p>みたいなやつでした。 実はこのHTMLタグって種類があります。

それが「ブロック要素」と「インライン要素」。

タグには「種類」がある

なぜタグに種類があるかというと、そもそもHTMLがどうしてできたのか、に遡ります。

要点は

  • HTMLは、もともと研究論文などを共有したいという要求から産まれた
  • なので、論文を書くためのプログラム言語
  • 論文の成り立ちを考えれば、HTMLタグの種類が分かる

そもそも研究者がデザインされていない文章(科学論文とか)を共有するためです。なので、ワードみたいに文章が作れれば十分でした。 そういったことから、HTMLをつくったエンジニアは、タグをブロック要素とインライン要素で分けました。 ブロック要素は、いわゆる文章の段落です。文書のかたまりです。 インライン要素は、文章の中の単語や文章を装飾するためのもの(赤字にしたり、太字にしたり、斜体にしたり)です。

f:id:dorak:20161108101141j:plain

ワードとかで文章を作った人はよく思い出してみてください。 段落同士が並ぶことはあまりなかったと思います。

ということで、ブロック要素は段落なので、ブラウザの横幅いっぱいに広がります。 HTML的には、幅いっぱいに広がるので、前後の要素がそのブロック要素と並ぶことはありません。 Photoshopで言うなら、キャンバス幅いっぱい四角をつくってるようなものです。

インライン要素は、コンテンツ分の幅しかありません。 <span>はろー</span>というタグがあった時、はろー分しか幅が与えられないです。何故かと言うと、段落の中の文章や単語を装飾するための要素だからです。 繰り返しになりますが、ブロック要素は、たとえ<div>はろー</div>という文章が極端に短いものでも、div自体が段落なのでブラウザの幅とイコールの幅を持ちます。

つまりブロック要素 = 段落

ブロック要素は、div, pなど。

つまりインライン要素 = 文の一部(単語とか)

インライン要素は、a, img, spanなど。

手を動かして確認してみよう

話を戻して、なぜimgタグを並べただけでは並ばないのかを見ていきます。

まずは、これまでの知識でやってみる

  1. index.htmlを開く
  2. index.htmlのbodyタグの中身を全部消す
  3. app.cssを開いて、中身を全部消す
  4. bodyタグの中身に以下を入力する
<div class="work-list">
  <img src="assets/images/1.jpg">
  <img src="assets/images/2.jpg">
</div>

f:id:dorak:20161108111127p:plain

これは、ただ画像を入れただけ。ちゃんと並んでるけど、今回は、画像に加えて画像のタイトルを入れたいので、これだと不十分。なので、上のHTMLに対して画像のタイトルを入れる。

<div class="work-list">
  <img src="assets/images/1.jpg">
  <p>ねこのイラスト</p>
  <img src="assets/images/2.jpg">
  <p>人のイラスト</p>
</div>

f:id:dorak:20161108111217p:plain

はい。さっきまでさっきまで並んでいたのに、並ばなくなってしまった。 何故かと言うと、この画像を思い出して欲しいです。 f:id:dorak:20161108101141j:plain

imgだけだったらインライン要素なので並んでいたけど、pタグはブロック要素なので、幅いっぱいに広がってしまう特徴を持っています。例えるなら段落だから。なので、

これだと、うまく並ばない。 なぜなら、画像とタイトルがグループになっていないから。 なので、グループをつくる

<div class="work-list">

  <div class="work">
    <img src="assets/images/1.jpg">
    <p>ねこのイラスト</p>
  </div>
  
  <div class="work">
    <img src="assets/images/2.jpg">
    <p>人のイラスト</p>
  </div>

</div>

はい。 どうでしょう。 見た目が変わりません。

f:id:dorak:20161108111217p:plain

何故か。 並ばせたいのは,.workクラスがついている要素。 けど、workクラスがついた要素は、divなのでブロック要素。 つまり、段落なので、幅いっぱいに広がるのです。

ということは、段落状態を解除して並ばせる必要があります。

それはCSSで指定します。その名もfloat: left;

さっそくやってみましょう。

app.cssを開いてください。まずは以下をコピペ。

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f4f4f4;
}

次に、並ばせたい要素に対してfloat: left;を指定してあげましょう。 書く場所はファイルの一番下。

.work {
  float: left;
}

はい、どうでしょう。 並びましたか。 以下のようになってるはずです。

f:id:dorak:20161108111804p:plain

さてここまできたらあとは簡単です。

もともとやりたかったのがこれ↓なので、

f:id:dorak:20161108095633p:plain

さくっとやってみましょう。

まずは、画像と画像の間に余白をとりましょう。 さっき.workクラスの指定を書いたので、付け加えるだけでOKです。

.work {
  float: left;
  padding: 0 16px;
}

f:id:dorak:20161108112212p:plain

はい余白があきました。

次。 画像たちを中央に揃えてあげましょう。 中央に揃えるのは、work-listクラスに対してtext-align: center;...と言いたいとこですが、text-align: centerはインライン要素に対してのみ有効な指定です。work-listはdivなのでブロック要素なので効きません。なぜなら、ブロック要素は画面いっぱいに広がるので、すでに中央になってるようなもんです。

f:id:dorak:20161108112958j:plainf:id:dorak:20161108113004j:plain

じゃあどうやって揃えてやるかというと、画面幅よりも小さいサイズにしてあげて、左右に均等に余白をつくればいいんです。

f:id:dorak:20161108113004j:plain

どう書くか。

.work-list {
  width: 60%;
  margin: 0 auto;
}

これでOKです。

f:id:dorak:20161108122413p:plain

どうでしょう。微妙に真ん中に寄ってません。 これはなんでかというと...

f:id:dorak:20161108124006p:plain

これを見てください。 オレンジ色の部分が余白、青い部分がコンテンツの幅です。今は、.work-listの幅が全体に対して60%に設定されてるのでこんな感じの幅になってます。青い部分を見てもらって分かるように、.work-list自体はもう中央に寄ってます。

なんで中央に寄ってない(ように見える)のかと言うと、 中の画像の大きさが、足しても.work-list分の幅に足りないからです。

ということで、足して100%にしてあげましょう。

中の画像の大きさは.workなので、CSSは以下。

.work {
  float: left;
  padding: 0 16px;
  width: 50%;
}

はい。width: 50%;を足しました。これなんで50%かわかりますか? 今は画像のグループが2つなので50%です。足して100%。すると、.work-listの大きさと同じになります。 画像が4つだった場合はwidthをいくつにすればいいでしょうかね? はい、てことでどうでしょうか。見事真ん中になりました。 いやー真ん中にするって大変ですね。Photoshopなどもこんなことを内部でやってるんですよ。

f:id:dorak:20161108125104p:plain

はい。てことで、 今回は色々HTMLを深く学びました。 今度は、何も見ずにこれを実装してみてください。

f:id:dorak:20161108095633p:plain

回答

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>プロフィールページ</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

  <div class="work-list cf">

    <div class="work">
      <div class="work-image">
        <img src="assets/images/1.jpg">
      </div>
      <p class="work-text">ねこのイラスト</p>
    </div>

    <div class="work">
      <div class="work-image">
        <img src="assets/images/2.jpg">
      </div>
      <p class="work-text">人のイラスト</p>
    </div>

    <div class="work">
      <div class="work-image">
        <img src="assets/images/3.jpg">
      </div>
      <p class="work-text">死神のイラスト</p>
    </div>
  </div>

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f4f4f4;
}

.work-list {
  margin: 160px auto;
  width: 600px;
}

.work {
  padding: 0 16px;
  float: left;
  width: 33.333333%;
}

.work-image {
  width: 100%;
}

.work-image img {
  border: 16px solid #fff;
  width: 100%;
}

.work-text {
  text-align: center;
}

もっとおしゃれなギャラリーサイトをつくる

概要

HTML, CSSを用いておしゃれなギャラリーサイトをつくります。 HTMLデバッグの方法も学びます。

要件

  • 世界観が伝わりやすいように、イラストで画面が埋まるように
  • キャッチコピーをつける
  • イラストを数点タイルさせる

完成図イメージ

f:id:dorak:20160518152540p:plain

ステップ

  1. プロジェクトフォルダ「profile2」を作成する
  2. profile2内にindex.htmlを作成する ここまでは前回とほぼ一緒、前回のテキスト参照
  3. index.htmlを編集
  4. app.cssを編集
  5. ブラウザで確認
  6. 完成!

使用画像準備

背景で使うキービジュアルイラスト1点、その他最低4点のイラストを用意。 注意!4点イラストはすべて正方形にリサイズもしくはトリミングしてください。正方形になっていないと綺麗に並びません。

参考画像を見て、どのようなHTMLにしたらいいかを考える

  • 必要な要素は、キービジュアルギャラリークレジット(フッター)
  • 従って、それ分のdivを用意する。

まずはこんな感じのHTMLを用意して、

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>プロフィールページ</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
</body>
</html>

次にbodyの中を埋めていく

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>プロフィールページ</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

<div class="keyvisual">

</div>

<div class="gallery">

</div>

<div class="credit">

</div>

</body>
</html>

こんな感じで、キービジュアル、ギャラリー、クレジットに分けたdivをつくりましょう。 それぞれに必要なHTMLを当てていきます。 まずはそれぞれに必要な表示を考えましょう。

キービジュアル

  • 背景画像
  • キャッチコピー
  • サブキャッチ

これを実現するには、

<div class="keyvisual">
  <p class="catchcopy">キャッチコピー入れる</p>
  <p class="subtext">サブキャッチ入れる</p>
</div>

でok。

ギャラリー部分

次にギャラリー部分。

<div class="gallery">

  <img class="gallery-image" src="画像までのパス">

</div>

これで.gallery-imageを表示したい回数分コピペすればok。

credit部分

<div class="credit">
  <p class="credit-text">© 自分の名前 CONTACT: 自分のメールアドレス</p>
</div>

これでOK。 ここまでで表示をチェックしましょう。 下記のようになっていればOK。 CSSが当たっていない=装飾がされていない状態です。

f:id:dorak:20160518170116p:plain

CSSで装飾する

まずはどうしたらサンプル画像のようなデザインになるかを考える

  1. 背景に画像を表示したい
  2. その背景画像の上の文字サイズを大きく変更したい
  3. その文字の色は白にしたい
  4. メインキャッチとその下のサブテキストの文字サイズは別々にしたい
  5. 画像を等間隔に、画面いっぱいにタイルさせたい
  6. フッターの著作者表記部分は背景黒っぽく、文字は白で

ざっとこんな感じだと思います。 それぞれ、どのようなCSSにすれば目的のデザインを実現できるかを考えます。

1. 背景に画像を表示したい
表示させたい場所のクラス {
  background-image: url(画像までのリンク);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 420px;

}
2. その背景画像の上の文字サイズを変更したい
文字サイズを変えたい場所のクラス {
  font-size: 変更したい文字サイズをピクセルで;
}
3. 文字色は白にしたい
クラス {
  color: #fff;
}
4. メインキャッチとその下のサブテキストの文字サイズは別々にしたい

それぞれに別のクラスが付いているのであれば問題ありません。クラス毎にfont-sizeを指定しましょう。

5. 画像を等間隔に、画面いっぱいにタイルさせたい

画像のサイズが一緒であれば、等間隔に並びます。それでは、画面いっぱいに並ぶには・・・ 横幅をピクセルで指定したのでは画面いっぱいになりません。それではどうすればいいのかというと、%で表します。 横に4つ画像を並べたいのであれば、100/4の数字を%で指定してみてください。 また、一つ一つ画像に幅を設定していくのは手間です。 同じクラスを適用したい場合は、同じクラス名を付けましょう。画像であれば、上のHTMLでつくったように、.gallery-imageというクラスをすべての画像つけるといいのではないかと思います。

.gallery-image {
  width: 25%;
}
5. フッターの著作者表記部分は背景黒っぽく、文字は白で
  • 背景の色を変更するには?

background-color: #ddd;の用に指定。

  • 文字色は上と同じ。

これで完成です!!!!!!!!!!!!

最終的なCSSはこんな感じ

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

body {
  color: #ebe6e7;
  text-align: center;
  font-family: "HelveticaNeue-Thin", yugothic;
}

.keyvisual {
  background: url(../images/6.jpg) center center no-repeat;
  background-size: cover;
  height: 420px;
  font-weight: bold;
}

.catchcopy {
  font-size: 72px;
  padding-top: 120px;
}

.subtext {
  font-size: 20px;
  font-weight: normal;
}

.gallery {
  text-align: left;
  margin: 0 auto;
}

.gallery-image {
  width: 25%;
  height: auto;
  float: left;
}

.gallery-image img {
  width: 100%;
}

.credit-text {
  background: #252422;
  font-size: 12px;
  padding: 8px 0;
}

その2 ちょっとジャンルで分けたページをつくってみる

完成図

f:id:dorak:20160519114545p:plain

どうやって3列のレイアウトをつくるか?

大前提

2列や3列など複数列のレイアウトをつくるとき(マルチカラムレイアウトという)は、必ずcssに下記の表記を入れましょう。理論的に詳しく学びたい人は、float clearfixなどで出てきます。

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

こんなbodyの中身はこんなHTMLにしてみましょう

  <div class="headline">
    <p>My Works</p>
  </div>

  <div class="works cf">

    <div class="illust illust_1">
      <p>もふもふ系イラスト</p>
      <img src="assets/images/7.jpg">
      <img src="assets/images/8.jpg">
      <img src="assets/images/9.jpg">
    </div>

    <div class="illust illust_2">
      <p>こわい系イラスト</p>
      <img src="assets/images/4.jpg">
      <img src="assets/images/5.jpg">
      <img src="assets/images/6_2.jpg">

    </div>

    <div class="illust illust_3">
      <p>かわいい系イラスト</p>
      <img src="assets/images/1.jpg">
      <img src="assets/images/2.jpg">
      <img src="assets/images/3.jpg">

    </div>

  </div>

画像は何もしなくても横並びになってたけど・・・

HTMLは、インライン要素とブロック要素と言われるもので構成されています。 HTMLは、すべての要素が要素がインライン要素かブロック要素です。 ここではサッと読んでくれれば大丈夫ですが、 ブロック要素は画面いっぱいの幅を持ちます(コンテンツ量に関わらず), インライン要素はコンテンツ分の幅しか持ちません(「works」というテキストがあればworksという幅だけしか持たない)

ブロック要素かインライン要素かは、タグで決まります。

ブロック要素のタグ

div, p, section, articleなど

インライン要素のタグ

span, img, aなど

今回は.illustを横並びにします

横並びにするためのCSS

float: left; (超重要かつ頻出)

.illust { float: left; width: 33.33333%;(3列にしたいので、100/3の%を設定) }

超重要!floatをかけたとき、親要素にはcfというクラスを付けてください!!!!!

画像のリストが真ん中にいかない

さて、ここまでやって真ん中にいかないことに?マークが出た人もいるかと思います。 これは、ブロック要素の特性です。 .illustを囲うworksはdivなのでブロック要素です。つまり、画面の幅いっぱいの幅を持ちます。 Photoshopillustratorを思い浮かべてもらえればわかりやすいはずです。 キャンバスいっぱいの四角形をつくったとして、中央には寄せられないですよね?キャンバスいっぱいにつくったということは、すべに真ん中に配置されているということでもあります。

ではどうすればいいかと言うと、幅を指定しちゃいます。

.works {
  width: 80%;
}

幅を画面より小さいサイズに指定すれば、画面いっぱいではなくなるのでその要素を真ん中に寄せることが可能になります。 では、真ん中寄せはどうすればいいのか。

.works {
  width: 80%;
  margin: 0 auto;
}

これは、左右の余白を均等に取りましょう(=auto)という指定です。これでバッチリです。

プロフィールページをつくろう2

ステップ

f:id:dorak:20160512114241p:plain

  1. まず画像を用意(アイコン1枚と、同じサイズにトリミングされた作品4点)
  2. プロジェクトフォルダ「profile」を作成する
  3. profile内にindex.htmlを作成する
  4. index.htmlを編集
  5. app.cssを編集
  6. ブラウザで確認
  7. 完成!

必要なAtomの設定

  1. cmd + ,で設定画面を開く(winはctrl + ,)
  2. 一番上のAllow pending pane itemsのチェックを外す

プロジェクトフォルダをつくる

  1. アプリケーション > Atom.appをクリックして開く
  2. File > Add new project folderをクリックして、適当な場所に「profile1」フォルダを作成
  3. profile1内にindex.htmlを作成する
  4. profile1内に、assetsフォルダを作成する
  5. assetsフォルダ内に、cssフォルダ、imagesフォルダを作成する
  6. cssフォルダ内に「app.css」を作成する

完成図

f:id:dorak:20160512130440p:plain

使用する画像を入れる

  • imagesフォルダ内に、アイコン画像、作品画像数点を入れる

HTMLの編集に入る前に

HTMLでは文章を、CSSではその文章に色や大きさを指定して装飾します。
ここまでで用意したファイルでプロフィールページをつくる準備は整いました。

index.htmlを編集する

HTMLでは、HTMLを表示する機械が理解できるように、最初に書いておかなければいけない文章があります。機械とはSafariGoogle Chromeなどのブラウザのことです。 それが下記。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
</body>
</html>

まずは、この文章をそのままindex.htmlに書いていくことからスタートします。毎回書くので、コピペではなくなるべく手で打ちましょう。

<!DOCTYPE html>とは、DOC(文書)TYPE(種類)つまりこのファイルは何のファイルであるかを機械に教えるための文章です。
<head></head>には、直接画面に表示されないけれども必要な設定を記入します。
<body></body>には、直接画面に表示されるものを記載していきます。

超重要!HTMLのルールとして、必ず<>で始まって</>で終わってください。例:<p>こんにちは</p>

プロフィールに必要な文字を記入する

<body>直下に、プロフィールに必要な文字を記入します。

<p class="profile_icon">
  <img src="リンク">
</p>
<p class="name">おなまえ</p>
<p class="profile">自己紹介</p>
<p class="works-headline">作品紹介</p>
<div class="images">
  <img src="リンク">
  <img src="リンク">
  <img src="リンク">
  <img src="リンク">
</div>

CSSのリンクを記入し、HTMLをデザインできるようにする

<head>直下に、<link rel="stylesheet" href="assets/css/app.css">と記入してください。

プロフィール画像を表示する

例ではページの一番上にプロフィール画像が置かれていたので、それにならいます。 一番上の<p>よりも上に、画像を読み込むタグを記入します。

<img src="画像までのリンクを記入"> ここ、どうやったら画像が表示されるか考えてみてください!基本的にはCSSのリンク設定と同じ考え方です。

作品画像を表示する

ここまでやった内容を元に、例にならって画像を表示するにはimgタグをどのようにおけばいいか、実際にやってみましょう。

以上でHTMLの編集は終了です。 編集画面を副クリック(もしくは右クリック)でOpen in browserをクリックし、ブラウザで確認してみましょう。 うまく表示されなかったら教えてください。

ブラウザで確認すると、アイコンはページの上の方にくっついちゃってるし、文字は味気ないみたいなことになっていると思います。 文字を真ん中に表示したり、フォントを変更してみたりしましょう。

CSSを編集する

ここからがデザインです。どのようにデザインするか、あらかじめ参考画像をみながら分解していきます。

f:id:dorak:20160512114241p:plain

一緒に分解してみましょう。

デザインの分解

  1. すべて中央寄せになっている
  2. 名前が太字
  3. それ以外の文字の太さはレギュラーで、色もほんのりグレーっぽい
  4. 画像はすべて横並び

さて、そんなことが読み取れたと思います。 どうやって実現していけばいいか、を考えます。

CSSのは、どこの、何を、どのように変えるかという書き方。 例えば、body { color: red; }は、bodyタグの文字色を: 赤に;という意味。

要素を中央寄せに

body {
  text-align: center;
}
text-align: center;
文字の揃えを: 中央に;

これはPhotoshopの文字揃えと同じ。 f:id:dorak:20160512133211p:plain

文字色を変更する

body

文字色とフォントを変更する

body {
  text-align: center;
  color: #666664;
  font-family: 'YuGothic';
}

アイコンの画像の大きさを指定する

画像の大きさを特別指定しないと、画像の大きさがそのまま出てしまう。 従って、画像に大きさを設定しましょう。

img {
  width: 200px;
  height: auto;
}

width(ウィス、読みます)は幅を設定、height(ハイトと読みます)は高さを設定。 autoは、縦横比を維持したまま拡大・縮小を行ってくれる指定です。

余白を設定する

アイコンがページ上部にくっついちゃっているので、上下に余白を設定。

body {
  text-align: center;
  color: #666664;
  font-family: yugothic;
  margin: 80px;
}

paddingとは、内部余白のこと。 このようなボタンがあったとして、ピンク色の部分と文字の部分の余白が内部余白。外部余白は、ボタンそれ以外の距離。 f:id:dorak:20160512134153p:plain

続いて、「作品」の箇所にも余白を設定しましょう。

.works-headline {
  margin-top: 40px;
}

以上で完成です。

応用編

アイコンをクリックしたらyahooに飛ぶように

下記を、

<img src="iconまでのリンク">

こう書き換えてみてください。

<a href="https://www.yahoo.co.jp" target="_blank">
  <img src="iconまでのリンク">
</a>

プロフィールページをつくろう

ポートフォリオサイトを今日はつくります。 こんな感じです。 f:id:dorak:20160512114241p:plain

本当はさっそくこれやりたいんですけど、CSSでもうちょっとやらなければいけないことがあるので、そこだけやっときましょう。 前回の続きです。 前回はボタンつくりましたね。

CSSを分割する

さて、ボタンが出来たは良いですが、なんか複雑なHTMLになってしまいました。 <p style="background: red; color: white; width: 100px; border-radius: 8px; text-align: center; padding: 8px 0 8px 0;">ボタン</p>

長い。上のポートフォリオサイトを作ろうとしたらどれくらい面倒くさいHTMLになってしまうのでしょうか。

本来は、<p>ボタン</p>だったのに、こんなに長くなってしまいました。 というクレームがたくさん来たのか、HTMLとCSSはファイルを分けられます。 HTMLに対してCSSを読み込む事ができます。

さてやり方。 の前に、まずは<p>に書いてあるstyle=""の長い記述をまるっと削除して、<p>ボタン</p>というシンプルな形になるようにしてください。 再読込したら、頑張ってつくったボタンがただの文字になってると思います。

まずはcssフォルダの下にapp.cssというファイルをつくります。 このファイルにさっきのbackgroundとかを書いていきます。 それでは、app.cssを開きましょう。

さて、開いたら、以下の用に書いてください。

p {
  background: red;
  color: white;
  width: 100px;
  border-radius: 8px;
  text-align: center;
  padding: 8px 0 8px 0;
}

はい、これでcssの準備は完了です。 文法を説明すると、 どこに { 何を: どのように変えるか; } です。

さて、これでHTMLファイルの「ボタン」がまた さっきのように赤いちゃんとした見た目になってるはずです。 最読み込みしてください。

どうでしょうか。おそらく、ただのテキストの「ボタン」が出てきたと思います。

これは、HTMLからCSSを読み込んで無いのが原因です。

CSSの読み込み方

<head>の中に<link href="cssファイルまでのリンク" rel="stylesheet">を追記してください。 こんな見た目になればOKです。

<html lang="ja">
  <head>
    <title>練習</title>
    <meta charset="utf-8">
    <link href="リンク" rel="stylesheet">
  </head>
  <body>
    <p>ボタン</p>
  </body>
</html>

「リンク」ってなってる箇所をちゃんとしたリンクに置き換えてくださいね。

さて、完了したら再読込してみましょう。 どうでしょうか。デザインされた状態のボタンがちゃんと表示されましたか?

次の演習

ボタンを3つ表示してみてください。 一つ目は赤色、二つ目は青色、三つ目は緑色にしてみましょう。

正解はこちら

<html lang="ja">
  <head>
    <title>練習</title>
    <meta charset="utf-8">
    <link href="リンク" rel="stylesheet">
  </head>
  <body>
    <p class="red_button">ボタン</p>
    <p class="blue_button">ボタン</p>
    <p class="green_button">ボタン</p>
  </body>
</html>
.red_button {
  background: red;
  color: white;
  width: 100px;
  border-radius: 8px;
  text-align: center;
  padding: 8px 0 8px 0;
}

.blue_button {
  background: blue;
  color: white;
  width: 100px;
  border-radius: 8px;
  text-align: center;
  padding: 8px 0 8px 0;
}

.green_button {
  background: green;
  color: white;
  width: 100px;
  border-radius: 8px;
  text-align: center;
  padding: 8px 0 8px 0;
}

クラスとは

CSSの文法はどこの { 何を: どのように変えるか; }でした。この「どこの」には、タグ(pとか)の他にクラスというやり方があります。これが超重要です。制作の現場ではめちゃくちゃ利用頻度が高く、タグ名での指定はほとんど行われません。 ほとんどクラス名で指定されます。 では、クラスの指定方法。

クラスの指定方法

  • HTML側 <p class="button">ボタン</p>

  • CSS

.button {
  color: red;
}

HTML側は単純にclass="任意の名前"でいけます。 CSS側は、.任意の名前で指定できます。ドット+HTML側でつけた任意の名前です。ドット絶対つけてくださいね。

ポートフォリオサイト(の一個手前のプロフィールサイト)

HTML, CSSを利用して、最初のプロフィールページをつくってみます。 プロフィールページの要件は次の通り。

  • アイコン(顔写真でも、イラストでも大丈夫です。)
  • 表示名
  • 自己紹介文
  • これまでのプロジェクトの画像を何枚か

完成図イメージ

f:id:dorak:20160512114241p:plain

10/11はここから!

ステップ

  1. まず画像を用意(アイコン1枚と、同じサイズにトリミングされた作品4点)
  2. プロジェクトフォルダ「profile」を作成する
  3. profile内にindex.htmlを作成する
  4. index.htmlを編集
  5. app.cssを編集
  6. ブラウザで確認
  7. 完成!

必要なAtomの設定

  1. cmd + ,で設定画面を開く(winはctrl + ,)
  2. 一番上のAllow pending pane itemsのチェックを外す

プロジェクトフォルダをつくる

  1. アプリケーション > Atom.appをクリックして開く
  2. File > Add new project folderをクリックして、適当な場所に「profile1」フォルダを作成
  3. profile1内にindex.htmlを作成する
  4. profile1内に、assetsフォルダを作成する
  5. assetsフォルダ内に、cssフォルダ、imagesフォルダを作成する
  6. cssフォルダ内に「app.css」を作成する

完成図

f:id:dorak:20160512130440p:plain

使用する画像を入れる

  • imagesフォルダ内に、アイコン画像、作品画像数点を入れる

HTMLの編集に入る前に

HTMLでは文章を、CSSではその文章に色や大きさを指定して装飾します。
ここまでで用意したファイルでプロフィールページをつくる準備は整いました。

index.htmlを編集する

HTMLでは、HTMLを表示する機械が理解できるように、最初に書いておかなければいけない文章があります。機械とはSafariGoogle Chromeなどのブラウザのことです。 それが下記。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
</body>
</html>

まずは、この文章をそのままindex.htmlに書いていくことからスタートします。毎回書くので、コピペではなくなるべく手で打ちましょう。

<!DOCTYPE html>とは、DOC(文書)TYPE(種類)つまりこのファイルは何のファイルであるかを機械に教えるための文章です。
<head></head>には、直接画面に表示されないけれども必要な設定を記入します。
<body></body>には、直接画面に表示されるものを記載していきます。

超重要!HTMLのルールとして、必ず<>で始まって</>で終わってください。例:<p>こんにちは</p>

プロフィールに必要な文字を記入する

<body>直下に、プロフィールに必要な文字を記入します。

<p class="name">おなまえ</p>
<p class="profile">自己紹介</p>
<p class="works-headline">作品紹介</p>

CSSのリンクを記入し、HTMLをデザインできるようにする

<head>直下に、<link rel="stylesheet" href="assets/css/app.css">と記入してください。

プロフィール画像を表示する

例ではページの一番上にプロフィール画像が置かれていたので、それにならいます。 一番上の<p>よりも上に、画像を読み込むタグを記入します。

<img src="画像までのリンクを記入"> ここ、どうやったら画像が表示されるか考えてみてください!基本的にはCSSのリンク設定と同じ考え方です。

作品画像を表示する

ここまでやった内容を元に、例にならって画像を表示するにはimgタグをどのようにおけばいいか、実際にやってみましょう。

以上でHTMLの編集は終了です。 編集画面を副クリック(もしくは右クリック)でOpen in browserをクリックし、ブラウザで確認してみましょう。 うまく表示されなかったら教えてください。

CSSを編集する

ブラウザで確認すると、アイコンはページの上の方にくっついちゃってるし、文字は味気ないみたいなことになっていると思います。 文字を真ん中に表示したり、フォントを変更してみたりしましょう。

CSSのは、どこの、何を、どのように変えるかという書き方。 例えば、body { color: red; }は、bodyタグの文字色を: 赤に;という意味。

文字を真ん中に表示する

body {
  text-align: center;
}
text-align: center;
文字の揃えを: 中央に;

これはPhotoshopの文字揃えと同じ。 f:id:dorak:20160512133211p:plain

文字色を変更する

body

文字色とフォントを変更する

body {
  text-align: center;
  color: #666664;
  font-family: yugothic;
}

アイコンの画像の大きさを指定する

画像の大きさを特別指定しないと、画像の大きさがそのまま出てしまう。 従って、画像に大きさを設定しましょう。

img {
  width: 200px;
  height: auto;
}

width(ウィス、読みます)は幅を設定、height(ハイトと読みます)は高さを設定。 autoは、縦横比を維持したまま拡大・縮小を行ってくれる指定です。

余白を設定する

アイコンがページ上部にくっついちゃっているので、上下に余白を設定。

body {
  text-align: center;
  color: #666664;
  font-family: yugothic;
  margin: 80px;
}

paddingとは、内部余白のこと。 このようなボタンがあったとして、ピンク色の部分と文字の部分の余白が内部余白。外部余白は、ボタンそれ以外の距離。 f:id:dorak:20160512134153p:plain

続いて、「作品」の箇所にも余白を設定しましょう。

.works-headline {
  margin-top: 40px;
}

以上で完成です。

応用編

アイコンをクリックしたらyahooに飛ぶように

下記を、

<img src="iconまでのリンク">

こう書き換えてみてください。

<a href="https://www.yahoo.co.jp" target="_blank">
  <img src="iconまでのリンク">
</a>

CSS入門続き

アジェンダ

  • 復習(HTMLとフォルダのつくり方)
  • CSS入門リベンジ

復習

やること

HTMLのフォルダを作って、画像を表示するところまで

復習できること

  • フォルダについて
  • リンクについて
  • Atomについて

演習

次のスクリーンショットのようなフォルダを作成し、画像を表示してみてください。 なお、フォルダ名はスクリーンショットに従ってください。 また、どんな画像でもいいので、最低1枚はimagesフォルダに入れてください。

f:id:dorak:20160920181905p:plain

※リンクについて復習

基準となるファイルから見て、表示したい(読み込みたい)ファイルがどこにあるかを機械に教えるためのもの。

参考図: f:id:dorak:20160920182832j:plain

この参考図みたいな感じです。 で、復習ですが、 下に下がるのはスラッシュ(/)、上に上がるのは(../)でしたね。 では、ぷち演習します。存分に上の参考図を参考にしてください。

  • index.htmlからassetsまでのリンクを書いてください。
  • index.htmlから画像までのリンクを書いてください。
  • index.htmlからapp.cssまでのリンクを書いてください。
  • app.cssから画像までのリンクを書いてください。

書いたら、上記3点の答えをsy_tanaka@vivivit.co.jp宛に送ってください。 答えを記載して送ります。件名とか本文とかはなくても大丈夫です。 ヒント: 2つ目の答えはassets/images/名前.jpgです。

CSSとは

Cascading Style Sheetの略。 HTMLで作られた文章を装飾するためのもの。

CSSの書き方

color: red;

つまり

何を: どのように変えるか;

と書きます。 上記は、color(文字色を): red(赤く); という意味です。

覚える必要があるのは、この「何を」の部分です。

さて、それでは、論より証拠で実際にCSSとHTMLを使ってボタンを作ってみましょう。 完成形はこちら。

f:id:dorak:20160920185250p:plain

さて、これをどうやって実現していけばいいでしょうか。 まず分解してみましょう。 このボタンは、「ボタン」という1つのテキストから出来ています。 それをCSSでデザインするだけです。

では、分解開始します。 1. 「ボタン」の背景色を赤くする 2. 文字の色を白にする 3. ボタンの幅を指定する 4. 角を丸くする 5. 文字を中央寄せにする 6. 文字と背景の上下に余白を入れる

概ね、この6ステップで完了します。 では、実際に書いていきましょう。

  • 「ボタン」の背景色を赤くする <p style="background: red;"></p>

赤くなりましたか?

  • 文字の色を白にする 背景が赤だと、文字が黒では見にくいです。文字を白にしましょう。 <p style="background: red; color: white;">ボタン</p>

  • ボタンの幅を指定する さて、ここまでやったところで背景に色がついて文字は白くなりましたが、背景がビヨーンと伸びてボタンっぽくありません。 ボタンっぽくするには、ボタンっぽい幅にしてあげる必要があります。 <p style="background: red; color: white; width: 100px;">ボタン</p>

どうでしょう、ちょっとボタンっぽくなってきたのではないでしょうか。一応おさらいしておくと、backgroundが背景、colorが文字色、widthが幅です。英語辞書で調べるとそのままの意味が出てきます。

  • 角を丸くする ボタンっぽくなってきましたが、まだカクカクしてますね。 いわゆる角丸を適応しましょう。 <p style="background: red; color: white; width: 100px; border-radius: 8px;">ボタン</p>

はい、結構ボタンっぽくなりました。border-radiusは角丸を達成するための命令で、角の半径を入力すればいい感じに角丸になります。ここでは8pxとしていますが、好みの角丸で大丈夫です。

  • 文字を中央寄せにする 文字が中央によってないので変な感じですね。これは一発で解消出来ます。 <p style="background: red; color: white; width: 100px; border-radius: 8px; text-align: center;">ボタン</p> です。 text-alignは文字の揃えを指定するための命令です。テキストアラインと読みましょう。centerは中央です。 Photoshopとかで言うとコレですね。

f:id:dorak:20160512133211p:plain

  • 文字と背景の上下に余白を入れる もうだいぶいい感じですが、デザイン的に追い込んでみましょう。 ボタンの余白を設定します。 <p style="background: red; color: white; width: 100px; border-radius: 8px; text-align: center; padding: 8px 0 8px 0;">ボタン</p>

上下に余白を足しました。 paddingが余白命令です。書き方として、8px 0 8px 0となってますが、paddingは上下左右に余白を設定できます。指定方法は、時計回りです。上、右、下、左です。↑、→、↓、←です。つまり、8px 0 8px 0だと、↑8px, →0px, ↓8px, ←0px という意味です。

はい、いい感じですね。

広告を非表示にする

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にしてサイトにアップロード
広告を非表示にする

HTMLとCSS入門

HTMLとCSSを用いて、ブラウザに文字を表示する

アジェンダ

目的

突貫工事でポートフォリオサイトがつくれるようになるための知識を身につけるため、HTML/CSSの文法よりも、つくりながら覚えていく方法をとる。なので、いきなり実践に近いやりかた(たとえばプロジェクトのためのフォルダのつくり方だったり)をやっていきます。

開発環境の確認

  • 開発環境とは、要はどんなテキストエディタを使ってHTMLを書いていくか、ということ。
  • テキストエディタ Atomを利用。

  • 確認用ブラウザ Google Chromeを利用(ない人は次回までにダウンロードしといてください)

  • そもそも、ブラウザとは何か。
  • Google ChromeSafariなど、インターネットを閲覧するためのソフト(アプリ)のこと。

HTMLとは

Hyper Text Markup Languageの略。 デジタルペイントがPhotoshopやSaiを用いて作られるように、普段PCやスマホで見ているWebサイトは、必ずHTMLで作られている。 普通に文字を書いたのでは、機械が「これは文字なのか、それとも機会に対する命令なのか」がわからないため、識別するために必ず<>ではじまって</>で終わる。例えば、文字を表示したいときは<p>こんにちは</p>みたいに書く。 必ず<>ではじまって</>で終わらないと、文字が表示されないなどの現象が起きる! <p>のpがどういう意味か、と言うのはのちほどやります。

まず文字を表示する

HTML最初の一歩

  1. Atomを開く
  2. New Window f:id:dorak:20160913101852p:plain

  3. <p>hello</p>と入力 f:id:dorak:20160913101937p:plain

  4. cmd+S(windowsではctrl+S)でファイル名を「index.html」で保存。場所はわかりやすい場所でOK。(例えばデスクトップなど) f:id:dorak:20160913102415p:plain

  5. 左にフォルダの中身が表示される f:id:dorak:20160913102441p:plain

  6. 副クリック(右クリック)でフォルダやファイルを追加可能

  7. Finderでプロジェクトフォルダを開く(保存した場所。上に書いたとおりで言うとデスクトップ)
  8. index.htmlをクリックする(もしくは副クリックして「chromeで開く」など)
  9. ブラウザでhelloが表示される

HTMLで開発をはじめる時の手順

まずはフォルダをつくる、フォルダを作ったらAtomで開く

HTMLでWebサイトをつくる際に必要なファイルはだいたい決まっています。 - htmlファイル - cssファイル - javascriptファイル - 画像 この4つ。

なので、あらかじめ上記ファイルの使用を想定したフォルダを作っておくことが作業の効率化をもたらします。

具体的な手順

  • プロジェクトの名前をつけたフォルダをつくる(例:myportfolioなど)
  • そのフォルダの中に, assetsという名前のフォルダをつくる
    • assetsとは「資産」という意味。html以外のファイルを入れるための箱。例えば画像やcssなど
  • assetsフォルダの中にcssフォルダとimagesフォルダをつくる前者はcssファイルを入れて、後者は画像を入れる箱。
  • ここまででこんな感じのファイル構成に。 f:id:dorak:20160913103147p:plain

  • Atomを開く

  • メニューのFile -> Open -> さっきつくったプロジェクトフォルダ(例: myportfolio)を選択
  • するとこの画面になる f:id:dorak:20160913103305p:plain
  • 左側を副クリックして、「new file」をクリックし、index.htmlを作ってみる f:id:dorak:20160913103859p:plain f:id:dorak:20160913103947p:plain f:id:dorak:20160913104002p:plain

  • hello

    と入力し、cmd + S で保存(windowsはctrl + S)。

  • フォルダに移動し、index.htmlをダブルクリックしてブラウザで確認。
  • 完了
  • 最終的なフォルダは以下の用になっているはず。 f:id:dorak:20160913104244p:plain

何故フォルダをつくるか。それは単純に「便利だから」。極論、なくてもHTMLでページは作っていけるけど、整頓されていないプロジェクトは絶対に破綻します。

練習

以下の構成のフォルダを作成して、ブラウザに「こんにちは」と表示してみましょう。 ファイルは副クリックでつくれます。

  • cssフォルダの中にはapp.cssというファイルをつくる
  • jsフォルダの中にはapp.jsというファイルをつくる

※ htmlファイルに<head><meta charset="utf-8"></head>と表記。ただし<p>の前

f:id:dorak:20160913104459p:plain

9/16宿題

広告を非表示にする