CSSに追記+変更だけでレスポンシブルにした昔のサイト

公開日: : 最終更新日:2016/04/18 インターネット

最近の私のサイト作りはまったく成果はでないけど、楽丸でコンテンツサイトを作ることです。楽丸はおそらく日本一簡単なホームページ作成ツールです。私は確か3万円以上出して正規ユーザーとして購入しましたが、情報商材なので一般販売はされていません。
昔楽丸で作ったサイトの自作テンプレートをレスポンシブデザインに変更してみました。
要点だけCSSに書き加えるだけで簡単にレスポンシブルになります。

CSSに追記+変更するだけで昔のサイトをレスポンシブルにした
そもそもなぜレスポンシブルにする必要があるのか?というと、理由は簡単です。
スマホの場合、広告の面積が増えるからです。
今後のために要点だけまとめました。
レスポンシブルはスマホの場合、広告の面積が増える

まずレスポンシブルとそうでないサイトを見てみましょう

レスポンシブルではないサイト

未経験で医療事務になる方法

レスポンシブルなサイト

ナースの不満で転職
眼科勉強会資料
2週間で沖縄結婚式準備ブログ

ウインドウサイズを変えてレイアウト変わるほうがレスポンシブルサイトです。
この変更は以下の修正点を追加しただけで修正しました。
これを使ってサイトを量産だw!
(結局しないんですけどw)

注意レスポンシブルになるのは横だけ

縦も可能(height=100%で作れば可能、divはheight=calc()を使用する)だけど、縦前提に作らないといけないからなしの方向で。

大本のhtmlファイルに
<meta name=viewport content="width=356">
を追記。
これでモバイル時に横幅が強制指定される。

<meta http-equiv="X-UA-Compatible" content="IE=8" />
を削除する。(上記があるとxhtmlでcssの@mediaが動かない?)

CSSに追記+変更するだけでレスポンシブルに!

画像をレスポンシブル

img {
max-width: 100%;
height: auto;
}

横をレスポンシブルにする方法

width: 831px;

width:100%;
max-width:831px;

背景画像もレスポンシブルにする

background-size: 100% auto;
(レイヤーなどは縦にはレスポンシブルにならない)

左右の振り分けは絶対値ではなくフロートへ

私はいつからか、縦横の振り分けは絶対値でやってました。
float: left;
フロートにすることでウインドウサイズにより動くようになります。

そして忘れちゃ行けないサイズ再指定

これをしないと、ウインドウが変わってブロックが崩れたときに横幅が100%になりません。

@media screen and (max-width: 831px){
#left{
max-width: 100%;
}
#right{
max-width: 100%;
}
}

フッターはちゃんとクリアしておく

clear: both;
float: none;

便利だったボックスサイジング

box-sizing: border-box;
これを追記するだけで、パディングとボーダーが合計サイズに含まれるので、
余白を設定しても、830=570+260のみの計算でOKになる。
(余白の計算をしなくてすむ)

ほかにもこれ読んでみませんか?

使ってないYahoo!プレミアム会員はいいことある?

プレミアム会員はヤフオクの出品で使うだけ。 今は面倒で全然使っていな

ガラケーの予測変換で書くフミコフミオのブログ

最近大好きなブロガー、フミコフミオの秘密。 あの執筆スタイルは携

Message

メールアドレスが公開されることはありません。

時代は光じゃなくホームルーターだな。

no image
答えの出ない問題を複数に聞こえるところで質問するという、おばちゃんたちの迷惑行為

最近、答えの出ない問題を自分を含めた複数に聞こえるところ

no image
行く気マンマンと満タンとマンマについて

嫁が外食が好きで最近昼食は外食ばかりですが、4歳息子が、

保険証 職場 ばれる
保険証 職場 ばれる

保険証は国民保険なら国民保険加入義務が有る。 今回

火災が発生したとき、または発覚したら 落ちついてマネージャーかフロントにすぐ連絡してください 大声で叫ぶか音を立てて近くの人に知らせてください お部屋から出られるときは必ずドアを閉めてください(火や炎が広がるのを防ぐことができます)
安全の手引き この手引きは非常時の説明書です。

安全の手引き この手引きは非常時の説明書です。

no image
奴隷は単純思考、オウム真理教はあなたの財産を狙う宗教詐欺です

オウム真理教はあなたの財産を狙う宗教詐欺です。 最近の

→もっと見る

  • これだブログ
    ブログのもくじ 現代の幸福論に挑戦しています。
    ウクレレブログ好き。

PAGE TOP ↑