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

プロフィールページをつくろう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>