CSSって美味しいの？ラザニアは美味しい！

2022年7月2日

全国1億2292万8千人のゴトウスバルファンの皆さん
こんにちは〜！システムの人でし

最近やたらとラザニアが食べたくなります…美味しくて大きくて厚いラザニア食べた〜い
昨夜は指を負傷せずに済みましたヽ(*´∀`)/　3度目のセーフでした。

今日は、すこし前に…いや、だいぶ前にやったCSSのお話です。

昔すぎてもう忘れ去れていると思いますが…　ウェブページを飾り付けするヤツです。

CSSってヤツは。文字の色とか簡単な物から結構細かい飾り付けもできたりします。
例えば…

SPY×FAMILY
パリピ孔明
北斗の拳イチゴ味

こんな感じのどこかでみた事のある様なボタンも画像は使っていません、
CSSを使って描いています。
マウスオーバーの見た目の変更もCSSでさせることが出来ます。

HTMLでの記述は↓だけです。class属性でCSSを適用させています。

HTML

<a class=”an_button” href=”link url“>SPY×FAMILY</a>
<a class=”an_button” href=”link url“>パリピ孔明</a>
<a class=”an_button” href=”link url“>北斗の拳イチゴ味</a>

CSSはすこし長いですが…

CSS

/* 枠をを描くよ */
.an_button {
　position: relative;
　display: inline-block;
　margin: 2px 4px !important;
　padding: 4px 20px 3px 8px !important;
　width: 200px;
　text-decoration: none !important;
　text-shadow: 1px -1px rgba(0, 0, 0, 0.2);
　font-size: 14px;
　color: #ffffff !important;
　border-radius: 3px;
　border: 1px solid rgba(0,0,0,0.1);
　box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), inset 1px 1px 0 rgba(255, 255, 255, 0.3);
　background: linear-gradient(#328cbc, #9ac1d6);
　cursor: pointer;
}
/* [押]を描くよ */
.an_button::before {
　position: absolute;
　display: inline-block;
　margin-top: -7px;
　top: 50%;
　right: 3px;
　width: 14px;
　height: 14px;
　vertical-align: middle;
　content: “押”;
　text-align: center;
　line-height: 15px;
　border-radius: 2px;
　background: #ff6600;
　color: #ffffff;
　overflow: hidden;
　font-size: 11px;
}
/* マウスに乗っかられたら */
.an_button:hover {
　background: linear-gradient(#729cdc, #cae1d6);
}

この方法の良いところは、

・ボタンが増えても画像を作らなくてもいい
・文字の変更やデザインの変更をしても画像を作り直さなくて良い

ボタンが沢山ある場合でもCSSを修正すれば全部のデザイン変更が終わるので楽ちん♪
これがCSSの良いところです