#17,18,19 GitHub登録 & Web page作成演習
今回のレッスンはアウトプットメインでした。
GitHubはコードを保存しておくクラウド。htmlファイルだけでなく、cssファイルも、コードの中で使用している写真も入ったフォルダごとアップロードします。写真だけ削除することもできますが、その場合、ブラウザ上で写真の部分が空欄になります。
Web Page作成の演習で作っているのは、コーヒー豆の架空通販サイト☕
今日作ったのは以下のパートです。
1. Header Area
2. Banner Are
3. Ads Area
4. Merchandise Area
5. Discount Area
それぞれのパートについて、間違えたところを中心におさらいします。
まず、HeaderとBannerはこんな感じ。
Headerからコードのうち、自分で思い出しづらかった部分をおさらいする。
初めに以下の２点に注意。
①ブラウザ上に表示するelementのsyntaxは全て<body></body>の中に書く。
②それらのelementは<div class="wrapper"></div>の中に入れる。wrapperがなければelementが画面いっぱいいっぱいに広がってしまうので、コンテンツを表示する範囲を指定する。見てほしい範囲だけ囲うイメージ。
・ブラウザ上ではHome, Merchandise, Discount, onSale, Reservationを横並びで表示したいので、cssではdisplayをinline-blockにする。
・cssで背景画像の挿入をする時に使うのは
background-image: url();のsyntax.
ファイル名を手入力してもだめ。url()内で. . /と入力し、挿入したいイメージを選択する。
・ブラウザ上でクリックできるように指定した箇所から、デフォルトでついてしまうアンダーラインを消したい場合に使うのは
text-decoration: none;
htmlファイルで作っておいたbannerというclassの中の、anchor element<a>のスタイルを指定するときの例のsyntaxを貼っておきます。
次にAds Areaのブラウザはこんな感じ
2種類の広告を同じサイズと様式で表示している
→htmlファイルではその2つを含むclassを作り、cssでそのclassに対してスタイルを指定。異なる部分は、子要素でまたclassを作り、その子要素にcssでスタイルを個別に指定。
htmlのコードは以下の通り。
個別のスタイル指定は以下の通り。
続いて、Merchant Area はこんな感じ
・各種商品写真のスタイルを統一したいので、先ほどと同様に、各商品を表示するためのsyntaxを全て含む親要素をhtmlで作り、cssでそのスタイルを指定。
・各商品に該当するelementは写真、商品名、******、値段を1セットで<div></div>に入れる。親要素と子要素1つだけのhtmlのsyntaxの例を示すと以下の通り。
.merch-gallery{ }で親要素の、.merch-items{ }で子要素の、.merch-items img{ }で子要素の中の画像のスタイルを指定する。
最後にDiscount Areaはこんな感じ。
同じ要領で必要なelementをhtmlに入力し、cssでスタイルを指定します。
cssで1まとまりのスタイルを指定するごとに、毎回アウトプットを確認するとよいです。コードを全て書いてからだと、どこがうまくいっていないか探す手間がかかるので。
今週の反省🤔
午前中に2コマ入れると、研究時間が圧迫されるので来週は夜に入れることにしました。レッスン受講、復習ノート投稿、現地での諸々の対応をしているとあっという間に夜になってしまい、「今日も最低限のタスク分しか研究に時間がさけなかったな」とかなり後ろめたい気持ちになっていました。明日からは、なんとか研究時間1日8時間は確保できるように、早起きして1人で集中できる時間が確保できる間に、執筆や集中力の必要な文献の読解を進めてみよう。
Kredoについて詳しく知りたい方はこちらをご覧ください。
この記事が気に入ったらサポートをしてみませんか？