HTML&CSS 学習メモ

HTML&CSS自主練|メモ|マーク付きのボタン

上手く出来なかったマーク付きのボタン

見本のボタン

f:id:rakuda-san-desu:20180927155438p:plain

こういうヤツ。

シンプルで素敵です。

因みにhoverで反転です。

マークがなければMOREをセンタリングでOKだけど

マークが入りますよね。

スペースで位置調整は卒業したいしなぁ。と、悩みました。

最初に考えたボタン

>の部分はFontAwesomeからリンクで。

ちょっと太いけどとりあえず。と言った感じで。

これをどうやっていい感じに配置するか。

MOREをセンタリングにしなければ!!と言う使命感から

MOREのbox要素と>のimg要素をrelativeとabsoluteで重ねました。

これはブラウザ上の見た目は悪くなかったんだけど

hoverがうまく動きませんでした。

今思うと>をimgだけじゃなくてdivに入れるとかしたらイケたかもです。

でもボタンの為に要素が二つとかhtmlが微妙。

その次のボタン

難しいことをしないで>は文字で行くことにしました。

>だと横長すぎるので>(半角)に。

目測であれこれ余白を設定。

昨日アップした時点ではこれでした。

f:id:rakuda-san-desu:20180927162415p:plain

文字の>が微妙ですね。

しかもよく見るとMOREがセンターに合ってないよね。

やっぱりMOREはセンターに来たいし>はマークにしたい。

ボタンをツールで検証

HTMLはすっきりMOREだけ。

>は背景画像として使われていました。

それ!

作りながら学ぶ~の本でもやったよね!

リストマークをアイコンに設定するってやつでね!!

原理は分かったのでトライってみました。

背景で設定するにはFontAwesomeにリンクだとちょっと面倒そうなので

material.io

こちらからDLしてきました。

ちょっと細くなって嬉しい。

backgroundで相対パスを指定して位置を指定してノーリピート!

background: url(“../images/sharp_arrow_forward_ios_black_18dp.png“) 135px 15px no-repeat;

横位置は目測でやっちゃいましたが縦位置は計算して出したよ!

出来たのはこちら。

f:id:rakuda-san-desu:20180927163402p:plain

ちょっとマークが太いけどいいんじゃないでしょうか!

カラー反転設定のhover。

アイコンが!消えた!←黒のままなので埋もれた

hoverのスタイルで白い>を設定することで解決。

遠回りしたボタン問題解決

なんかずいぶん遠回りをした気がしますが

ボタン問題が解決しました。良かった。

千里の道も一歩から。

シルクロードを渡れる🐫ですもの。 ←今思いついたよ

ゆっくりでもしっかり進んでいきましょう。