HTMLコード備忘録
こんにちは！
初心者ながらかなりHP作成にはまっているココロです！（楽しい）
このページでは個人的な備忘録としてHTMLコードやCSSコードなどを書き綴っています。 もしお役に立てそうなコードがあればコピペして使ってやってください。 コピペのみで簡単＆シンプルに作れるように工夫（？）しています。
※CSSのスペースは全て半角にしています※
webって便利ですよね。
ブラウザ開きながらコピペできるの嬉しい。
≪リストからジャンプできます≫
※ 本ページはプロモーションを
含んでいます
文章の下に自由な空白
あいうえおかきくけこ
さしすせそたちつてと
（ここが空白）
なにぬねのはひふへほ
まみむめもやいゆえよ
<p class="cocoro4">★（お好きな文章）★</p>
クラス名の "cocoro4" はお好きなクラス名に変更可能です。 HTMLコードの "cocoro4" とCSSコードの "cocoro4" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.cocoro4 {
margin-bottom:40px;
}
文字に青色の下線をひく
あいうえお
<span class="cospan">あいうえお</span>
クラス名の "cospan" はお好きなクラス名に変更可能です。 HTMLコードの "cospan" とCSSコードの "cospan" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.cospan {
text-decoration: underline;
text-decoration-color: #0000ff;
}
画像を画面中央に表示する
<img class="coimg" src="★https://〇〇〇jpeg～や、../images/～など★" alt="">
クラス名の "coimg" はお好きなクラス名に変更可能です。 HTMLコードの "coimg" とCSSコードの "coimg" のクラス名とはイコールである必要があります。このCSSコードはこの下のコードです。
.coimg {
display: block;
margin-left: auto;
margin-right: auto;
}
画像を中央揃えて下に空白
<img class="coimgcenter" src="★https://〇〇〇jpeg～や、../images/～など★" alt="">
クラス名のr "coimgcenter" はお好きなクラス名に変更可能です。 HTMLコードの "coimgcenter" とCSSコードの "coimgcenter" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.coimgcenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
画像を中央揃えて枠線
<img class="coimgcenter2" src="★https://〇〇〇jpeg～や、../images/～など★" alt="">
クラス名の "coimgcenter2" はお好きなクラス名に変更可能です。 HTMLコードの "coimgcenter2" とCSSコードの "coimgcenter2" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.coimgcenter2 {
display: block;
margin-left: auto;
margin-right: auto;
outline: solid 1px #1BFF4A;
}
画像を左揃え
<img class="coimgleft" src="★https://〇〇〇jpeg～や、../images/～など★" alt="">
クラス名の "coimgleft" はお好きなクラス名に変更可能です。 HTMLコードの "coimgleft" とCSSコードの "coimgleft" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.coimgleft {
display: block;
margin-left: 0;
margin-right: auto;
}
画像を右揃え
<img class="coimgright" src="★https://〇〇〇jpeg～や、../images/～など★" alt="">
クラス名の "coimgright" はお好きなクラス名に変更可能です。 HTMLコードの "coimgright" とCSSコードの "coimgright" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.coimgright {
display: block;
margin-right: 0;
margin-left: auto;
}
画像の角を丸く周りに余白
<img class="coimgradius" src="★https://〇〇〇jpeg～や、../images/～など★" width="600" height="400" alt="">
画像のサイズは
・width="600"
・height="400"
の数値を変えることで表示のサイズを変更できます。
クラス名の "coimgradius" や "codivcenter2" はお好きなクラス名に変更可能です。 HTMLコードの "coimgradius" や "codivcenter2" とCSSコードの "coimgradius" や "codivcenter2" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.coimgradius {
border-radius: 10px;
}
.codivcenter2 {
text-align: center;
margin: 0 2% 0 2%;
}
周りへの余白は
margin: 0 2% 0 2%の数値を変更すると変わります。左の数値から「上」「右」「下」「左」の部分で % ではなくて px などの指定も可能です。
リンク画像を画面中央に
<div class="codivcenter">
（※ここにURLペースト※）
</div>
クラス名の "codivcenter" はお好きなクラス名に変更可能です。 HTMLコードの "codivcenter" とCSSコードの "codivcenter" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.codivcenter {
text-align: center;
margin-bottom: 20px;
}
リンク画像を３つ並べる
<div class="coimge3linkcenter">
<div>
（<a href="//○○○.com/～> や、<a target="_blank" //○○○.com/など>）
</div>
<div>
（<a href="//○○○.com/～> や、<a target="_blank" //○○○.com/など>）
</div>
<div>
（<a href="//○○○.com/～> や、<a target="_blank" //○○○.com/など>）
</div>
</div>
クラス名の "coimge3linkcenter" はお好きなクラス名に変更可能です。 HTMLコードの "coimge3linkcenter" とCSSコードの "coimge3linkcenter" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.coimge3linkcenter{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: space-around;
}
div > a{
width: calc(100%/3); /*3つの画像の場合*/
max-width:100%; /*画像のはみだしを防ぐ*/
height: auto; /*画像の縦横比を維持 */
}
リンク先を別窓で開く
<a href="★https://〇〇〇〇.com★" target="_blank" rel="noopener noreferrer">（リンク先の名前）</a>
リンクの下に青色の下線
<a class="colink" href="★https://〇〇〇.com★" target="_blank">（リンク先の名前）</a>
クラス名の "colink" はお好きなクラス名に変更可能です。 HTMLコードの "colink" とCSSコードの "colink" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.colink {
border-bottom: 1px solid #0000FF; /*下線の幅、線種、色*/
}
リンクの下に青色の点線
<a class="colink2" href="★https://〇〇〇.com★" target="_blank">（リンク先の名前）</a>
クラス名の "colink2" はお好きなクラス名に変更可能です。 HTMLコードの "colink2" とCSSコードの "colink2" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.colink2 {
border-bottom: 1px dashed #0000FF; /*下線の幅、線種、色*/
}
行.画像.表などの下に空白
あいうえお
（40pxで２ｃｍほどの空白）
あいうえお
<div class="codiv40">
☆☆☆☆☆☆☆☆
☆☆画像とか☆☆
☆☆文字とか☆☆
☆☆☆☆☆☆☆☆
</div>
クラス名の "codiv40" はお好きなクラス名に変更可能です。 HTMLコードの "codiv40" とCSSコードの "codiv40" のクラス名とはイコールである必要があります。 このCSSコードは下のコードです。
.codiv40 {
margin-bottom: 40px;
}
箇条書きのＣＳＳ
（LISTあり）
- ★（お好きな文字列）★
- ★（お好きな文字列）★
<ul class="cp_list">
<li> </li>
<li>★（お好きな文字列）★</li>
<li> </li>
<li>★（お好きな文字列）★</li>
<li> </li>
</ul>
ul.cp_list {
position: relative;
padding: 0 0.5em;
margin-top: 2em;
list-style-type: none;
border: solid 2px #29B6F6; /* 線の種類、枠線の太さ、色 */
}
ul.cp_list::after {
position: absolute;
content: "LIST";
padding: 1px 7px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: .5em;
background: #29B6F6;
color: #fff;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: 1px dashed #81D4FA; /* 線の太さ、種類、色 */
}
ul.cp_list li::before {
position: absolute;
content: ""
}
ul.cp_list li:last-child {
border-bottom: none; /* 最後の行だけ点線なし */
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
}
箇条書きのＣＳＳ
（LISTなし）
- ★（お好きな文字列）★
- ★（お好きな文字列）★
<ul class="cp_list2">
<li> </li>
<li>★（お好きな文字列）★</li>
<li> </li>
<li>★（お好きな文字列）★</li>
<li> </li>
</ul>
ul.cp_list2 {
position: relative;
padding: 0 0.5em;
margin-top: 2em;
list-style-type: none;
border: dashed 1.5px #1BFF4A; /* 線の種類、太さ、色 */
}
ul.cp_list2 li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: 1.5px dashed #1BFF4A; /* 線の種類、太さ、色 */
}
ul.cp_list2 li::before {
position: absolute;
content: ""
}
ul.cp_list2 li:last-child {
border-bottom: none; /* 最後の行だけ点線なし */
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
}
備忘録用のジャンプリスト
<ul class="cp_list2">
<li><a href="#cojump">↑ リストへ戻る ↑</a></li>
<li><a href="#cojump"></a></li>
<li><a href="#cojump"></a></li>
<li><a href="#cojump"></a></li>
<li><a href="#cojump"></a></li>
</ul>
classのつなげ方の備忘録
<img class="comemo1 comemo2" src="../○○○/□□□" alt="">
.comemo1 {
display: block;
outline: solid 1px #1BFF4A;
}
.comemo2 {
margin-left: auto;
margin-right: auto;
}
ココロのよく使うコード
margin: 0 0 0 0;
左の値から「上」「右」「下」「左」
padding: 0 0 0 0;
左の値から「上」「右」「下」「左」
transparent;
<div class="codiv60 textlines negative">
<p class="cocoro4">
★★★★★
</div>
border: 2px solid #440000; /* 枠線 */
border-radius: 0.67em; /* 角丸 */
padding: 40px 20px 20px 20px; /* 内側の余白量 */
background: #FFFFEE;
}
.negative {
margin: -10px -15px 60px -15px;
}
.negative2 {
margin-bottom: -50px;
}
