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

関連記事

UAC

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

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

アメーバブログは芸能人を集める事になぜか成功している

アメーバブログは芸能人を集める事になぜか成功している

アメーバブログで芸能人ブログがどんどん増えています。 他のブログで日

プロブロガーになるよ

プロブロガーになるよ

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

サイド自由欄の設定方法(楽天ブログ

サイド自由欄の設定方法(楽天ブログ

ちょっと悩んだので一応メモ。 サイド自由欄の設定方法は、

私がWEBデザイナー時代に心がけていたアクセスアップ方法

WEBデザイナー時代に心がけていたアクセスアップ方法

もう10年ちょっと前の話ですが、その頃は時代の最先端だったと思います。

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

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

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

アメーバブログの上部の広告が邪魔で記事が読めない

アメーバブログの上部の広告が邪魔で記事が読めない

寺田次郎先生の七転八倒ブログを15インチのディスプレイのパソコンで

Message

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

耳の穴にニキビができて痛い。写真あり
耳の穴にニキビができて痛い。写真あり

最近耳の穴が狭くなってきた。 そして触ると痛い。

痰吸引で介護者の不眠
目の下の隈にも効果あり!乾燥肌に塗る順番はローション>クリーム>ワセリンです

乾燥肌にローションをおすすめしない理由はすぐ乾くから

テレビでやっていたタオルで片足ずつ前屈がかなり効いた
テレビで体が硬かったのに1時間でこんなに柔らかくなったは嘘の理由

毎日、朝仕事に行って夜帰ってきて夕食作成 子供をお風呂

2018年のミキハウス1万円福袋の中身ネタバレ
2018年のミキハウス1万円福袋の中身ネタバレ

2018年1月1日発売のミキハウスの福袋を大みそかに購入

馬見丘陵公園イルミは立地的には香芝インターもしくは法隆寺インター
奈良の穴場無料イルミネーション馬見丘陵公園は駐車場もタダ

馬見丘陵公園に夜に行ってきました。 なぜって、無料

→もっと見る

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

PAGE TOP ↑