puzzel.jp – webdesign & photographic
こんにちは！
３日くらい前にメディアクエリ化をしました。
メディアクエリとは、簡単に言うと１個のHTML（index.html）でPC用サイト、iPhone(スマートフォン)での表示を変えるというものです。
実際にスマートフォンで見なくても、ブラウザで小さくしていくと小さいサイズでも最適化されたものが表示されると思います。（iPhone4基準で作ってしまったので、3GSなど他の端末だときちんと表示されないかもしれません。
既存のHTMLを使う場合は、<head>に１行付け加えます。
<meta name="viewport" content="width=device-width" />
CSSの方ですが(style.css)に
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 800px) {
/* ここにスマートフォン用のCSSを記述します */
}
を最終行に追加します。
CSSの中身は
#pagetop {
width: 480px !important;
}
/* ページ全体の要素のfloatをなくし、最大サイズを指定します。 */
#pagetop * {
float: none !important;
max-width: 480px !important
}
header {
margin: 0 !important;
padding: 30px 0 0 0 !important;
}
h1 {
width: 200px !important;
display:block !important;
margin: 0 auto 30px auto !important;
height: 220px !important;
overflow: hidden
}
h1 * {
width: 100% !important;
}
#headernav {
padding: 0 0 0 20px;
width: 460px;
border-bottom: 1px solid #eee;
}
.headerline,.nav2,.nav6,#social {
display: none
}
.nav5 {
border-right: 1px solid #f0f0f0
}
#slides {
height: 150px !important
}
nav #headernav {
overflow: visible
}
nav #headernav li , #footermenu nav li{
float: left !important
}
#contents {
margin: 40px auto 0 auto !important
}
.bgcont {
padding: 0 !important;
}
.aside{
width: 90% !important;
margin: 10px;
}
#footermenu p {
overflow: hidden
}
.pagetop {
position: absolute;
top: 25px;
left: 0px;
}
#contents .content {
width: 90% !important;
margin: 20px !important;
}
.contentbody a img {
width: 100% !important;
}
と最適化されるように記述していきます。
それほど難しくないので、ペつファイルを作りたくない場合や面倒な場合はメディアクエリを使ってみてはどうでしょうか。
この記事にコメントする