Web・デザインスクールHTML/CSS入門講座レッスンノート HTMLとCSSの役割とレイアウトの変更について

HTMLとCSSの役割とレイアウトの変更について

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンお疲れさまでした!

本日は勤めておられる会社サイトにおいて、
日々更新の時にお困りな点を
重点的にお伺いしました。

また、
サイトレイアウトの変更や
レスポンシブサイト化するためには、
CSSがどうしても必要な点をお伝えしました。

一度に更新するためには、
DreamWeaverかシステムを
導入することもお伝えしました。



【HTMLとCSSの役割ついて】

HTMLは略称のごとく、
ハイパーなテキストですので
基本は文章の定義をしてるだけです。

ですので、
デザインやレイアウトを制御するためには
CSSがどうしても必要になります。


HTMLは文章を定義していますが、
本などを参考にしていただくと
よりわかりやすいと思います。

本は
「タイトル」「目次」「見出し」「小見出し」・・・
という構造で成り立っています。

これをサイトのページに置き換えると、
「サイトタイトル」「リンク・メニュー」「H2などの見出し」・・・
という構造になります。

どうしてもHTMLを書いていると
「どこが見出しになるのか」
「いま何番目の見出しなのか」
が分かりにくくなりますが、
大まかなことから少しずつ分解していくと
分かるようになってきます。


CSSは大まかに
「レイアウト」
「文字関係」
「背景関係」
の3つを駆使して書いていきます。

最初は覚えることが多いかもしれませんが、
1つずつ覚えて実践をしていくと、
意外に簡単にわかってしまいます。

あとは、
デザインと比べて頂いて
どのものを使うのかのパターンを
増やしていただくと
どのようなデザインもできます。


1つ大きな概念として、
HTMLもCSSも1つ1つは
四角の構造になっています。

デザインを作った際に、
この四角の概念を思い浮かべながら
HTML/CSSを書いていくと
意外に簡単に出来上がってしまいます。

これは慣れの部分もありますので、
少しずつ実践していきましょう。



【中ページのレイアウト変更について】

右側にメニューがあるレイアウトでしたが、
詳細ページの部分は右メニューなしのパターンについて
少しだけですがお教えいたしました。

まずは現状のHTMLとCSSを分析するために、
「右クリックで検証」
「Ctrl + Shift + I」
「F12」
のいずれかで解析をしました。

左側のコンテンツは
#pleft のIDが振られていて、
右側のメニュー部分は
#pright のIDが振られています。

ここで右のメニューをなくすために、
あらたなIDを振っていきます。

今回の場合は、
#pcenter のIDを新たに作って、
common.css に追加してきます。

#pcenter{
width:920px;
}

上記のように指定していただくと
コンテンツ部分はコンテンツ幅になり、
後は詳細を変えていきます。


1点だけ課題として
ページの見出し部分に
700pxの背景画像が使用されています。

右メニューをなくすのであれば、
コンテンツ幅に合わせる必要があるので
920pxの背景画像を準備する必要があります。



【作成に必要なソフトについて】

ヘッダー部分・メニュー部分・フッター部分を
1つ更新したらすべて変わるようにするためには、
システムを導入するか、
DreamWeaverを使うかになります。

また、
写真などの画像加工をする際には、
Photoshopなどのグラフィックソフトが必要です。

この2つのソフトを使用されるのであれば、
月額になってしまうのですが
AdobeCCのすべてを使う機能が
便利かと思います。

ぜひご検討してくださいね。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

初心者でもできるHTML・CSS入門講座
藤田佳 (HTML/CSS)

梅田/大阪・西宮(JR)・摂津本山・三ノ宮・元町・神戸・垂水・西宮北口・西宮(阪神)...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta