Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

HTML5のひな形

by · 2019年4月18日

Webサイトを作るぞ！って時に１から<html></html>などとタグを書いて行く人はいないと思います。

もちろん勉強のために最初は書くかも知れませんが、それも理解してしまえば書く必要はありません。

昔は何も見ずに書けるように１から書いて覚えろ！みたいな根性論のような時代がありました。
それも今や昔の話しです…

弊社はHTMLのひな形をgitlabで社内共有しています。
CSSの記述方法や使用するライブラリなどを更新されたときにわかるように、新しく作成するときに最新の状態に出来るようにするためです。

その弊社で使っているひな形を公開します。そんな大したモノではないので(^_^;

HTMLのひな形

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<title>default title</title>
		
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="shortcut icon" href="/images/favicon.ico">
		<!-- CSS import -->
		<link rel="stylesheet" href="./stylesheets/import.css">
		<!-- bootstrap4 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

		<header>
			<nav></nav>
		</header>

		<section>

		</section>

		<footer>
			
		</footer>

		<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	</body>
</html>

弊社はWebサイト作成にBootstrapとjQuery使用しています。

システムが入る場合はここにVue.jsが加わる感じです。

細かい説明は省きますが、ちょっと変わっているのはimport.cssでしょうか。

<link rel="stylesheet" href="./stylesheets/import.css">

このファイルの中身はこんな感じです。

@charset "utf-8";

/* Imported Styles
----------------------------------------------- */
@import url("default/styleReset.css");
@import url("default/useful.css");
@import url("common.css");
@import url("content.css");

defaultの中に書いているCSSは基本的に弄りません。

useful.cssが少し書き足されるぐらいでしょうか。
useful.cssは自社オリジナルのbootstrapのようなイメージです。

自社でよく使うCSSがまとめられています。

なぜimportするのか

別にHTMLのhead部分につらつらとCSSの読み込みを書けば良いのですが、静的なWebサイトで後からCSSの読み込みファイルを増やす事があった場合、全ファイルを更新する必要がありますよね？
それは手間ですし、なんらかのミスが起こる可能性もあります。
そういった手間を省くためにimportしています。

最近はページの表示速度で検索結果の順位を考慮するとGoogleも言ってますし、importしない方が良いとも言えます。

そこらへんは計測したわけではないのでimportがどれだけ遅延するかはわかりませんが、こういう手法もあるんだよ。程度で知っておいて頂ければいいかなーと思います。

まぁ基本的に後からCSSを追加すること自体まれですが、何年も運用していくと過去のCSSを触らず上書きして対応するということがあります。
本当はそのようなことをしない方がいいですけどね…

何にしろ運用の便宜上こうなった…と言った形です。

もっと良い方法があるかもなので教えて頂けると幸いですζ(*’ω’*)ζ

styleReset.css

reset.cssはネットで検索して頂いた方が最新で良いのが出てくると思います。

そもそものHTMLタグに付いているCSSを初期化するreset.cssは非常に便利です。

これもネットで出回っている物に継ぎ足しして使っているので人様に見せるほどのモノではないかも…

@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none;font-size:0px}
li{font-size:13px}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,
body:before,div:before,dl:before,dt:before,dd:before,ul:before,ol:before,li:before,h1:before,h2:before,h3:before,h4:before,h5:before,h6:before,pre:before,form:before,fieldset:before,input:before,textarea:before,p:before,blockquote:before,th:before,td:before,
body:after,div:after,dl:after,dt:after,dd:after,ul:after,ol:after,li:after,h1:after,h2:after,h3:after,h4:after,h5:after,h6:after,pre:after,form:after,fieldset:after,input:after,textarea:after,p:after,blockquote:after,th:after,td:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}

CSS補足

サイト上で使い回すCSSをcommon.css
そのページでしか使わないCSSをcontent.cssと別けています。

ここら辺は好みも出てくるかもですね。

何にしろ経験則で自ずと最適化が出来上がってくると思いますが、人にソースコードを見られることを意識して製作するのがよろしいかと思います。

この業界は完璧主義は向かないと言われます。

製作速度とメンテナンス性を両立するのは非常に気を使いますが、それでも常に心がけていたいですね。

タグ:

おすすめ