モダンブラウザ(主にChrome)のシェア拡大、それに伴うInternet Explorerの利用減少、そしてEdgeのChromium化…。
iPhoneやAndroidなどのスマートフォンをはじめ、PCサイトでもHTML5によるWEB制作が主流となっています。
ブラウザが対応してきたことだけでなく、SEO対策や管理の簡便化にレスポンシブWEBデザインは重要なため、HTML5+CSS3でのコーディングは一般化しています。
HTML5とCSS3等について、簡単にまとめたサイトを作りました。
面倒くさい時のコピペ用ですので、本格的なコーディングのことは書いていません。解説もほぼありません。あしからず。
また、サイト内で使われている用語についても、知り合い間で伝わる言い方をしているかもしれませんがスルーしてください。
厳密な記述方法、用語などについては、専門書や学校で教わることをおすすめします。
簡易初期設定
HTMLの書き出しとCSSの初期設定(ブラウザリセットやちょっとした設定)です。
コピペして使ってもらっても構いませんが、簡易ですので、必要に応じて設定を付け加えてください。
HTML5ベース(最小限)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no"> <title>タイトル</title> <meta name="description" content="抜粋内容"> <link rel="stylesheet" href="style.css"> </head> <body> コンテンツ </body> </html>
5行目・・・ビューポート
6行目・・・iPhone等で電話番号と認識される文字列を自動でリンクにしない
CSSベース(初期化含む)
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} br {letter-spacing:0;} ul,li {list-style:none;} img,a img {border:0; text-decoration:none; vertical-align:top;} mark {background:#ff0; color:#000;} b,strong {font-weight:bold;} table {border-collapse:collapse; border-spacing:0;} td,th {padding:0;} hr {box-sizing:content-box; height:0;} button,input,optgroup,select,textarea {color:inherit; font:sans-serif; margin:0;} button {overflow: visible;} button,select {text-transform:none;} button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button; cursor:pointer;} input[type="checkbox"],input[type="radio"] {box-sizing:border-box; padding:0;} textarea {overflow:auto;} body { color:#333; line-height:1.0; text-align:center; zoom:1; } a {background-color:transparent; outline:0;} a:link {color:#0000ff; text-decoration:underline;} a:visited {color:#0000ff; text-decoration:underline;} a:hover {color:#ff0000; text-decoration:none;} a:active {color:#ff0000; text-decoration:none;} /* Clearfix */ .cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;} .cf {zoom:1;}
※Clearfix部分はfloatを使用しないのであれば省略