WEBサイト制作に役立つコードを記述
・コピー&ペーストで使用可能
・本ページの記述は全てモバイル端末を優先としている(レスポンシブでPCにも対応)
・学習するとともに随時更新を行う
HTML StartUp
html制作に必要な初期テンプレート
使用可能：jQuery, bootstrap, fontawesome, googlefonts
<!doctype html><htmllang="ja"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- fontawesome --><script src="https://kit.fontawesome.com/7c414374ac.js"crossorigin="anonymous"></script><!-- google fonts --><linkhref="https://fonts.googleapis.com/css?family=M+PLUS+1p|Montserrat|Noto+Serif+JP|Sawarabi+Mincho&display=swap"rel="stylesheet"><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"><!-- MyCSS --><linkrel="stylesheet"href="assets/style.css"><title>titl</title></head><body><header><nav></nav></header><divclass="main"></div><footer></footer><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.4.1.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"crossorigin="anonymous"></script></body></html>CSS StartUp (リセットcss：自分用に改編版)
設定箇所：cssの初期化, form要素の最適化, font-sizeのrem指定設定, img要素の最適化
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/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;vertical-align:baseline;background:transparent;}body{line-height:2;letter-spacing:0.18em;font-family:'Montserrat',sans-serif;font-family:'Noto Serif JP',serif;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}navul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding-left:0.2rem;vertical-align:baseline;background:transparent;text-decoration:none;color:black;}a:hover{background:transparent;text-decoration:none;color:black;}/* change colours to suit your needs */ins{background-color:#ff9;color:#000;text-decoration:none;}/* change colours to suit your needs */mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1pxdotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}/* change border colour to suit your needs */hr{display:block;height:1px;border:0;border-top:1pxsolid#cccccc;margin:00;padding:0;border:0;}/* form要素のcss全リセット */input,button,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;font:inherit;outline:none;}textarea{resize:vertical;}input[type='checkbox'],input[type='radio']{display:none;}input[type='submit'],input[type='button'],label,button,select{cursor:pointer;}select::-ms-expand{display:none;}/* form要素のcss全リセットここまで *//*リセットここまで*//* font-size rem指定用に変換 */html{/* ルートのフォントサイズを10pxに設定しておく */font-size:62.5%;}body{/* ルートのフォントサイズを1.5em（15pxと同等のサイズ）に設定 */font-size:1.5em;}h1{font-size:3rem;}h2{font-size:2.0rem;}h5{font-size:1.5rem;}a{font-size:2.5rem;}/* font-size rem指定用に変換ここまで *//* イメージ要素をウィンドウサイズより大きくしない */img{object-fit:cover;max-width:100%;height:auto;}/* イメージ要素をウィンドウサイズより大きくしないここまで */footerテンプレート
<footerclass=""><divclass="center"><imgsrc="images/お店のロゴ"alt="お店のロゴ"></div><p>〒58s-45s54 住所xxxx-x</p><p>TEL：<ahref="tel:000-1s34-5s78">000-1s34-5s78</a></p><p>MAIL：aaa@aaa.com</p><divclass="site-info"><iclass="far fa-copyright mr-2"aria-hidden="true"></i><small>2020 Omisenonamae</small></div></footer>css
.center{height:8rem;text-align:center;}.site-info{text-align:center;}丁度良いpaddingとmargin
コンテンツごとに丁度良く区切れるので
.p-top2{padding-top:2rem;}.p-top3{padding-top:3rem;}.m-top2{margin-top:2rem;}.m-top3{margin-top:3rem;}GoogleMapテンプレート
丁度良いサイズのマップ
html
<!-- グーグルマップ --><divclass="gmap"><iframe>任意のマップ</iframe></div>css
.gmap{height:0;overflow:hidden;padding-bottom:56.25%;position:relative;}.gmapiframe{position:absolute;left:0;top:0;height:100%;width:100%;}インスタ画像の取得
html
<script src="assets/script.js">css
/* instagram */$(function(){try{this.name="achon0807";$.ajax('https://www.instagram.com/'+this.name+'/',{timeout:2000,datatype:'html'}).then(function(data){json_string=data.split("window._sharedData = ")[1];json_string=json_string.split("};</script>")[0]+"}";this.Arrya_data=JSON.parse(json_string);letdatas=this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;for(iindatas){url=datas[i].node.display_url;this.html=`
<div class="col-6 col-lg-3 p-2 news-height cardImgWrp">
<img src="${url}" class="cardImg news-img" style="box-shadow: 5px 5px 20px #00000052;">
</div>
`;$(".insta-card").append(this.html);}});}catch(error){alert(error);}});