HTML&CSS自主練｜メモ｜マーク付きのボタン
上手く出来なかったマーク付きのボタン
見本のボタン
こういうヤツ。
シンプルで素敵です。
因みにhoverで反転です。
マークがなければMOREをセンタリングでOKだけど
マークが入りますよね。
スペースで位置調整は卒業したいしなぁ。と、悩みました。
最初に考えたボタン
＞の部分はFontAwesomeからリンクで。
ちょっと太いけどとりあえず。と言った感じで。
これをどうやっていい感じに配置するか。
MOREをセンタリングにしなければ！！と言う使命感から
MOREのbox要素と＞のimg要素をrelativeとabsoluteで重ねました。
これはブラウザ上の見た目は悪くなかったんだけど
hoverがうまく動きませんでした。
今思うと＞をimgだけじゃなくてdivに入れるとかしたらイケたかもです。
でもボタンの為に要素が二つとかhtmlが微妙。
その次のボタン
難しいことをしないで＞は文字で行くことにしました。
＞だと横長すぎるので>（半角）に。
目測であれこれ余白を設定。
昨日アップした時点ではこれでした。
文字の>が微妙ですね。
しかもよく見るとMOREがセンターに合ってないよね。
やっぱりMOREはセンターに来たいし＞はマークにしたい。
ボタンをツールで検証
HTMLはすっきりMOREだけ。
＞は背景画像として使われていました。
それ！
作りながら学ぶ～の本でもやったよね！
リストマークをアイコンに設定するってやつでね！！
原理は分かったのでトライってみました。
背景で設定するにはFontAwesomeにリンクだとちょっと面倒そうなので
こちらからDLしてきました。
ちょっと細くなって嬉しい。
backgroundで相対パスを指定して位置を指定してノーリピート！
background: url(“../images/sharp_arrow_forward_ios_black_18dp.png“) 135px 15px no-repeat;
横位置は目測でやっちゃいましたが縦位置は計算して出したよ！
出来たのはこちら。
ちょっとマークが太いけどいいんじゃないでしょうか！
カラー反転設定のhover。
アイコンが！消えた！←黒のままなので埋もれた
hoverのスタイルで白い＞を設定することで解決。
遠回りしたボタン問題解決
なんかずいぶん遠回りをした気がしますが
ボタン問題が解決しました。良かった。
千里の道も一歩から。
シルクロードを渡れる🐫ですもの。 ←今思いついたよ
ゆっくりでもしっかり進んでいきましょう。