出張パソコンサービス わいわいPC.

電話:090-3300-4121 メール:mail@y2pc.net

わいわいPC.ブログ

 

calendar

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< May 2018 >>


 

categories


 

archives


 


 

ウェブサイトのレスポンシブ化:覚書 2

先の記事 ウェブサイトのレスポンシブ化:覚書 では、サイトを印刷するときに不具合が生じるので、HTMLではなく1つのCSSで画像幅によるスタイルを定義する方が良い。

HTMLは<head>〜</head>内に下記のような一般的な styleseetの指定をする。

<link href="css/styl.css" rel="stylesheet" type="text/css" />

 
■韻弔 styleseet で下記のように記述する。

@charset "utf-8";
/*============================
共通部分
============================*/
img {
          max-width: 100%;
          height: auto;
          width /***/:auto;
}
table {
          table-layout: fixed;
          width /***/:auto;
}






/*==================================
●PC用のスタイル(画面の横幅が880px以上の場合)
==================================*/
body {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
 font-size: 14px;
 color: #4a452a;
 margin: 0px;
 padding: 0px;
 background-image: url(../img/bg_body.gif);
 background-repeat: repeat;
}
h1 {
 font-weight: normal;
 color: #ffffff;
 background-color: #00a1e9;
 font-size: 10px;
 margin: 0px;
 padding: 0px;
 height: 12px;
 line-height: 12px;
}
h2 {
 color: #ffffff;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 5px;
 font-size: 20px;
 line-height: 35px;
 background-image: url(../img/bg_h2.gif);
 background-repeat: repeat-x;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 0px;
 width: 100%;
 display: block;
 float: right;
}






/*==================================
●tablet.css 画面の横幅が641px〜879px(タブレット対応)
==================================*/
@media (max-width:879px) and (min-width:641px){

body {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
 font-size: 15px;
 color: #4a452a;
 margin: 0px;
 padding: 0px;
}
h1 {
 font-weight: normal;
 color: #ffffff;
 background-color: #00a1e9;
 font-size: 12px;
 margin: 0px;
 padding: 0px;
 height: 14px;
 line-height: 14px;
}
h2 {
 color: #ffffff;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 5px;
 font-size: 20px;
 line-height: 35px;
 background-image: url(../img/bg_h2.gif);
 background-repeat: repeat-x;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 0px;
 width: 100%;
 display: block;
 float: right;
}






}


/*===============================================
●smart.css 画面の横幅が640px以下(スマホ対応)
===============================================*/
@media (max-width:640px){

body {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
 font-size: 14px;
 color: #4a452a;
 margin: 0px;
 padding: 0px;
}
h1 {
 font-weight: normal;
 color: #ffffff;
 background-color: #00a1e9;
 font-size: 10px;
 margin: 0px;
 padding: 0px;
 height: 12px;
 line-height: 12px;
}
h2 {
 color: #ffffff;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 5px;
 font-size: 16px;
 line-height: 37px;
 background-image: url(../img/bg_h2.gif);
 background-repeat: repeat-x;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 0px;
 width: 100%;
 display: block;
 float: right;
}






}