html/cssで作るときにいつも忘れがちなことを個人でメモしているものになります。
都度更新しておりますのでご了承ください。
いつも参考にさせていただいているサイト
⭐️色の見本
http://www.netyasun.com/home/color.html
⭐️Font-familyメーカー
https://saruwakakun.com/font-family
基本
<!DOCTYPE HTML><html><head><metacharset="UTF-8"><title>サイト名</title></head><body><!-- 主にここからコードを書いていく --><!-- ここまでの間にコードを書く --></body></html>リセットCSSが必要な場合は、好みのものを貼り付けてください。
画像の表示
html
<imgsrc="dog.jpg"alt="［写真］">haml
<%=image_tag'dog.JPG'%>画像を背景表示する
- background-imageを使う
html
<sectionclass="works"><divclass="l-content"><h2class="heading">Works</h2></div></section>css
.works{width:100%;height:600px;background-image:url(画像のパス);}背景画像を透過する（テキストは透過しない）
- opacityだとテキストも透過してしまうため、画像とテキストの間に１つ階層をはさめばOK！
html
<sectionclass="works"><divclass="l-content"> #これを挟む
<h2class="heading">Works</h2></div></section>css
.l-content{height:100%;background:rgba(255,255,255,0.5);}画像を中央寄せ
- positionを使う
scss
.top-box{background-color:$BaseOrange;height:100px;width:100%;margin-bottom:15px;position:relative;img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}}リスト（li,ul)
<ulclass=contents>店名：
<liclass=contents__details>ジャンル：
</li><liclass=contents__details>住所：
</li>//リストの点を消すli{list-style:none;}