「文字だけのボタンじゃなくてアイコンをつけてわかりやすくしたい!」ボタンにアイコンをつける方法を解説します。【方法1】before,afterでアイコンを作る「::before」と「::after」は疑似要素といって、CSSで各htmlタグの前後につけることができる要素です。これをCSSを駆使してアイコンにします。四角、線、くの字、丸とそれらを2つ組み合わせる形ならCSSだけで作ることができます。position:absoluteで配置するアイコンを作ったらposition:absoluteで位置調整します。アイコンの位置を固定したいとき、before,after両方使いたいときはこの方法です。アイコンのある位置に文字が被らないようpaddingで空白を作りましょう。absoluteで位置調整しています。class="example">ボタン</a>文章が長くてもアイコンの位置は変わりません。文字の長いボタン文字の長いボタン(一つなら)文字に並べる「::before」「::after」は文字の前後につけることができます。どちらかひとつで作れるアイコンならそのまま文字に並べることができます。文字とアイコンの距離を近づけたいときに使います。縦位置を調整するなら「vertical-align」を使いましょう。class="example2">ボタン</a>文章が長いとき、アイコンは文字の後ろまたは前に付きます。文字の長いボタン文字の長いボタンCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法2】画像を使うCSSで作るのが難しい複雑なアイコンは画像を探して持ってきましょう。下記は私がよく使うアイコン画像配布サイトです。rainbow2つとも似ていますが、違うアイコンを配布しているので、両方使っていいものを探しましょう。backgroundを使う画像を背景にして位置固定する方法です。アイコンのある位置に文字が被らないようpaddingで空白を作りましょう。class="example3">ボタン</a>文章が長くてもアイコンの位置は変わりません。文字の長いボタン文字の長いボタンimgを並べるimgとテキストを並べる方法です。文字とアイコンを近づけたいときに使います。画像の縦位置は「vertical-align」で調整しましょう。alt=""/>ボタン</a>文章が長いとき、アイコンは文字の後ろまたは前に付きます。Awesomeは文字がアイコンになるwebフォントです。インライン要素として文字に並べます。Options.いろいろなアイコンが使えて便利ではありますが、バージョンの違いにより方法が変わるため、うまくいかないことがあります。個人的には画像アイコンを使う方法の方がおすすめです。Awesomeを使う→Webフォントとして画像アイコンを使う以上、ボタンにアイコンをつける方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。