Column

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Web業界で、気になるアレコレ ／Vol.63
「 いまさら聞けない、ウェブコーデイング（2）
  “ページレイアウトの仕組み”」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは。 iMedioセミナー講師の森 和恵です。
今日は、GW真っ只中ですね。いかがお過ごしですか？
わたしといえは、仕事と部屋の掃除をする過ごし方になりそうです。

お休みの真っ最中に、読んでくれたあなたにプレゼント。
< https://twitter.com/r360studio >
にて、GW中だけ閲覧できる特別動画の配信を本日お知らせします。
内容は、5・6月の講座から“ちょっとだけ新しいことが学べる”動画を予定してます。
5月10日には、見れなくなってしまうので、閲覧はお早めに。

さてさて。今回は《いまさら聞けない、ウェブコーデイング》の第２回をお届けします。
テーマは“ページレイアウトの仕組み”です。

ウェブページは、HTMLとCSSの組み合わせでできています。

ページレイアウトには枠組みが必要ですが、HTMLを使います。枠にはいろんな要素が使えますが、よく目にするのはdiv要素です。要素に後からデザインを定義するCSSの名前、クラス名を指定します。

<div class="boxstyle">・・・</div>
と書けば、div要素に“boxstyle”というクラス名を指定したことになります。

次は、デザインの定義です。デザイン定義には、CSSを使います。CSSにもいろんな種類がありますが、レイアウトでよく使われるのは、クラスという種類です。クラスセレクターと呼びます。

先のHTMLのdiv要素に指定した“boxstyle”というクラス名を使って、「幅300px、内余白1文字分、画面の中央に配置、背景色を黄色」するレイアウト枠を指定しましょう。

.boxstyle{ width:300px; padding:1em; margin:auto; background-color: yellow; }
と書きます。

この２つのコードをウェブページの適切な場所に記載することで、ページのレイアウト枠が作成されます。
実際に組み込んだサンプルページを下記にアップしています。
< http://r360studio.com/imedio/colum2.html >

このサンプルページを元に、HTMLやCSSを使って、いろいろと試してみてください。
ウェブページレイアウトの基本的な作り方が見えてくると思います。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【 出直し再勉強！ HTML＆CSS読解入門 】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23203 >
※まずはこちらで、ソースコードの基本が学べます。

【 CSSを使いこなす、Webページレイアウト実践 】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227 >
※ページを自力で作れれば、「今日中に告知ページを作らないと」にも対応できるかも？

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< https://teqs.jp/column_tax/column_mori >