Shuntiger Tech Diary

iOS/Androidエンジニアが気になる技術やガジェットなどを気のままお届けするブログ

HTML&CSSとWebデザインが1冊できちんと身につく本

年末年始にかけて箱根駅伝を横目に見つつWebサイト制作の勉強をしていました。

使用したのは以下の本。

 

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

 

 

作業時間


前回HTML&CSSの本をやっていたので14時間程度終わらせることができた。

復習も兼ねてHTMLのタグ打ちと解説はじっくりやり、

CSSでの装飾は楽しみつつやる感じ。

1日3〜5時間程度で完了。計5日間ほどで完了。

 

使用したツール


Brackets - テキストエディタ*1

得られたもの


Bracketsの使い方

・Webページレイアウト手法

 →フルスクリーン

 →シングルカラム

 →2カラム

 →グリッド

 →レスポンシブデザイン

・clearfix

Youtube動画、GoogleMapの埋め込み

・Webサイト制作における用語諸々

 

以下URLが本1冊かけ実際に出来上がったWebサイト

風景写真家「SNAPPERS」Official Website

 

前回よりかなり今時なWebサイトが出来上がる。

本文や背景画像を変えて

自身のポートフォリオサイトにしてもいいようだ。

実際に作ってみた感想としては全くの初心者が作るとタグのインデントがごちゃごちゃになり詰まって挫折しそうな感はあった。前回の本と比べるとそこまで親切じゃない。

 

でもWebサイト制作の流れや、実務に使えそうなテクニックが結構載っていてやってよかったなと思う。

特にfloatで寄せとかの技術は曖昧だったので、そこがクリアになった。

レスポンシブデザインもしっかり書いてて勉強になった。スマホ対応って重要なのね。

またBracketsのライブプレビュー機能。めっちゃいい。

HTMLとかCSSの編集が更新しなくても即座に反映される優れもので、コードがすぐ反映されるのも楽しいし、pxサイズなどCSSのコードを色々試すのに全然手間がかからないという所に惚れた。

 

そして以前FC2のレンタルスペースを利用して簡単だったからまた使おうと思ったが、どうやら1IDに付き1ドメインのようで複数のサイトをあげることはできなかった。

※パスのディレクトリを変更したらできるみたいだったが。

 

なので今回はXFREEという無料のレンタルサーバーを借りてアップロードした。*2

XSERVERの無料サービスらしいが、XSERVERのサイトで無料のリンクを探したが見つからなく、少し怪しいサイトかなと思って躊躇したが無事サイトが見ることができて結果オーライ。

またFileZillaを使うことができたのでいい経験になった。

 

次はGitかJavaScriptPHPか...。

またはSwiftをしっかり固めるか。

動的なサイトも作りたいし、ネイティブアプリも作りたいしでやりたい事が多いのが悩みどころ。

*1:ライブプレビュー機能超便利!

*2:ローカルで楽しむだけなのも勿体無い