レスポンシブ・ウェブデザイン

Published


前から憧れていたレスポンシブサイト、作れました!
今回はサーバーやドメインを取得したので見れるようになっています。

今回作ったサイト://mkasumi.com/

■始めにやろうと思ったこと

端末によって対応させるCSSの指定
画像サイズの可変


■最終的にやったこと

メディアクエリー
画像サイズの可変
javascript
FTPサーバー
サーバー
ドメイン
SEO対策

■後から思いついたこと

HTML5
CSS3でシャドウとかつけたい。

こうみると、作りながらやろうと思ったことがすごく多いなあ、と自分なりに思います。
せっかくサイト作るんだから他のこともやってみようと欲張った結果ですね。
いっぱい書きましたが結局は、レスポンシブサイトを作るにのに必要なことは、始めの端末によって対応させるCSSを指定する方法と、画像サイズの可変する方法の二つだと思います。

◇端末によって対応させるCSSを指定する方法

端末によって対応させるCSSを指定する方法は、メディアクエリーというものを使いました。
メディアクエリーって名前を知らなかっただけで、既にbootstrapで使っていました。
jQueryみたいになにかダウンロードするのかと思ったんですが、CSS3で追加されたものみたいです。
CSSすごいなあ。

◇画像サイズの可変する方法

画像サイズの可変する方法は、私流ですが、imgのwidthをautoとか%で指定しました。
それで、メディアクエリーを使って端末ごとにまたwidthをしていしたりしてちょうどいい感じにすることができました。
自分で実際にやって、何かもう少しいい方法がある気がするので、もう少し勉強してみようかなと思います。
今回は他の方のコードとかを見ていないので、他の方のコードも見たいです。

レスポンシブに対しては以上です。

でも私が一番時間を割いたのは実はjQueryなんです。(でもなぜか今起動してません!サーバーにアップする前はできてたのになあ…。)
時間を割いた理由は、レスポンシブ対応のものを見つけるのが大変だったことです。
なんとか普通のlightboxでもコードを書き加えれば大丈夫かなと思ったのですが、無理でした。
いろいろ探した中で、こちらのfancyBoxさんを使わせてもらいました!
fancyBox(http://www.fancyapps.com/fancybox/)
レスポンシブに対応していますし、個人利用はお金をとらないということだったのでこちらに決めました。

他にもSEO対策とかよく聞いて、気になっていました。
できているのかちょっと自信無いですが、やってみました!

関連している記事

著者について

森田 かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。