【第4弾】少しのコードで実装可能な10のCSS小技集
CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！
目次
- 要素の上下左右中央配置
- 画面幅いっぱいに画像を配置
- リストマーカーの色を変える
- 言語にあわせて引用符を変更
- クリックで文字列を選択
- 背景画像を見切れないよう繰り返し表示
- 入力時の縦線の色を変更
- ドラッグで要素のサイズを変更できるようにする
- floatは flow-root で解除
- 文章をカラム分けしてラインを入れる
HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！
1. 要素の上下左右中央配置
ボックスを要素のど真ん中に配置する方法です。flex を使った方法などもありますが、こちらは grid を使います。たった2行、サイズの指定もいらないので、様々な場面で活躍してくれそう！
CSS
section {
display: grid;
place-items: center;
}
See the Pen
Grid Centering by Mana (@manabox)
on CodePen.
2. 画面幅いっぱいに画像を配置
幅を指定した要素の中にテキストと画像を入れている時に、親要素の幅を超えて画像を画面幅いっぱいに表示します。これまでは親要素のくくりがあるためHTMLの構造も複雑になりがちですが、この小技を使えば理想的な構造でスッキリまとまります。
HTML
<article>
<p>テキスト…</p>
<div class="fullwidth">
<img src="image.jpg" alt="" />
</div>
<p>テキスト…</p>
</article>
CSS
article {
max-width: 600px;
margin: auto;
}
.fullwidth {
margin: 0 calc(50% - 50vw);
}
img {
width: 100%;
}
See the Pen
Full width image by Mana (@manabox)
on CodePen.
3. リストマーカーの色を変える
箇条書きリストの丸ポチマーカーの色を変更！これまでは疑似要素で形を作ってから色の指定をしていましたが、これならデフォルトのマーカーをサクッと変更できます。
CSS
li::marker {
color: #0bd;
}
See the Pen
List Marker Color by Mana (@manabox)
on CodePen.
4. 言語にあわせて引用符を変更
blockquote などで引用文を表示するときは、疑似要素を使って引用符を表示させることもあるでしょう。これまでも疑似要素でカッコやクォーテーションマークを指定して実装できましたが、open-quote や close-quote を指定すれば言語にあわせた引用符を表示できますよ。
基本はユーザーがデフォルトで設定している言語に合わせて表示されますが、タグに lang 属性で言語を指定することで、言語にあわせた引用符となります。
HTML
<blockquote lang="en"> 英語の引用符 </blockquote>
CSS
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
See the Pen
Blockquote symbol by language by Mana (@manabox)
on CodePen.
5. クリックで文字列を選択
コードなどの必要なテキストをユーザーに簡単にコピーしてもらうために、一回のクリックで全文を選択できるようにするのが user-select: all; 。これまでもJavaScriptなどで実装できましたが、CSS一行で完結するのは手軽でいいですね！下のデモではコードをクリックすれば全文選択できますよ。
CSS
pre {
user-select: all;
}
See the Pen
Select Text using user-select: all; by Mana (@manabox)
on CodePen.
6. 背景画像を見切れないよう繰り返し表示
背景画像の繰り返し表示を指定する、おなじみ background-repeat 。round や space を指定すると、タイル状に並べた画像の位置を調整できます。デモのボックスの右下をグリグリ動かして試してみてください！
CSS：background-repeatプロパティー、repeatなら画像が切れてしまいますが、roundなら画像が切れないようサイズを変えて、spaceなら画像のサイズは同じまま、見切れないよう余白を調整して繰り返し表示しますよ！ pic.twitter.com/GpZkMpr1rd
— Webクリエイター ボックス (@webcreatorbox) June 25, 2020
CSS
textarea {
background-image: url("image.png");
background-repeat: round;
}
See the Pen
background-repeat: round/space by Mana (@manabox)
on CodePen.
7. 入力時の縦線の色を変更
入力欄にテキストを入力するときに表示される縦線、入力キャレット。この色も変更可能です。ブランドカラーにあわせてみてもよさそうです。デモの入力欄に何か書き込んでみてください！
CSS
input {
caret-color: #0bd;
}
See the Pen
Input Caret Color by Mana (@manabox)
on CodePen.
8. ドラッグで要素のサイズを変更できるようにする
要素の右下をドラッグすると、サイズの変更ができるようになります。overflow プロパティの visible 以外の値を指定する必要があります。
CSS
div {
overflow: auto;
resize: both;
}
See the Pen
Resize Element by Mana (@manabox)
on CodePen.
9. floatは flow-root で解除
画像の周りにテキストを回り込ませる時などに使う float 。そのままにしていると下にくるはずの要素が下図のように要素の高さを無視して重なってしまいます。
これを回避するために、いにしえの指定方法ではclearfixという疑似要素を使った技を使っていました：
HTML
<div> <img src="images.jpg" alt=""> <p>テキストテキスト…</p> </div> <footer>footer</footer>
CSS
div::after {
display: block;
clear: both;
content: '';
}
が、今では親要素に flow-root を指定すれば回避できます。一行ですみますよ！
CSS
div {
display: flow-root;
}
See the Pen
Clearfix using flow-root by Mana (@manabox)
on CodePen.
10. 文章をカラム分けしてラインを入れる
新聞や雑誌のように文章を縦にカラム分けできます。flexなどを使う必要がないので、HTMLもとってもシンプル。読みやすさを考慮しながら実装してみるといいですね。
CSS
p {
columns: 3;
column-rule: solid 2px #222;
}
See the Pen
Paragraph Column Line by Mana (@manabox)
on CodePen.
