アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

トップ > css > テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。

テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。

css html テックアカデミー

 

こんにちはオドリコ（@acro_y）です！

先日より再勉強を開始しました！

simpledancer.hatenablog.com

時間はそんなにないので本当はサクサク進めたいのですが細切れになります。

だけど１回やっているので前回の半分くらいの時間で終わると（多分思っている）

教材内容はテックにバレると怒られるかも？？ですが

勉強した内容と併せて載せていきたいと思います。

Lesson1 HTML CSS

やる内容としては

  • コードの基本的な書き方
  • 画像やリンクの入れ方
  • 色や配置、文字のデザイン的要素
  • タグの説明
  • ホームページのプロフィールを作る
  • お問い合わせページを作る

がざっくりとした内容です。

まず完成系がこちらの感じです。

f:id:simpledancer:20170408120733p:plain

写真や文章内容は私仕様に変更してます。

about.htmlとabout.cssを書くだけでこんなページが１枚出来上がります！

htmlのコードはこんな感じです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>odorico | About</title>
<link rel="stylesheet" href="about.css">←cssを読み込むコード
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="selected">About</a></li>←各ページにリンクする
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="logo">
<img src="profile.png" alt="">
<h1>Odorico</h1>←見出し
</div>
</header>
<div class="container">
<section>
<h2>About</h2>
<h3>自己紹介</h3>
<p>Odorico（プログラマー）</p>
<p>兵庫県神戸市出身。フリーランスで活動しています。</p>
<p>最近は、<span class="red">Ruby on Rails</span> を使って仕事をする機会が多くなりました。</p>
<p>私のポートフォリオを見て気になった方は、<a href="contact.html">Contact</a>よりご連絡お願い致します。</p>
<h3>リンク</h3>
<ul>
<li><a href="https://www.facebook.com/odorioco" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/odorico" target="_blank">Twitter</a></li>
</ul>←　a href でfbとtwitterのリンクを挿入（urlは適当です）　
</section>
<footer>
<p>&copy; 2015 Yumiko Tezuka.</p>
</footer>
</div>
</body>
</html>

cssページ

ページ内の色つけや配置を調整していきます。

ルールとしては

セレクタ {
  プロパティ: 値;
}

こんな感じで

どのタグの{

色：　色指定;

}

例えば

p{

color: blue;

}

 

基本は文字も配置も配色も同じようなルールで書いていきます。

色の値を表現する方法は3つあります。

  • 言葉: red, green, blue, …
  • RGB(16進数): #000から#fffまで
  • RGBA関数: rgba(0,0,0,0)

以上の3つがあり、一番わかりやすいのは言葉でしょう。
red, green, blue, gray, black, whiteなど実に様々な色が用意されています。

次に、RGB(16進数)です。16進数とは、0から数えて0123456789abcdefまでが1桁になる数え方です。
つまり、a=10, b=11, …, f=15で最大値となります。アルファベットは大文字でも構いません。
RGB(16進数)は左からRGB、つまり、#RGBとなっていて、#f00だと赤だけ最大値なので、赤色となります。
他には、#f0fだとRとBが最大値なので、紫色になります。
更に細かくなった#RRGGBBで2桁ずつ使えるものもあります。この場合は00=0からff=255まで使えます。

次に、RGBA関数の場合は、rgba(R,G,B,a)となっており、R,G,Bは0から255の範囲、aは透明度のことで0.0から1.0まで扱えます。

#dddは全ての色が同じ値なので黒#000〜白#fffの間となり、つまりグレーになります。

あとは文字サイズ、画像サイズの変更、余白の調整、文字をふと文字にする。。

などです書き方のルールは全て同じです。

あと私が苦手なのが余白の調整です。

  • margin - 外側の余白
  • border - marginとpaddingの境界線
  • padding - 内側の余白
  • コンテンツエリア - widthプロパティやheightプロパティで指定される内容領域

これらが私は慣れていなくていつも手間取ります。previewを見ながら徐々に調整していきます。

ちなみに画像を丸くするのはborder-radiusを使います。

テキスト通りに

#logo img {
  max-width: 120px;
  border: 5px solid #fff;
  border-radius: 100%;
}

 でプロフィール画像が丸くなります。

  • 画像の大きさを調整するために、max-widthプロパティを使って最大の横幅を決めます。
  • borderプロパティでボーダーラインの幅を5pxでラインの種類をsolid（一本線）、色を#fff（白）にします。

 再度作成してみた感想

細かいバランス、配置などがまだ全然理解できてないけれど

大まかな流れや言葉の意味は結構覚えていた！

多分ブログのカスタマイズをしているうちにこの辺りは覚えてきたのではないか？と思います。

それでは引き続きブログにも勉強内容をupしていきます！