WEB系就転職へ向けた学習_2018_03_01_

今日はHTMLとCSSの復習をDreamweaverを使って行いました。
今回目標とするサイトが、と「バレンシアガ」のサイトいうことですので
このサイトで使われている技術の一部を見まねで学習しました。

各エリアをdivで囲うことを先にイメージしてもらいました。
その上で、ヘッダーとフッターは共通しているということを自分で気づかれ
まず、その部分のコーディングから入られました。

まずは、ページの上下左右の余白を完全に消すために、reset.cssを作成しました。
リセットCSSとは、ブラウザが最初から持っている、大きさや余白情報をなくすためのものでいろいろな作者が作っているものです。今回はYahoo!で推薦している、YUIのreset.cssを使うことにしました。

divを％指定で定義しました。エリアを3つに分けて作成するので
各33％程度でCSSを設定しましたが、フロートについては、復学が必要で
「自分自身が浮かんで○に寄る」という機能の再説明をしました。
すべてフロートを左に寄せてコーディング。ただ、ボーダーを入れた場合
3つのボックスのサイズを33％にしたところ、一番右側のボトムに隙間が発生することに
そこで、３つのdivを囲うdivを作り、そのボトムにボーダーを入れることにより解決
しようとしました。

ただ、フローとしている各エリアを囲う、divには高さが発生しないということが起こるので、その解消を、cssのoverflow:hidden;を入れることで高さを表示させることに成功しました。

次にレスポンシブルの仕組みをメディアクエリで説明しました。
@media (min-width: 700px) {}
これは、〇〇のサイズまではこのCSSを読み込むというものです。これを使うことによって、サイズに応じた表示を変えることに成功した。

また、CSSを使って真ん中に表示させるにはどうするのかというのを復習しました。
真ん中に持ってきたいエリアのサイズを指定して、そのボックスに対して
margin:0px auto;を使うことで真ん中に表示しました。

今回の課題のコーディングはここまで。

残りの時間は、レンタルサーバーのロリポップを取得しました。
ドメインで面白いドメインが多くて面白かったですね。
10日までは無料で使用ができますので、10日以内に以下のサイトから支払い情報を使って支払いをすることでサーバーを継続して利用することができ、またWordPressを利用することができます。

本日作成したファイルは、こちらからダウンロードできます。
ダウンロードは2018年3月30日(金)まで可能です。

作業スピードのアップをするために
作業スピードを早くするために、作業に慣れていただく必要があり、コーディングの時間を一緒に取っていきましょう。デザインの部分についてはご自宅でソフトもお持ちなので練習も可能だと思います。このデザインの作り方がわからないという場合には、またお会いした時にお聞きください。

本日は学習お疲れ様でした。

次回は

・バーガーデザインのコーディングの作り方
・検索窓とその仕組み
・JavaScriptを別途準備しておきます。