プロフィール
Author:しらせ(HN)
とあるIT企業のインフラエンジニア
WindowsServer/Linux両方使います。
趣味でソフトウェアやWebアプリを作ってます。
※本ブログの内容はすべて個人の見解であり、所属する企業とは関連ありません。
連絡はTwitter(s3os7a)へ。
Twitter
カテゴリ別
工作(1)
デザイン(1)
カンファレンス(3)
XBオフ(1)
Splatoon(4)
WiiU(1)
マリオカート(10)
インターネット(8)
未分類(1)
[PR]
リンク
xebpsトップ
Blogトップ
来訪
36217 PV
Powered by
ふくさんぶつ Blog
インフラエンジニアしらせのIT遊びブログ。

【IT】ブログのレスポンシブ化が意外と簡単だった!
Date:2017/10/23 03:42:33
Category:インターネット


お疲れ様です。
しらせです。


長雨と季節外れの台風で家からで出られない日が続いていますね。
時間にも余裕があったので、今日は今ご覧のこのブログをレスポンシブデザイン化してみましたので報告です。


昨年にも一度iPhoneの画面に対応させようとして、Viewportやらcssらやらを勉強していましたが、どれも面倒で手を付けていませんでした。
調べてみたところ、今はもっと割と簡単にできそうということで再チャレンジ。


もくじ

1.ゴール
2.意味を理解する
 2.1.ハンバーガーメニューとは?
 2.2.Viewportとは?
 2.3.メディアクエリ(Media Queries)
3.実装する
 3.1.viewport
 3.2.ハンバーガーメニュー
 3.3.メディアクエリ
4.動作確認
 4.1.iPhone
 4.2.PC
 4.3.(おまけ)iPad


ゴール

・最低でもiPhoneに対応させたい。
・今のブログをそのまま使いたい。(変えるのが面倒)
・/mとかサブディレクトリで分けたくない。(メンテが面倒になる)


意味を理解する

ハンバーガーメニューとは?

よく、モバイルページの左上とか右上にある3本線のメニューですね。
@ITのサイトを参考にすると、こんな感じで左上にある三をクリックするとメニューが出ますね。
これで、小さいスマホの画面を効率的に使えます。
PCは画面が広いので不要ですが、モバイルでは是非とも使いたい機能です。

Viewportとは?

viewportをちゃんと理解する
こちらをご参照ください^o^;

メディアクエリ(Media Queries)

これは、便利。
画面の解像度に合わせてCSSが適用できる。
プログラミングでいうところのifとかswitchに似てます。
この解像度ならこのブロックを非表示とかできます。


実装する

viewport

まずは、viewport。
htmlファイル中のheadタグの中に以下の一文入れ込みます。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
これだけ。

ハンバーガーメニュー

ハンバーガーメニューは、サルワカくんのサイトから丸っとコピーして、上アンカーを入れたり、表示幅を変えたり、背景色を変えたりしました。
詳細はこちらを参考にどうぞw

メディアクエリ

今回は、iPhone用に960px以下のページと、961px以上のPC用ページの二種類を用意したい。
ということで、以下の三段構えで作成しました。
@media screen and (max-width: 960px) {
 …iPhone用に表示させるときのスタイル…
 …ここには参考としてコピーしたサンプルスタイルが入れ込まれます…
}

@media screen and (min-width: 961px) {
 …PC向けに表示させるときのスタイル…
}

body {
 …その他、共通で使うスタイル群…
etc



動作確認

iPhone

左上のメニューをタップすると、、、ちゃんとプロフィールが出ました!

PC

PCで開くと、確かにハンバーガーメニューは隠れている!

(おまけ)iPad

試にiPadでもやってみたら、横にするとちゃんとPC版で表示される!Good!


こんな感じで、やっぱりスマホに最適化されたサイトは見やすいですね。。。
他のサイトも順次直したいですね(´ω`)

以上、お疲れさまでした。


Views:82 この記事をツイート!



 次の記事 前の記事