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になる。
(余白の計算をしなくてすむ)

関連記事

暇な女子大生は100万アクセスでアドセンス5万円らしい

暇な女子大生の収入は100万PVでアドセンス5万円らしい

暇な女子大生が馬鹿なことをやってみるブログの管理人が、yahoo映

no image

自分のホームページ作るときの種類と選び方

ある個人商店の方がホームページを作るというのでアドバイスをする内容を考

女性が借金やクレジット地獄に落ちる体験談を書いたブログ

女性が借金やクレジット地獄の体験談を書いたブログ

たまたまバンドの追っかけというキーワードでネットサーフィンしていたら、

twitterをlivedoorblogに自動投稿する方法

twitterをlivedoorblogに自動投稿する方法

弟が毎日せっせとtwitterをやっています。 twitterは

koko

アフィリエイトの契約解除は意識が薄いから

広告はURLを登録してから張ること。 片手間に空いた時間にちょこ

H22.7月現在アマゾンアフィリエイト結果報告と今後の展望について

H22.7月現在アマゾンアフィリエイト結果報告と今後の展望について

頑張って更新しているのです。だが記事数は増えてもアクセス数は横ばい

無料で簡単にyoutubeに猫動画をアップする方法

無料で簡単にyoutubeに猫動画をアップする方法

猫動画をyoutubeにアップしたいからマイクロソフトの無料のムー

Message

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

双子で偏差値92の東大生の天野兄弟の勉強部屋
林先生教え子の双子の天野兄弟の母、公文、スイミング×、英語は不要

いまでしょの林先生が自分の子供を東大に行かせる方法をテレ

5ヶ月検診のお土産
5ヶ月検診 診察の待ち時間が長く裸にバスタオルをかけて待っていると

5ヶ月検診に行ってきました。 無事にクリアしました。こ

赤ちゃん本舗で手形や足型を記念に撮ってくれ
赤ちゃん本舗のハーフバースデー感想と手形や足型を記念にとってくれる

赤ちゃん本舗のハーフバースデーに行ってきました。 無料

no image
特許:城跡を1/1お城風船で期間限定イベントに変える

集客のアイデア。 城跡ってあるじゃないですか。跡地。

0歳のこどもチャレンジの値段、特典のジムの感想
0歳のこどもチャレンジの値段、特典のジムの感想

先輩ママたちから評判のベネッセのこどもチャレンジ。 い

→もっと見る

  • いいだしっぺ(これでいいだ)
    ブログのもくじ 私のプロフィール
    現代の幸福論に挑戦しています。
    ウクレレブログ好き。

PAGE TOP ↑