Font Awesome の有料プラン

2020-04-11 06:07web
Font Awesome で利用できるアイコンが5倍の7500以上となる有料プラン。

価格が気になったので調べてみました。

なんと、1年で99ドル。

安い？高い？

Font Awesome 使い方

2020-04-11 03:28webFont Awesome

アイコンを表示する


基本の表示方法はhtmlタグを挿入するだけ。

<i class="fas fa-arrow-alt-circle-right"></i>



アイコンの色を変更する


スタイル属性を付与する

<i class="fas fa-arrow-alt-circle-right" style="color:#ff0000;"></i>



アイコンをくるくる回す


アイコンを回転させる fa-spin
アイコンを8ステップで回転させる fa-pulse

<i class="fas fa-cog fa-spin"></i><i class="fas fa-spinner fa-pulse"></i>


回転に適したアイコンは、「Spinners」カテゴリーのアイコンです。
Spinnersアイコンの一覧はこちら。
Font Awesome Spinners アイコン 一覧

アイコンをfloat表示する


float属性を付与してテキストを回り込み表示させることができます。

float:leftfa-pull-left
float:rightfa-pull-right

<i class="fas fa-quote-left fa-2x fa-pull-left"></i><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p><i class="fas fa-quote-right fa-2x fa-pull-right"></i>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Google Page Speed Insights 比較

2020-04-10 02:32web
.htaccessファイルに各種ブラウザキャッシュの設定を行い、設定前と設定後の数値を比較してみた。

設定した内容は以下の通り。

<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/gif "access plus 1 months"ExpiresByType image/jpeg "access plus 1 months"ExpiresByType image/png "access plus 1 months"ExpiresByType image/x-icon "access plus 6 months"ExpiresByType text/css "access plus 1 months"ExpiresByType text/javascript "access plus 1 months"ExpiresByType application/javascript "access plus 1 months"ExpiresByType application/x-javascript "access plus 1 months"</IfModule>

設定前のスコア

設定後のスコア

ん？

スコア減少＿|￣|○



ちなみに設定前のパソコンスコア

でた！99点。
100点はあるのかな？

今日（2020/04/09）のページスピードインサイト

2020-04-09 14:06web
モバイルのスコアー

PCのスコアー

Googleが提供しているPage Speed Insights。
WEBページの表示スピードや構造上の問題などの評価を教えてくれます。

以前の記事にも書きましたが、ページスピードにこだわりすぎるのはNG。
でも、中間試験と同じで、点数が良いと嬉しいですね。

CSSの記述が楽になった LESS なる物

2020-04-09 02:29web
ず〜っと、原始環境でWEB制作を行っていますが、そろそろ新しい物も取り入れたいと少しだけ思ったり思わなかったりしている今日この頃。

CSSを書いていて、やはり不便に思う事を前々から感じており、
特に変数が使えたらな〜っと、よく思っていました。

CSSにも変数があるけど、ブラウザによる対応状況などを考えるとまだ先かなと判断し、とうとうLESSなる物に手を出しました。

似た物にSASSもあるけど、今回はLESSを選択。

LESSの仕様に従いCSSの記述をしてみると、便利じゃん！
もうピュアなCSS記述に戻れなくなりそう。

気になる方はご一緒しませんか。LESS おすすめです！

WEBサイトのアイコンライブラリ Font Awesome

2020-04-09 00:33webFont Awesome
手軽にアイコンをホームページに取り入れる事ができるツールで、現在1,500個以上の無料アイコンがあります。

使い方は、CSSファイルを読み込むだけ。
あとは、使用したいアイコンをFont Awesomeのサイトから選んで、HTMLタグで挿入したり、CSSで挿入したり、簡単です。

ひとつひとつ作成したり、素材を探して来たりしなくて済むので、大変便利。
私が手がけたサイトでも多く使用しています。

Font Awesome WEBサイト

HTML5 文法チェックツール「Another HTML-lint 5」。採点付きのすぐれもの。

2020-04-08 18:29web
初心者はもちろん、プロでもよくあるhtmlやcssの構文ミス。

HTML5の文法がチェックできるツール「Another HTML-lint 5」

HTML5をチェックできるもっともお手軽なツールです。
URLを入力してチェックを入れると文法に点数をつけてくれます。
点数をあげる為にあれやこれやするのもWEB制作技術の学習になります。

Another HTML-lint 5
前へ次へ

WEB制作に役立つ情報を発信（関係無い記事もちらほらありますが...）