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

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

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

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

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

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

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

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

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

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

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

Font Awesome WEBサイト

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

初心者はもちろん、プロでもよくあるhtmlやcssの構文ミス。

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

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

Another HTML-lint 5

ホームページの表示速度を測るならコレ

WEBサイト・ホームページの表示速度、気になりますよね。
測るツールはいろいろありますが、とりあえず有名所なおすすめ所はコレ。

・Google Page Speed Insights
・GTMetrix

Google Page Speed Insights

GTMetrix

・ユーザの約50%が2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱する
・操作開始時間が3秒のサイトは1秒のサイトに比べ、コンバージョン率は38%低下、直帰率は50%上昇する

上記のような厳しい事がよく言われていますが、サイトの分野により異なりますね。

数秒、いや、1分かかっても見たいページやサイトはあるし、
このブログのようなウインドウショッピング的な見方をされていれば、3秒待てないような時もあります。

そして、工夫次第で待ってもらえる。
サイト表示に時間がかかっていてもローディング画面を工夫すれば、苦にならずに10秒くらい待てるもの。
10秒もあれば、まず間違いなく表示されているでしょう。

サイト表示速度は早いに越した事はないですが、ある程度まで改善したら、それ以上の改善は時間もコストもかかります。ほどほどに。

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