サイタ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まで丁寧に解説します

新着記事

ウェブサイトを作成すると、今度は実際にサーバーにアップロードするという作業があります。 ウェブサイトを全世界に公開してみんなが見れるようにするわけですね。 レッスンに来ていただいてご希望であれば一定期間使えるサーバーをお貸し致します。 ※ドメインやアドレスは決められません。 ※...

HTML, CSSを一通りマスターしたら挑戦してみたいSass。 Sassって何? という方はいいところに来ましたw CSSをもっと楽に書きたくありませんか? そう思ったらSassです。 SassはCSSを楽に作るための言語です。 短く、効率的に書いてCSSを作っち...

最近よく「Wordpress1日講座」というのを見かけます。 「Wordpressでサイトが1日で完成しちゃう」 「独自テンプレートを使って1日でサイト完成」 という謳い文句で講座を開いている団体さんや、個人の方を見かけます。 Wordpressの全貌や、何ができるかをざっくり...

先々週からこちらで講義開始いたしまして、体験レッスンの申し込みいただき大変ありがたく思います。 普段も講義(大人数)を行っているのですが、 サイタではプライベートレッスンのため、生徒さんのペースに合わせることができるので、 「ピンポイントにわからないところを教えられる」 という実感...

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

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

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

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ