Sponsored Link
前回は「marginとpadding」の解説を行い、Webサイトコーディング[BASIC]を途中まで行いました。
今回で「コーディングの実践 BASIC」を完成させ提出を行いましょう。
また今回はどうしても覚えてほしい「Flexbox」について解説します。
「Flexbox」を使いこなせば、Webサイトのレイアウトのほとんどを実現できると言っても過言ではありません。
Webサイトコーディング[BASIC]のコーディングの完成まであとちょっとです!頑張ろう!!
この記事の目次
Webサイトコーディング[BASIC] その4
ではVisual Studio Codeを起動し、「Ctrl + K → Ctrl + O」で前回作った「html00」フォルダを選択して開き、
エクスプローラーパネルにある「index.html」をダブルクリックして編集モードで開いてください。
(不明の場合・・・起動とフォルダ準備手順)
前回は「imgへの指定(style.cssのEmmet記法)」まで行いましたので、
その続きの「div.typoへの指定(style.cssのEmmet記法)」から行い、完成までの内容を行いたいと思います。
以下のリンクを開いてください。
課題提出
では提出条件です。
コーディングを行なったindex.htmlの<title>私のウェブサイト</title>の部分を、
<title>○○○○のウェブサイト</title>と書き換えて上書き保存する。(○○○○は自分の氏名)
上記の書き換えができたら「html00」フォルダをまるごとzip形式で圧縮してください。
※index.htmlのみ圧縮した場合は未提出扱いになります。
「html00」フォルダをzip形式で圧縮
まず、「html00」フォルダ圧縮の手順は以下。
- 「html00」フォルダを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。
以上です。
zip圧縮したファイルをフォームから送信
なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。
zip形式以外のファイルだと送信の際にエラーが出て送信ができませんので、必ず「html00」フォルダをまるごと圧縮してzip形式で提出してください。
なお提出期限は、1週間後の授業開始前までとします。
まとめ
最も基本となるBASICのコーディングを行いました。
これでコーディングマスターになった!というのは少し早いですが、コーディングの流れは理解できたかと思います。
- フォルダ・ファイルを準備する。
- htmlファイルにてコーディングを行い、適切なhtmlタグでマークアップを行う。
また画像などを表示する必要があればフォルダ操作で準備して配置しておき、bodyセクション内に読み込む記述を行う。 - cssファイルにてコーディングを行い、htmlファイルでマークアップしたhtmlタグをセレクタとして使い、
そのセレクタの宣言ブロックに、反映したいデザインのプロパティ・値の宣言を記述する。 - ❶〜❸で適宜ブラウザ確認を行う。
以上のように基本はこの流れです。
また、htmlの記述ルール、cssの記述ルールに関しても以前案内した通りです。
この流れとルールを理解できれば、あと必要なのは「創作意欲」のみです。
私はコーディングを勉強し始めた時はハマりにハマって、
気がついたら明け方近くまでコーディングで遊んでる毎日を過ごしていました。
自分が書いたコードによってWebサイトがモニターにすぐに表示され、それをサーバーにアップすれば一瞬で全世界に届く。
すごくないですか?え?すごくないですか?やばい、楽しくなってきたッ・・・!!(←知識より大事なこと)
どうしても覚えてほしい!Flexbox
では、今回はcssで「display: flex;」と指定したボックス「通称:Flexbox」に関して深掘り考察・解説したいと思います。
以下の記事をCtrl + クリックください。
Flexboxは理解するまでのハードルがとても高く、私自身も完全に理解したとは言えません。
ただ少しでも「そういうことか」と理解の糸口が見つかれば、経験上一気に使えるようになります。
次回はこのFlexboxの仕組みを理解するためにレイアウト練習の課題を行ってみましょう。
