スリーステップ♪レスポンシブサイトを創ろう!

Webをかじって3ヶ月
初心者エンジニアのお勉強ブログ

モニターの大きさの差異は当たり前にあることなので、widthを100%にしたりと色んな方法はありますが、昨今デバイスの大きさは多様化しており、全てに対応したサイトを作っていては、何十種種類とcssファイルを書かなければいけなくなります。

そんなことやってられっかい!!!と思うそんな人の為のレスポンシブっつっつっつっつっつっつっつ!!!

レスポンシブデザインを覚えれば今までの数分の一の労力で多機種にわたり閲覧可能なサイトが作れます!

ざっくりとレスポンシブサイトの説明をしましたが、大まかにはこの記事が非常に分りやすく、見ていただければメリット・デメリットと理解していただけると思います。

■参考サイト■

レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット

必読!5分でわかるレスポンシブWebデザインまとめ

大きくまとめると

1.コードを書く手間が減る
2.修正しやすい
3.SEOで今後有利になってくる

 

以上3点です。

では、どうやって創っていくのか??

■レスポンシブサイトを作ってみよう■

僕は、レスポンシブに関して全く無知の状態から、2時間で練習サイト作成できました。

(実質コーディングだけなら1時間かかってません)

1.下記サイトでレスポンシブデザインの概要を把握する

2.ドットインストールで動画見ながら勉強する

3.動画を復習しながらコーディング

というスリーステップで作成完了です!かんたん!

総時間は2時間!

 

ドットインストールとは?

3分動画でマスターする初心者向けプログラミング学習サイトです。HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができます。

レスポンシブデザインに関しては全部で14話。42分で完了です。

1.下記記事に目を通し、概略を理解。

①Webサイトのスマホ対応が必要な 3つの理由

②レスポンシブWebデザインについて知っておきたいこと【作り方入門編】

③レスポンシブWebデザインについて知っておきたいこと【コーディング編】

2.動画を見て、しっかり理解。

3.さてコーディング。

 

以上です!ざっくり?簡単にいうな?

ドットインストールさんの説明は本当に分りやすい!よくある説明サイトなど、動画のないものでも、開発環境等「そんなこと説明せんでもわかるやろ?」というスタンスのものが多く、非常に転用しづらいものがあります。。。

そんなサイトだと、特にhtmlに関しても初心者である僕はなかなか理解するのに時間がかかります(T _ T)

でも、そんな不安すらかき消してくれるのがドットインストールさん!

すごく勉強に役立ちますので、是非一度見てください!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です