Clever Geek Handbook

サイトページ上のアイコンの配置。 簡単にし、維持しやすい

すべてをできるだけ単純に記述する必要がありますが、単純ではありません。
A.アインシュタイン



こんにちは、開発者の皆さん。 かなり頻繁に他の人のコードを掘り下げて見ていると、アイコンの付いたボタンのようなコードのスペルに出くわします。



HTML 



<div class="bl_button__wrapp"> <div class="bl_button"> <i class="fa fa-bars" aria-hidden="true"></i> <span class="bl_button__text">menu</span> </div> </div>


CSS 



 .bl_button__wrapp{ width: 100%; margin: 5% auto; font-size: 30px; line-height: 34px; color: blue } .bl_button{ position: relative; width: 150px; padding: 10px; margin: 0 auto; text-align: center; border: 1px solid #00f; cursor:pointer; } .fa-bars{ position: absolute; left: 10px; font-size: 34px; } .bl_button__text{ display: inline-block; }




CodePenの Andry Zirka （ @ BlackStar1991 ）による Pen badボタンを参照してください。



これは標準のボタン説明フォームです。 長い間、私自身はこのようにコードを書きました。 この記述は、 FontAwesomeに似た既製のアイコンフォントを使用する人が特に練習します。

テキストを中央に配置する必要があり、アイコンがテキストからわずかにずれている場合、小さな問題が発生します。 しかし、これらはすべて、位置によって完全に解決されます。絶対的な性質。 設定可能なアイコン。 このアイコンの配置とボタンの適応性にも問題がありますが、これは別の話です。



次に、ページテキストにアイコンをデザインする方法を説明します（例として同じFontAwesomeを使用）。



HTML 







 <button class="button_menu"> <span class="button_menu__text button_icon__menu">menu</span> </button> <button class="button_menu"> <span class="button_menu__text button_icon__menu">     .</span> </button>


CSS 



 .button_menu{ min-width: 280px; margin-top: 5%; margin-left: 4%; font-size: 4em; color: blue; border: 1px solid #00f; outline:none; /*       */ background:none; /*       */ } .button_menu__text{ position:relative; width: 100%; display: inline-block; text-align: center; margin: 0 auto; padding: 10px 40px; } .button_icon__menu:before{ content: "\f0c9"; font-family: FontAwesome; position: absolute; left: 0px; top: 14px; }


CodePenの Andry Zirka （ @ BlackStar1991 ）による Pen goodボタンを参照してください。







このような説明の利点。



1）コードが少なくなりました。 （これにより、大規模プロジェクトでの生活が大幅に促進されます）。



2）コードは意味的により正確になりました。 div（または他のタグ）が機能的にボタンの目的を果たしている場合、 buttonタグを介してそれを行います 。



3）ボタン内に配置されたスパンは常に中央に配置されます。 （*表示を変更できます：重要なインデントが内部にある場合）。



4）ご覧のように、私のデザインの全体的なポイントは、擬似クラスを通してアイコンの画像を取り出し、それを前（：後）に配置し、絶対に配置することです。 同時に、親スパンの位置は次のとおりです。 （ ！アイコンに別のクラスを割り当てることが重要です）。



5）アイコンは、言語の変更があったとしても、スパンに対して常にその場所にあります。たとえば、他の言語では、この単語はアイコンと視覚的に重なる可能性があります。



6）この方法で設計されたアイコンは簡単に変更できます。特にプリプロセッサ（SASS、SCSS、LESSなど）を使用する場合は、目的の要素に目的のクラスを追加するだけです。



そのような記述の欠点：（およびそれらがない場合）。



1） button



タグを使用する場合、スタイルをリセットまたは再定義する必要があることがよくあります。そうしないと、見栄えがよくありません。 



 outline:none; background:none; border:none;


2）各親（スパン）に対して、実際には擬似クラスで、前と後の2つのアイコンのみを一度に表示できます。



3）私のように、あなたの仕事でFontAwesomeを頻繁に使用する場合、各アイコンのUnicodeを学ぶために公式Webサイトに頻繁にアクセスする必要があります。







これはfa fa-barsクラスを書くよりも少し複雑です。 アイコンの完全なリストがあります。



4）私はCSSを書く際に方法論を順守しようとするので、親要素に対して非常に多くのクラスを持つことができます 



 <button class="button_menu"> <span class="button_menu__text button_icon button_icon__menu button_icon__menu_active">menu</span> </button>


ただし、要素の4〜5クラスを恐れていない場合は、ようこそ。


More articles:


All Articles