サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート レスポンシブウェブデザインのマークアップについて

レスポンシブウェブデザインのマークアップについて

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

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

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

本日は前回作成しました
レスポンシブウェブデザインのデザインから、
マークアップした分を
チェックさせていただきました。

基本的には
ほぼほぼ完成してましたね!

あとは
デザインに照らし合わせて
細かいところを微修正していきましょう。

最初は分からない部分も
多いかもしれませんが、
1つずつこなしていきましょう。


特にマークアップに関しましては、
数をこなしていきながら、
改善改良を積み重ねることによって
上達していきます。

毎回毎回
マークアップされる際には、
何かしらの1つでもいいので
改良したい課題を持ちながら
作業を進めて頂くといいかもしれません。

そして出来上がった際には
まずは満足していただいて、
次に改良していきたい点を
2、3点見つけるようにしていきましょう。

そして
どんどん良いマークアップができるように
改善改良を行っていきましょう。



【ブレイクポイントについての考え方】

ブレイクポイントとは、
表示を切り分ける地点のことで
何個準備するかによって
作業工程が変わってきます。

今回の場合であれば、
480pxを境目にデスクトップと
スマートフォンの表示を変えました。

ですので、
479pxまではスマートフォン用なので
基本的には%単位でレイアウトしていきます。

480px以上はデスクトップ用なので、
基本的にはpx単位でレイアウトしていきます。


ですが、
480px~849pxの間に関しても
レスポンシブウェブデザイン化であれば、
もうひとつブレイクポイントを追加します。

480px~849pxにおいて
こちらも流動的になるように
基本的に%表記を使っていきます。

最初の頃は
作業と確認が大変になってきますので、
ブレイクポイントを少なめに作るといいでしょう。



【画像の切り分けについて】

ロゴの部分はできておりましたが、
メインビジュアルの部分はデスクトップも
スマートフォン用の画像でしたので、
こちらをお伝えしました。

画像にクラスをつけて対応するか、
あらたにDIV要素かP要素で囲ってあげて
クラスで対応するかになります。
このレッスンノートを書いたコーチ

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

新着レッスンノート

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

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

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

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

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

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta