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

関連記事

AUのレンタルモデムDL180Vに、無線カードWL54AGを差して使ってます

回線絞りはauone-adslの嫌がらせだ

auone-adslの回線が最近突然、回線落ちや速度低下になった。

youtubeやニコニコ動画をmpegやmp3、waveで保存

youtubeやニコニコ動画をmpegやmp3、waveで保存できるCravingExplorer

神聖かまってちゃんのyoutubeのPV版の曲をダウンロードするた

ike

ブログでプロでも半年に月5000円しか稼げないイケダハヤト事務所ワロス

イケダハヤトのブログ塾の方のブログ見てました。 馬鹿にできないイ

UAC

VISTAで画面暗転エラー画面+警告表示を消す方法

VISTA対応でないソフトを起動すると画面が暗転しエラー画面がでる

windows2000の起動画面

windows2000を最新にアップデートする方法

そもそもクリーンインストールされたwindows2000を渡されたとこ

プロブロガーになるよ

プロブロガーになるよ

お分かりの通り最近毎日更新しています。 生涯年収300万円の医療

猫がクーラーに登る

初心者がアフィリエイトで儲からないのは成功者の話を聞くから

初心者がアフィリエイトで陥る罠とは、FXしかり株しかり。 それは、「

Message

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

no image
大人の階段って何?学生食堂でバイトしてた話

20代後半から仕事がバリバリできるようになりストレス耐性

祝日の京都水族館のイルカショーは立ち見
朝に京都水族館、夕方に帰宅で昼寝にしたらよかった

息子と嫁と京都水族館でデートしてきました。 京都水

no image
子供に自分で選ぶ、決断する力をつける方法とは?

エア子育てシリーズ。 いろいろ妄想して、うちの息子をど

no image
特許:大手家電店がアマゾンや楽天に勝つ唯一の方法は電話で在庫販売サービス

電化製品の配送サービス。 電話すると持ってきてくれる。

no image
右と左、子供にどう教える?教え方10個

右と左。 意識し始める年齢は何歳ぐらいだろうか、2歳ぐ

→もっと見る

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

PAGE TOP ↑