MEMORANDUM

調べて知り得た情報をせっかくなのでメモしとく

CATEGORIES:CSS WORDPRESS
リセットCSSとレスポンシブ対応ベースHTML

Warning: Undefined variable $sc_Linkcard in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 146

Warning: Attempt to read property "title" on bool in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 229

Warning: Attempt to read property "description" on bool in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 235
Destyle.css - Opinionated reset stylesheet that provides a clean slate for styling your html.
https://nicolas-cusan.github.io/destyle.css/

スタイルシートは設定したはずがブラウザのデフォルト設定が効いてたりしてデザインが崩れてしまう。そんなことがないようにまっさらな状態から自分のスタイルを作るためのリセットCSS。

今まで使い続けていたのはこれだったかな。「Eric Meyer’s “Reset CSS”」

REFERENCE CSS Tools: Reset CSS
https://meyerweb.com/eric/tools/css/reset/

「destyle.css」は本当にまっさらになるらしい。

REFERENCE Destyle.css - Opinionated reset stylesheet that provides a clean slate for styling your html.
https://nicolas-cusan.github.io/destyle.css/

他にも色々あるがこれって公式？のリセットCSS？HTML5に適したものみたい。

REFERENCE
http://html5doctor.com/html-5-reset-stylesheet/

他にも探せば色々ある。最後は使い勝手の良いやつを選ぶ。自分でもカスタマイズしてしまうだろう。

以下はベタなレスポンシブ対応のベースHTMLとCSS。これを元に不要なボックスを削ったりスタイルや要素を追加させていき試行錯誤で完成形にする。こういうの作っておくといい。ボックスのカラー指定は確認用なので最終的には消す。

レスポンシブ対応ベースHTMLとリセットCSS

＜追記＞大事なの忘れてた。ヘッダーに入れるもの。機器がパソコンではない時どのように画面を表示するかを宣言。「width=device-width」はコンテンツの幅はデバイスの幅に合わせるよという意味。忘れずに入れておこう。

<meta name="viewport" content="width=device-width,initial-scale=1">
<!DOCTYPE html>
<html lang="ja">

 <head>
  <meta charset="UTF-8">
  <meta content="" name="description">
　<meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Webfont CDN -->
  <!-- //Webfont CDN -->

  <!-- Style -->
  <link rel="stylesheet" type="text/css" href="./css/リセット.css">
  <link rel="stylesheet" type="text/css" href="./css/サイトのスタイルシート.css">
  <!-- //Style -->

  <script type="text/javascript">
   < !-- //javascript

   //-->
  </script>

  <title>SAMPLE01</title>
 </head>

 <body>
  <!-- header -->
  <div class="page-header clearfix">
   page-header
  </div><!-- //header -->
  <div class="container01 clearfix">
   <!-- container01 -->
   <div class="container01-1">
    <!-- container01-1 -->
    container01-1
   </div><!-- //container01-1 -->
   <div class="container01-2">
    <!-- container01-2 -->
    container01-2
   </div><!-- //container01-2 -->
  </div><!-- //container01 -->
  <div class="container02 clearfix">
   <!-- container02 -->
   <div class="container02-1">
    <!-- container02-1 -->
    container02-1
   </div><!-- //container02-1 -->
   <div class="container02-2">
    <!-- container02-2 -->
    container02-2
   </div><!-- //container02-2 -->
   <div class="container02-3">
    <!-- container02-3 -->
    container02-3
   </div><!-- //container02-3 -->
  </div><!-- //container02 -->
  <!-- footer -->
  <div class="container03 clearfix">
   <div class="container03-1">
    <!-- container03-1 -->
    container03-1
   </div><!-- //container03-1 -->
   <div class="container03-2">
    <!-- container03-2 -->
    container03-2
   </div><!-- //container03-2 -->
  </div>

  <!-- footer -->
  <footer class="footer">
   footer
  </footer><!-- //footer -->
 </body>

</html>

幅960pxをディスプレイにセンター配置している。あとはディスプレイ幅で各種スタイルの設定を追加修正していく。入れ子にしたりいろいろやってぐちゃぐちゃにならないように。

@charset "utf-8";

/*	Bace
================================*/
body {
 margin: 0;
 -webkit-appearance: none;
 -webkit-text-size-adjust: 100%;
 font-family: ;
 font-size: 12px;
}

a {
 color: inherit;
 text-decoration: none;
}

a:hover {
 color: #bcbcbc;
 /* transition: 0.5s; */
}

/*float-clear
================================*/
.clearfix:after {
 content: "";
 clear: both;
 display: block;
}

/*Type
================================*/


/*PageHeader
================================*/
.page-header {
 position: static;
 margin-bottom: 0px;
}

/*	Container 上下
================================*/
.container01, .container02, .container03, .page-header, .footer {
 text-align: center;
}

.container01-1, .container01-2, .container02-1, .container02-2, .container02-3, .container03-1, .container03-2, .page-header, .footer {
 text-align: center;
 height: 200px;
 margin: 0px;
}

.page-header, .footer {
 background: #dbdbdb;
}

.container01-1 {
 background: #FFF744;
}

.container01-2 {
 background: #FFFA91;
}

.container02-1 {
 background: #2CCDFF;
}

.container02-2 {
 background: #23A4CC;
}

.container02-3 {
 background: #78DFFF;
}

.container03-1 {
 background: #FF6922;
}

.container03-2 {
 background: #FF9C6E;
}


/*===============================
	Less than 767
================================*/
@media (max-width: 767px) {

 /*　画面サイズが767px以下の場合ここの記述が適用　*/

}

/*===============================
	Over 768px
================================*/
@media (min-width: 768px) {

 /*　画面サイズが768px以上960px以下の場合ここの記述が適用　*/
 .container01:after {
  clear: both;
  content: "";
  display: block;
 }

 .container01-1 {
  box-sizing: border-box;
  float: left;
  padding-right: 40px;
  width: 70%;
 }

 .container01-2 {
  box-sizing: border-box;
  float: left;
  padding-left: 0px;
  width: 30%;
 }

 .container02-1 {
  box-sizing: border-box;
  float: left;
  width: 35%;
 }

 .container02-2 {
  box-sizing: border-box;
  float: left;
  width: 35%;
 }

 .container02-3 {
  box-sizing: border-box;
  float: left;
  width: 30%;
 }

 .container03-1 {
  box-sizing: border-box;
  float: left;
  width: 50%;
 }

 .container03-2 {
  box-sizing: border-box;
  width: 50%;
  float: left;
 }

}

/*===============================
	Over 960px
================================*/
@media (min-width: 960px) {

 /*　画面サイズが960px以上の場合ここの記述が適用　*/

 /*  Container
================================*/
 .container00, .container01, .container02, .container03, .page-header, .footer {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
 }
}

NOTICES

  • 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

PRIVACY POLICY

PROFILE

TO HEADER