カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

CSSで変数として使える便利なカスタムプロパティ

CSS変数やカスケード変数とも呼ばれることもあるカスタムプロパティ。
変数のように使えるので何かと便利です。

カスタムプロパティはハイフン2つで始まる名前とプロパティ値を設定します。

基本的な文法はこのようになります。

element {
    --main-bg-color: brown;
}

よく使われる方法はカスタムプロパティを:root擬似クラスで定義することで、HTML全体で使用することが可能になります。

:root {
    --main-bg-color: brown;
}

カスタムプロパティの名前は大文字小文字が区別されます。

実際に使用するときはこのようになります。

element {
    background-color: var(--main-bg-color);
}

また、指定された変数が定義されていない場合の代替値を指定することができます。

element {
    background-color: var(--main-bg-color, black);
    /* --main-bg-colorが定義されていなければblack */
}

カスタムプロパティを活用すれば共通で設定するようなプロパティで使用し、デザイン変更等の効率を上げることができます。
例えば色指定関係をまとめておけば、変更したいときに全て書き換えるという手間が省けますね。

248 views

コンテンツを中央寄せする便利な方法

コンテンツをテキストは左揃えで中央寄せしたいとき、これまでラッパーとしてdiv等で囲み、flexを使ったり、幅を決めてmargin: 0 auto;を使ったりしていました。
しかし、もう少し簡単にできる方法があったのでご紹介します。

これまでのやり方例

<div>
    <ul>
        <li>Sea sit et duo</li>
        <li>Labore velit enim gubergren</li>
        <li>Duo kasd amet clita</li>
        <li>Eirmod takimata est possim</li>
        <li>Nobis sed sed justo</li>
        <li>Clita sit erat iriure</li>
    </ul>
</div>

ラッピングしたdivflexを設定

div {
    display: flex;
    justify-content: center;
}

gridでも同じようなレイアウトにできます。

div {
    display: grid;
    justify-content: center;
}

div等でラッピングせずにやる方法

<ul>
    <li>Sea sit et duo</li>
    <li>Labore velit enim gubergren</li>
    <li>Duo kasd amet clita</li>
    <li>Eirmod takimata est possim</li>
    <li>Nobis sed sed justo</li>
    <li>Clita sit erat iriure</li>
</ul>

ulをコンテンツの幅で表示するようにし、中央寄せにする

ul {
    max-inline-size: max-content;
    margin-inline: auto;
}

表示結果

IE以外のブラウザは対応しているようなので問題なく使用できると思います。

justify-content – CSS: カスケーディングスタイルシート | MDN

上下左右中央揃え

上下左右共に中央揃えしたいときはplace-contentを使います。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
div {
    display: grid;
    place-content: center;
    height: 100%;
}

表示結果

place-content – CSS: カスケーディングスタイルシート | MDN

379 views

ソーシャルボタンを綺麗に並べる

ブログ記事等に設置しておきたいSNSのボタンを綺麗に並べる方法

ボタンはulタグでli内に設置します。
そしてinline-blockで表示し、縦位置を上にすればOK。

.social_buttons{
    text-align: left;
}
 
.social_buttons > li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
 
.social_buttons > li:first-child {
    margin-left: 0;
}
 
.social_buttons > li:last-child {
    margin-right: 0;
}
 
.social_buttons iframe {
    margin: 0 !important;
}
 
@media screen and (max-width: 780px){
    .social_buttons > li{
        width: 80px !important;
        margin: 0 7px 10px 0;
    }
}
1,479 views

CSSだけでボタン装飾を作るサンプル

画像を使わずにそれっぽく見せる方法

HTML

<div id="sample_button_wrapper">
    <div id="sample_button_body">
        <a href="#">Sample Button</a>
    </div>
</div>

CSS

div#sample_button_wrapper {
    border-radius: 7px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    display: inline-block;
    padding-bottom: 3px;
    box-shadow: 0 2px 3px #ccc;
}

div#sample_button_body {
    background: #fff;
    border-radius: 7px;
}

div#sample_button_body a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 8px 15px 5px 15px;
}

表示例)

色を付けたパターン

HTML

<div id="sample_button_wrapper2">
    <div id="sample_button_body2">
        <a href="#">Sample Button 2</a>
    </div>
</div>

CSS

div#sample_button_wrapper2 {
    border-radius: 7px;
    background: #006699;
    display: inline-block;
    padding-bottom: 5px;
    box-shadow: 0 2px 3px #999;
}
div#sample_button_body2 {
    background: #0099cc;
    border-radius: 7px;
}
div#sample_button_body2 a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 8px 15px 4px 15px;
}

表示例)

1,701 views

CSSだけで実装する簡単なアニメーション [Transition]

アンカーテキストの色をじわっと変えたりすることがCSSだけでできちゃいます。
jQueryを使ってもできるようですが、ここではCSSだけで実装します。

書式

transition:
    アニメーションさせたいプロパティの名前
    アニメーション終了までにかける時間を秒で指定(省略すると0)
    イージングの種類(省略するとease)
    アニメーションが始まるまでの遅延を秒で指定(省略すると0);

例)

a
{
    color: #0099cc;
    text-decoration: none;
    bacground: #ffffff;
    transition: color 0.25s ease-in-out;
}
a:hover
{
    color: #95e4ff;
    text-decoration: underline;
    background: #49b6da;
}

続きを読む…»

2,485 views