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

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

ポートフォリオサイトを今日はつくります。 こんな感じです。 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>