HTMLとCSSのコーディング、テストサーバ経由でのブラウザ表示

XAMPPの初期設定も終わったし、

ブラウザはもともとChromeを使っているので、

残るはエディタ。

 

 

TeraPadで地道に進めようかと思っていたら、

コーディング用のエディタとして、Atomというソフトがおすすめされていたので

インストール。

atom.io

testコード等々はよそ様のものをお借りしつつ、セットアップ完了。

 

設計書らしきものを手書きして…(汚い)

f:id:engine_engineer:20180826224921j:plain

 

コーディング。

入力支援があってとても使いやすいです。

f:id:engine_engineer:20180826224538p:plain

 

HTMLは、書きたい要素をどんどん作り込んでいくだけなので

簡単なルールさえ押さえればスイスイ進むのですが、

私にとってはCSSがけっこうややこしい。

説明の通りにコーディングしているつもりでも、予想に反したスタイルに…

 

まだかなり理解度が低いので、

各要素にバックグラウンドカラーをつけて、

何がどこに配置され(てしまっ)ているのかを確認しながら。

 

本日は、各要素を概ね思い通りの位置に配置し、

ブラウザの表示を大きくしたり、小さくしたりしても、

画像が見切れないようなスタイルにしたところで、終了。

f:id:engine_engineer:20180826230216p:plain

f:id:engine_engineer:20180826225227p:plain

タイトル用の画像を作るなら、背景を透明にしなけりゃなぁ…

ブラウザを最大化したとき、3つの画像が離れ離れになりすぎるのが気になる…

 

※超かわいいひよこのイラストは、こちらからいただきました。

hiyokoyarou.com