個人的によく使うCSS

 

padding余白を横幅に含める

*{
  word-break: break-all;
  overflow-wrap : break-word;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

 

スムーススクロール

html{
  scroll-behavior:smooth;
}

 

 Load時にページをふわっと表示する

body {
  background: #ffffff;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

 

 

レスポンシブ対応

img{
  max-width:100%;
  height:auto;
}

 

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

 

Iphoneなどでテキストボックスなどにフォーカスを当てるとズームしてしまうのを防ぐには、フォントサイズを16px以上にするか、metaのviewportに、maximum-scale=1.0 を入れるかのどちらかになる。

 

 

よく使うソース

@charset "UTF-8";

*{
  word-break: break-all;
  overflow-wrap : break-word;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html{
	scroll-behavior:smooth;
}

img{
  max-width:100%;
  height:auto;
}

body {
	background: #ffffff;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  font-family:"メイリオ", meiryo, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック';
  color:#343434;
  line-height:1.5;
  display:block;
  font-size:18px;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}