- 2022年4月4日
- 2022年4月15日
【CSS】ボタン 〜グラデーションから枠線に変化する〜
ボタンの概要 ホバー時にボタンを変化させるやり方はたくさんありますが、本記事では「グラデーションから枠線に変化する」やり方についてご紹介いたしますので、よろしければご参考ください。 今回ご紹介するボタンは下の「お問い合わせ」ボタンとなります。実際にデモボタンをホバーしてご確認してみてください。 お問 […]
ボタンの概要 ホバー時にボタンを変化させるやり方はたくさんありますが、本記事では「グラデーションから枠線に変化する」やり方についてご紹介いたしますので、よろしければご参考ください。 今回ご紹介するボタンは下の「お問い合わせ」ボタンとなります。実際にデモボタンをホバーしてご確認してみてください。 お問 […]
均等配置したくない Flexboxを使っていてこんな経験がございませんか? 『Flexboxを使っていてFlexアイテムに「flex:1」を指定したら意図せず均等配置になってしまった。』 私はグローバルナビゲーションにスタイルをあてていて、Flexアイテムを自然な感じで広げようとしたところ、均等配置 […]
BEMとは CSSをコーディングする際に、設計規則としてBEMという考え方があります。この規則を学習したときに私はこう思いました。 「BEMって結局どうすればいいの?」と。 BEMの考え方といいますか概念をうまく捉えることができませんでしたが、CSSのカスケーディングという考え方に気づくことで理解す […]
z-index=-1が効かない理由 通常HTMLやCSSを記述していくと子要素は親要素の上に重ねられていきますので、親要素が下で子要素が上という順番になります。 しかしボーダーラインの色をグラデーションにしたいなど、ケースによっては子要素を親要素の下に配置したいときがあります。 この時、子要素に「z […]
IDとClassの使い分け スタイルをあてるのにIDでもClassでもどちらでもできるけど、どちらを使えば良いの? 素朴な疑問ですが、自分は学習し始めの頃に少し悩みました。考え方はいくつかあると思いますが、自分なりに整理してみましたので、参考にしていただけるとありがたいです。 とりあえず、結論を先に […]