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

課題のレスポンシブWEBデザインについて

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

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

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

本日は先日お出しした課題の中で、
サイトデザイン課題につきまして
様々なアドバイスをさせていただきました。

一通り、サイトデザインを作って、
デザインを基にマークアップまで
できるようになってきましたね!

流石です!
この感じで
どんどん進んできましょう!


デザインの方は、
クライアント様にお出しできる
レベルになってきています。

最初は
色々なサイトの良いところを
どんどんマネして作って、
自分のものにしていきましょう。

そうすると自然に
ご自身の中でパータン数が増え、
どんどんデザインが楽になってきます。


マークアップの方は、
今後のことを考えますと
モバイルファーストの書き方を
マスターしていきましょう。

現在のお仕事の市場も考えますと、
圧倒的にレスポンシブWEBデザインを
求められています。

また見ていただけるユーザさんも、
スマホでサイトを見ている方が
7割を超えているというデータもあります。



【レスポンシブWEBデザインの3つの技術】

レスポンシブWEBデザインは、
下記の3つの技術によって
表現することが可能になります。

・フルード グリッド
・フルード イメージ/メディア
・メディアクエリ

そして、
必ずmeta要素にviewportを
指定する必要があります。

プリントでお渡ししましたが、
下記の設定はGoogleで推奨しています。

<meta name="viewport" content="width=device-width, initial-scale=1">



【レスポンシブWEBデザインの画像】

準備する画像は、
Retinaディスプレイ対応にするため、
常に表示する2倍のサイズを用意します。

横幅はiPhone7/8を基準とし、
ブラウザサイズは375pxなので、
PSDでデザインする際は750pxでします。

デザインする際に気を付けておきたいのが、
「常に2倍になっている」
という点です。

ですので、
絶対に奇数のpxは
存在しなくなります。

PSD上でデザインを確認する際は、
表示を50%にして確認してください。

また、マークアップにおいて、
img要素に対しては
widthのみ100%をいれます。



【レスポンシブWEBデザインのレイアウト】

基本的にすべて%表記で行います。
但し例外として、
左右の余白にある場合は
pxにしてください。

また、
box-sizing: border-box;
とするとより組みやすいので、
親要素に記述しておいてください。

基本的に親要素の横幅依存で
各要素の幅を%表記で計算します。
このレッスンノートを書いたコーチ

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

新着レッスンノート

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

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

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

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

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

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta