規定のデザインを流用！ボタンの作成
今回は規定のデザインを流用して、今回作成したページをデザインしました。それとボタンの作成ですね。
今回の記述です。
article,#message
～以下略～
#photo a{
background-color: #ffaa00;
background-image: linear-gradient(to bottom,#ffe7b8 0%,#ffaa00 100%);
padding: 10px 80px;
border-radius: 10px;
color: #000;
font-weight: bold;
text-decoration: none;
}
HTML
<p id="message">
Forest Studioは森や自然を生かしたイベントや商品をお届けしている工房です。自然の中にある「森の工房」では、四季折々の風景を楽しんだり、森の散歩を楽しむことができます。お近くまでお越しの際は、ぜひお立ち寄りください。
</p>
<a href="news.html">工房からのお知らせ</a>
今回の記述は、以前作ったデザインをそのまま流用するというものでした、具体的に言えば、news01.htmlで使ったデザインをそのまま使用しているだけなので、以前記述したCSSに追加でIDを付けた感じでできました。
linear-gradient
linear-gradientの記述は、指定したボックス内にグラデーションをつける指定です。
background-image: linear-gradient(方向,開始色 0%,終了色 100%);
方向には以下の種類があります。
- to bottom 上から下
- to top 下から上
- to right 左から右
- to left 右から左
また、方向は角度で指定することもできます。
- to bottom 180deg
- to top 0deg
- to right 90deg
- to left 270deg
12時の方向を0度とし、度数はdegで記述します。角度を指定するときは、マイナス方向にも指定できます。
まとめ
今回は初めて登場した、 linear-gradient以外は割と簡単な記述でした。IDの指定が追加でできることを知ったのは、あとから役に立ちそうです。
以下今回のBeforeAfterです。
After
テキスト回りにボックスが入り、画像の中心にボタンができたのがわかると思います。CSSでボタンを作成したのは初めてですが、これからも作っていくと思うので、しっかり覚えていこうと思います。
