サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート レスポンシブウェブデザインを作るためのポイント

レスポンシブウェブデザインを作るためのポイント

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

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

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

本日は、
前回にお出しした課題について
改善したいポイントを中心に
お教えいたしました。

レスポンシブウェブデザイン化する際に、
下記の2つの方法があります。
・デスクトップから先に作る
・スマートフォンから先に作る

実は難易度として高いのは、
デスクトップから先に作って、
レスポンシブ化していく方です。

今回は、
デスクトップのデータから
レスポンシブ化していったので、
少々難しかったかもしれませんね。

次回デザインを作っていただくのですが、
スマートフォンから作った方が簡単ですので
ぜひ1つずつこなしていきましょう。



【デザイン作成について】

レスポンシブウェブデザイン化するために
デザインを作成する際に
注意しておきたいことがあります。

まずは、
スマートフォン時のデザインを
実際のピクセルの倍に作ります。

大体iPhone6/7/8が
現在の横幅基準になるので、
375pxの倍の750pxで作ります。

基準幅の倍で画像を作っておくと、
スマートフォンで見ると
きれいな画像でみることができます。

その他にも、
フォントサイズや空間の値も
2で必ず割り切れるように、
奇数ではなく偶数の値にします。



【単位をpxにするのか、%にするのか】

左右にページ全体にスペースをとる場合は、
どのディバイスでも同じサイズするために
%ではなくpxにします。

2分割や3分割などする際や、
同じサイズ割合などで表示する場合は、
%にするように計算して行います。


pxか%にする基準を
下記のように覚えておきましょう。

どのディバイスでも同じサイズにする場合は、
単位をpxにします。

どのディバイスでも同じ割合で表示したい場合は、
単位を%にします。
このレッスンノートを書いたコーチ

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

新着レッスンノート

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

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

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

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

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

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta