Sponsored Link
前回はインライン要素とブロック要素の解説を行い、Webサイトコーディング[BASIC]を途中まで行いました。
今回はどうしても覚えてほしい「marginとpadding」について解説します。
また、今回で「コーディングの実践 BASIC」を完成させ提出を行いましょう。
この記事の目次
どうしても覚えてほしいプロパティ!「margin」と「padding」
コーディング開始前から「margin」および「padding」はたびたび出てきていますが、
この二つのプロパティは必ず理解をしておかないと適切なコーディングは不可能だと考えてください。
以下の記事をCtrl + クリックください。
Webサイトコーディング[BASIC] その3
ではVisual Studio Codeを起動し、「Ctrl + K → Ctrl + O」で前回作った「html00」フォルダを選択して開き、
エクスプローラーパネルにある「index.html」をダブルクリックして編集モードで開いてください。
(不明の場合・・・起動とフォルダ準備手順)
前回は「cssのフォルダやファイルの作成・準備、index.htmlへの読み込み」まで行いましたので、
その続きの「作業データと完成予想図を見比べ修正点を考える」から行い、完成までの内容を行いたいと思います。
以下のリンクを開いてください。
課題提出
では提出条件です。
コーディングを行なった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サイトがモニターにすぐに表示され、それをサーバーにアップすれば一瞬で全世界に届く。
すごくないですか?え?すごくないですか?やばい、楽しくなってきたッ・・・!!(←知識より大事なこと)
