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週間後の授業開始前までとします。
まとめ
margin・・・他の要素との距離 = 外側の余白
padding・・・自要素の内容との距離 = 内側の余白
上記のように「margin」と「padding」はそれぞれ、「外側の余白」と「内側の余白」という事が分かりました。
コーディングを行っていて、すでに何度も登場しているので感覚的に理解しているかもしれません。
レイアウトを行う上で「margin」と「padding」は指定をしない方が少ないので覚えておいてくださいね。
