サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート スマートフォンサイトを作る際のポイントについて

スマートフォンサイトを作る際のポイントについて

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

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

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

本日は、
先日お出しした課題のチェックと、
スマートフォンサイトを作る際の
ポイントをお伝えいたしました。

サイトのマークアップに関しましては
ほぼほぼサイト全体を
デザイン通りにできてきてますね。

細かいところは微修正を行っていけばよいので、
1つずつつぶして改良してきましょう。


あとはマークアップの数をこなせれば
よりよいソースが書けていきますので、
どんどん書いていきましょう。

改良していくポイントとしましては、
より少ない要素で囲み、
より少ないCSSを目指していくことです。

ぜひ1つずつ改善を
していってみてくださいね。



【スマートフォンサイトを作る際のポイント】

スマートフォンサイトを作る際には、
PCサイトを作るのとは別に
下記の5つのポイントがあります。


①必ずviewportを入れる。

②画像の幅を必ず100%にする

③スマートフォンの基準の幅を決める

④レイアウトは基本%表記にする

⑤タップする領域を意識する


[①必ずviewportを入れる。]

パソコンのディスプレイと
スマートフォンのディスプレイは、
ピクセル比という違いがあります。

このピクセル比によって
スマートフォンでサイトを見るとちっちゃかったり、
変に幅が切れたりすることがあります。

そのために必ずviewportが必要になります。

実は色々とviewportの設定ができますが、
下記の1つを丸暗記すれば問題ありません。

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


[②画像の幅を必ず100%にする]

今まで画像を使う際には、
必ず幅と高さを入れていました。

スマートフォンで画像を使う際には
横幅100%にするために、
width="100%"とする必要があります。

また、
スマートフォンサイトの共通なCSSとして
下記のCSSを追記しておきます。

img{
width: 100%;
height: auto;
}


[③スマートフォンの基準の幅を決める]

実はスマートフォンの横幅が
OSであったり、端末によって
若干違ってきます。

基本的にアンドロイドの
機種の横幅は360pxです。

iPhone5/SEは320px。

iPhone6/7/8/Xは375px。

iPhone6/7/8 Plusは414px。

徐々にiPhone5/SEは減ってきてますので、
幅基準は375pxとしましょう。


[④レイアウトは基本%表記にする]

先ほどみたとおりに
幅でも4種類ありますので、
どのスマートフォンで見ても
同じ比率にする必要があります。

ですので、
PCではpx指定でしたが
スマートフォンは相対的な
%表記にする必要があります。

%表記にするためには、
デザインする際に基準となる幅が
とても大切になります。

中には割り切れない数値もあるので、
できるだけ電卓を使って
計算をするようにしましょう。


[⑤タップする領域を意識する]

スマホは基本的に
指先でタップするデバイスなので、
リンクがある際に注意が必要です。

できるだけ誤タップを防ぐために
テキストリンク範囲を広げたり、
部分的にリンクを張るのではなく
全体的にリンクを張ることが必要です。

実際にはスマホでチェックしますが、
事前にChromeのスマートフォンの表示で
透けてる黒丸を目安にしましょう。
このレッスンノートを書いたコーチ

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

新着レッスンノート

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

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

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

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

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

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

HTML/CSS情報

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

twitter

HTML/CSSの先生

@DTPCyta