BETA

ドットインストールの「はじめてHTML 」と「はじめてCSS」のコードをレスポンシブ対応させてみた(CSS編))

投稿日:2019-09-29
最終更新:2019-09-29

今日は昨日に引き続き「はじめHTML」と「はじめてCSS」のレスポンシブ対応のCSS編です。
styles.cssはこちら↓

body{  
  color: #333;  
  font-family: Verdana, Geneva, Tahoma, sans-serif;  
  margin: 0;  
}  
/*まずは画面サイズ375pxを基準に作成*/  

/* header */  
header{  
  width:100%;             /*width:100%を追加*/  
  padding:10px,10px;  
  background-image: url(../header.png);  
  height: 150px;                     /*150pxに変更*/  
  background-size: cover;  
  background-position: 50% 50%;  
  margin-bottom: 60px;  
}  
header ul{  
  margin: 0;  
  list-style: none;  
  padding-right: 10px;          /*padding-right:10pxを追加*/  
  text-align: right;  
}  
header li{  
  display: inline-block;  
  padding: 4px 8px;  
  font-size: 10px;        /*10pxに変更*/  
}  
header li >a{  
  text-decoration:none;  
  color: inherit;  
}  
header li >a:hover{  
  color: royalblue;  
}  
.current{  
  border-bottom: solid 4px royalblue;  
}  
/* section */  
section{  
  text-align: center;  

}  
section h1{  
  font-weight: normal;  
  margin-bottom: 8px;  
}  
section p{  
  font-size: 14px;  
  margin-top: 0;  
}  
.icon{  
  border-radius: 50%;  
  border: solid 5px white;  
  box-shadow: 0 0 5px gray;  
}  

/* .works */  
.works{  
  width: 300px;    /* 300pxに変更 */  
  margin: 60px auto;  
  border-bottom: solid 1px gray;  
}  

.works h1,  
.works p{  
  text-align: left;  
}  
.works section{  
  margin-bottom: 40px;  
}  
/* footer */  
footer{  
  width: 300px;          /* 300pxに変更 */  
  margin: 0 auto 60px;  
}  
footer ul{  
  margin: 0;  
  list-style: none;  
  padding-left: 0;  
  text-align: left;  
float: left;  
}  
footer li{  
  display: inline-block;  


}  
footer li >a:hover{  
  opacity: 0.6;  
}  
footer p{  
  color: lightgray;  
  font-size: 14px;  
  text-align: right;  
}  
/* ページトップアイコンの画像 */  

.circle {  
  color: rgb(190, 189, 189);  
  font-size: 50px;  
}  
/* ページトップアイコンのポジション */  

#back-to-top {  
  right: 5px;  
  bottom: 5px;  
  position: fixed;  
  z-index: 1;  
}  
/* about.htmlのsection */  

.about {  
  width: 300px;            /* 300pxに変更 */  
  margin: 0 auto 60px;  
}  

.about p {  
  text-align: left;  
}  
/* 画面サイズ320pxのメディアクエリを作成 */  

@media(max-width:320px){  
header{  
  height: 130px;  
}  
}  
/* 画面サイズ667px以降のメディアクエリを作成 */  

@media(min-width:667px){  
header{  
height: 240px;  
  }  
  header ul{  
    padding-right: 10;  
  }  
  header li{  
    font-size: 12px;  
  }  
  .works{  
    width: 400px;  
  }  
  .works img{  
   width: 400px;  
  }  
  footer{  
    width: 400px;  
  }  
}  

style.cssの主な変更点

  1. 画面サイズ最小337pxをメインにCSSを作成。
  2. 画面サイズ最大320pxのメディアクエリを追加。
  3. 元のデスクトップサイズのCSSを最小667pxのメディアクエリに記述。

先日のHTML&JQueryのコードと合わせて参考にしてみてはいかがでしょうか。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

いろんな言語のコードを紹介していきます。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!