【HTML/CSS】よく使ったHTMLタグ/CSS使用事例集【俺得】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
- 背景
- HTMLタグ
- CSS使用事例
- 今後に向けて
背景
HTMLの改修でよく使ったタグを場面と共にまとめます。
再現性を高めます。
HTMLタグ
h1
Webページにおいて最も上位の見出しを記述するタグです。
私はSEO対策として使いました。
使い方が合っているか分かりませんが、文章と画像をh1タグで囲みました。
SEO対策として、画像にはalt属性を記述しました。
画像においては、alt属性がh1タグとして機能します。
ul/li
箇条書きで記述できるタグです。
dl/dt/dd
説明リストを記述するためのタグです。
- dl：
説明リスト - dt：
説明する言葉(タイトル) - dd：
説明する言葉の定義文or説明文
svg
コードを記載して画像を描画することができます。
JPEGやPNGなどのビットマップデータに比べ、拡大してもぼやけずにきれいな状態で表示ができます。
私は会社のロゴ作成で使いました。
g
オブジェクトをグループ化するためのコンテナ。
g要素に適用された変形はその全ての子要素に対して実行されます。
使い方はまだちゃんと分かっていませんが、svgタグの子要素として使用し、以下のpathタグで描画した文字に、gタグで定義された内容が反映されました。
具体的には、文字の太さやアウトラインなどについて定義しました。
path
図形を定義する要素です。
Illustratorで作成した会社ロゴのsvgファイルのpathタグから数値を取得し、既存サービスのpathタグに貼り付けて使っていました。
(絶対使い方間違ってますよね・・・)
サイズ変更はsvgタグのviewBoxプロパティで行いました。
色の指定はpathタグのfillプロパティで行いました。
CSS使用事例
リスト(ulタグ)の表示を変更する
list-style
noneを指定することで、最初に「・」が付かなくなる。
リスト内の表示位置を右寄りにする
text-align
rightを指定する。
文字と文字の間隔を調整する
letter-spacing
2pxがよかった。
リストを垂直方向に並べ、さらに横文字にする
display/flex-flow
ulタグにdisplay/flex-flowを指定する。
リストの最後のみ位置を変える
:last-child
要素の最後にのみCSSを指定できる。
親要素にdisplay:flexを指定する(今回はulタグに指定)
要素の最後だけを最下部にする(今回はliタグに指定)
li:last-child {
margin-top: auto;
padding-bottom: 60px;
}
親要素でheightを指定している場合に、fontawsome(ボタン)を上下中央揃えにする
transform
該当の要素 {
transform: translateY(100%);
}
fontawsomeを少しシャープにする
.fas {
}
要素をウィンドウの下部の同じ位置に常に表示させる
position:fixed;/z-index
.footer-button {
position: fixed;
bottom: 30px;
right: 50px;
z-index: 5;
transition: all .1s;
box-shadow: 0 0 20px white;
padding: 0 10px;
&:hover {
transform: scale(1.05);
}
&:active, //クリックしてから離すまでの間に適用される
&:focus {
transform: scale(1);
}
}
画像を重ねて表示する(上の画像は右下の方に表示)
position
<div class="box">
<img src="background画像.jpg"/>
<div class="up">
<img src="up画像.jpg"/>
</div>
</div>
親要素にpositionプロパティでrelative、子要素にabsoluteが指定されているのがポイント。
.box {
position: relative;
}
.up {
justify-content: center;
align-items: center;
position: absolute;
top: 80%;
left: 55%;
}
z-index
要素が重なった際の表示順を指定できます。
指定する要素には、positionプロパティでstatic以外の値を適用されるのが条件です。
今回の場合だと、background画像.jpgのimageタグにpositionプロパティを適用させる必要があります。
また、表示順を指定するには同じ階層の要素にz-indexプロパティを適用させないといけません。
例えば、親要素の階層と子要素の階層それぞれにz-indexプロパティを適用させても意味はありません。
要素からはみ出した部分を非表示にする(切る)
overflow
該当の要素 {
overflow: hidden;
}
要素の順番を入れ替える
display:flex;/order
スマホとPCで要素の表示順番を入れ替えるには？flexbox「order」を使ってレスポンシブデザインに最適化！ - misallychan.com
imgタグのsrcプロパティを変更する(画像を変更する)
display:block;/display:none;
【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！ | FASTCODING BLOG
横並び表示から縦並び表示に変更する(レスポンシブデザイン)
flex-direction
PC画面の設定が以下の場合
SP画面の実装
@media all and (max-width: 749px) {
flex-direction: column;
}
}
今後に向けて
再現性を高めていくっ！(かねこ風)
