絶対他力

凡人の凡人による凡人のためのWebサービス開発

背景とヘッダーのCSSを作成しました_PWDD-160119

   

チームPocoです。
ポコ帳ワイヤーフレーム開発日記(PWDD)です。

今回から、自作のCSSを編集していきます。

まずは、背景とヘッダー部分の見た目を調整してみました。
(というか…全然思った通りにいかないので、それしかできませんでした)

現時点でのスクリーンショットは、↓な感じです。
※デベロッパーツールの設定:iPhone6

↓↓↓↓スクリーンショット↓↓↓↓
htmlスクリーンショット
↑↑↑↑スクリーンショット↑↑↑↑

「マイメニュー関係」や「カテゴリ一覧関係」の部分は、↑のように最初から全部表示させるのではなく…
ボタンを作って、そこを押した時にニュッと出てくるようにしたいのですが、やり方が分からないので後回しにします。

また、CSSは↓です。

なかなか思うように調整できないのですが…ドットインストールの「CSSレイアウト入門」や「レスポンシブなウェブサイトを作ろう」を観ながら、見よう見まねで作成してます。

また、CSSに合わせて、HTMLの一部を↓のように変更しました。

5行目は、「iPhoneが自動で画面を縮小してしまうのを防ぐ」ためのモノみたいです。

また、8行目にある「styles.css」が、今回作成したCSSです。
後にあるCSSが優先されるらしいので、前回適用した「normalize.css」の下で読み込ませています。

また、「マイメニュー関係」と「カテゴリ一覧関係」の場所を入れ替えてあります。
※ボタン化できず、見た目が当初の想定と変わってしまったため。

まだまだ先は長そうですが、コツコツ頑張っていきます。

本日のPWDDは以上です。

 - PWDD