CSSだけで長い矢印アイコンの作り方【コピペでOK】マンガでわかるホームページ作成ホームへCSSだけで長い矢印アイコンの作り方【コピペでOK】2020年02月23日ネットで調べると▲や>といった三角だけの短い矢印アイコンの作り方は多数紹介されています。「→」のような長い矢印アイコンの作り方は意外と見つかりません。ここでは「→」のような長い矢印アイコンの作り方を説明します。太長い矢印と細長い矢印を上下左右用意しました。以下のCSSをそのままコピペしてもOKですが、太さや長さはあなたの目的に合わせて変えましょう。すると矢印の頭と棒の部分が離れてしまいます。離れないようにするためにtopとleftの計算方法も記載します。※a,b,cは自由に定義してください。その後、位置調整するときはafter,beforeそれぞれのtop,leftに同じ数字をたしていきましょう。transparent;}計算方法.boldleft::afterのborder-width=a.boldleft::beforeのheight=b.boldleft::beforeのtop=a-(b/2).boldleft::beforeのleft=a×2CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。rotate(-135deg);}計算方法.thinright::afterのborder-width=.thinleft::beforeのheight=a.thinright::afterのwidth=height=b.thinright::beforeのwidth=c.thinright::beforeのtop=(a+b)/2.thinright::afterのleft=c-(b×1.4)ちなみに1.4は√2のことです。rotate(-45deg);}計算方法.thinbottom::afterのborder-width=.thinbottom::beforeのwidth=a.thinbottom::afterのwidth=height=b.thinbottom::beforeのheight=c.thinbottom::afterのtop=c-(b×1.4).thinbottom::beforeのleft=(a+b)/2まとめ上下左右の太長い矢印と細長い矢印の作り方を説明しました。応用がきくように計算方法も掲載しました。以上、CSSだけで長い矢印アイコンの作り方でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。