サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート レイアウトとClearFixとPhotoshoの初期設定

レイアウトとClearFixとPhotoshoの初期設定

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

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

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

本日はお出しした4回目の課題について
より良いマークアップに仕方をお教えし、
Photoshopの初期設定を行いました。

まずはできる範囲のことから始めていき、
1つずつ改善改良の積み重ねで
ドンドンとスキルを磨いてくださいね。


レイアウトをデザイン通りに組む
ということはほぼできていましたので、
あとはきれいなソースを目指していきましょう。

最初からベストを目指すのではなく、
常に現状のスキルからベターを選びながら、
ぜひご自身でも色々と調べてみてください。

もちろんお教えすることも可能ですので、
ぜひメッセージなどを活用して
どんどんパターンを吸収してくださいね。



【レイアウトとClearFixの関係】

前回お出しした課題のレイアウトは、
今でもよく使われる2カラムの
レイアウトでした。

2カラムではよくコンテンツが、
メインとサイドメニューの2つに
分かれてるパターンが多いです。

そして2カラムレイアウトは大概、
float をフルに活用して
左右に分けています。


float を使うとなれば、
必ず無しからのfloatを
解除する必要が出てきます。

そこで便利なCSSが
「ClearFix」
となります。

1つだけ注意していただきたいのは
この便利な「ClearFix」は、
要素の最後にかかるということです。


マークアップして間もない頃は、
レイアウトをするにしても
色々と要らない div を多用しちゃいます。

特に意味が全くなかったり、
「ClearFix」を使うためだったりと
色々と増やしてしまう傾向があります。

最初のうちは構いませんが、
徐々に1つずつく改善改良をしていって、
できるだけ少ないHTML/CSSを目指しましょう。


例えば今回お出しした課題で言えば、
わざわざ <div class="cleafix">
を作らないでレイアウトします。

<div id="wrap">
<div id="header" class="clearfix"></div>
<div id="content" class="clearfix">
<div id="index_slider"></div>
<div id="main"></div>
<div id="side"></div>
</div>
<div id="footer" class="clearfix"></div>
</div>

こんな感じで、
まず大まかなレイアウトのなかで
効果的に「ClearFix」を
使っていきましょう。



【Photoshopについて】

WEBサイトをデザインするとき、
使われるデザインソフトは
実は色々とあります。

中にはDTP関連の人であれば、
Illustratorを使ったり…

最近のアプリ作成であれば
SKETCHやXDのソフトも…

ですが、
圧倒的にPhotoshopでデザインすることの方が
まだまだ現状で多いと感じてます。

また、
マークアップする際にも
どうしてもPhotoshopの操作が必要です。

ですので、
小さいことから、できることから少しずつ
Photoshopに慣れ親しんでいきましょう。


次回から
簡単なボタン作成をして、
どんどんバリエーションを増やしていき、
徐々にバナー制作をしていきます。

バナー制作が出来ましたら、
少しずつトップページのデザイン作成を
行っていきます。

ぜひ楽しみにしておいてくださいね。
このレッスンノートを書いたコーチ

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

新着レッスンノート

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンお疲れさまでした! 本日は、 ローカルでWordPressを使って作成したWebサイトを 本番サーバに上げる方法や、 お客様とのディレクションについて お話しさせていただきました。 【Webサイトを本番サーバに上げる方法】 基本的に、 データを上げる...

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta