サイタWeb・デザインスクールHTML/CSS入門講座東京 HTML・CSS・Wordpress講座 スクールブログ スマホ用のサイ...

スマホ用のサイトってどうやって作る?

今日は昨日に比べカラッと晴れているので洗濯物がよく乾きそうです。
都内は32度超えですが…

今日はスマホサイトのデザインの話。

「スマホ用のサイトってどうやって作るんですか?」
この質問はよく初心者の質問として上がります。

答えは以下の2つ。

1. 見ている人の環境(スマホとかPCとか)をプログラムで調べ、表示するページやコンテンツを出し分ける
2. 見ている人の画面サイズに合わせCSSでデザインを変化させる

1の方法はプログラムを用いるので敷居が高いですが、
2の方法はHTML+CSSを学べば作ることができます。


簡単な例を示します
====================================
【HTML】

<p>初心者のためのHTML+CSS講座</p>


【CSS】

/* 共通(スマホ用)のスタイル */
p {
color: blue;
}

/* タブレット、デスクトップ用のスタイル */
@media (min-width: 768px) {
p {
color: pink;
}
}

====================================
この例では、

▼画面サイズが767px以下の場合(スマホなどの画面サイズ)
・文字の色:ブルー

▼画面サイズが768px以上の場合(一般的なタブレットの画面サイズ以上)
・文字の色: ピンク

ということをやっています。
画面サイズが768px以上の環境では後に書いてあるスタイルのほうが優先されます!

基本的にはこれだけ。

細かいこともありますが、これをどんどんレイアウトなどに応用していくことで
スマホ/PCのデザインを切り分けていくことができます。

またスマホ用のスタイルを先に指定しているので、
「モバイルファーストなCSSの記述」なんて言われたりもします。

こう見れば、スマホ用のサイトを作ると言うよりは、
「いろんな画面サイズにサイトデザインを対応させる」
といったほうが正しいかもしれませんね!

これを「レスポンシブウェブデザイン(RWD)」と言います

・レスポンシブ:いろんな画面サイズに応答して(対応して)
・ウェブ:ウェブの
・デザイン:デザインを変化させる

ということでございます!
ちなみに「レスポンシブル(責任)」ではありませんよ〜(よくあるミスです 笑)


それではまたー

 

(2018年7月10日(火) 17:17)

前の記事

次の記事

この記事を書いたコーチ

業界経験20年!現役ウェブデザイナーが1から10まで丁寧に解説します

新着記事

猛暑が続いてる日本列島。 水分補給しつつ日々コーディングをやっております。 本日はWordpressのテーマづくりについて WordpressはHTML・CSSがわからない初心者〜プログラムをゴリゴリ書ける上級者まで様々なレベルの人が使っています。世界中の30〜40%のサイトはW...

本日はどんよりな都内でございます。ムシムシしますね〜 本日はHTML,CSSのフレームワークと呼ばれるBootstrapについて。 Bootstrap Ver.4が先ごろ出ましたが、HTML、CSSなどを勉強しているとよく出てくる Bootstrapってなんでしょうか? あ...

今日は昨日に比べカラッと晴れているので洗濯物がよく乾きそうです。 都内は32度超えですが… 今日はスマホサイトのデザインの話。 <i style="font-weight: bold; font-style: oblique; font-size: 1.25rem;">「スマホ用...

今日は妙な天気な東京でございます。 暑いことには変わりはないですが(;´∀`) さてレッスン会場についてですが、 サイタではカフェや講師自宅がメインのレッスン場所というパターンが多いですよね。 私のレッスンでは現在、新宿、川崎であれば当方のレンタルオフィスがあるので そこのラ...

都内は晴れて今日はとても暑いですね (;´Д`)<あち〜 今日はホームページを作るときの2つのアプローチ 1.作りたいものがすでにある 2.ホームページ作成を基礎からしっかり学びたい それぞれ学習のスタンスが違ってくると思います。 ==============...

レッスン無料相談窓口のご案内

サイタでは、HTML/CSSレッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ