読者です 読者をやめる 読者になる 読者になる

フロントエンド側のトレンド

今回は前回書いた記事とは別で、

フロントエンドのトレンドを記載していきます。

 

1.HTML/CSS

このふたつについては、基本的に説明は不要かと思います。

この2つは難易度もそれ程ではなく、基本的なスキルになります。

 

2.CSS

CSS3は従来のCSSで出来なかった、グラデーション、アニメーション、移動、回転、などができるようになり、動きを付けることが出来るようになってきました。

 

CSS3の広がる可能性!美しいテキストエフェクト用コードスニペット24個まとめ - PhotoshopVIP

 

美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も! | Webクリエイターボックス

 

3.Sass(SCSS)

CSSメタ言語になります。CSSを使いやすく、便利に記述できる。

変数も使えるのは便利です。

 

4.jQuery

JavaScriptのライブラリで、簡単にJsを使えるようになります。

スライドショーやスムーススクロールができる。こちらのほうが、CSS3よりも細かく指定できます。

学習コストはかなり低い部類になります。

 

5.SublimeText

軽快、多機能、豊富なプラグインとテーマ、多言語対応など、非常に便利。

 

6.Emmet

HTML+CSSの速度を鬼上げします。
とにかくタイピングが減る。

Sublime Text 2とEmmetで制作効率アップ!@福岡マークアップ勉強会 | キリンブログ

 

7.gulp

鬼上げの代表格。自動化してくれるタスクランナーです。

例えばファイルを保存したと同時にブラウザを自動リロード、Sassnoコンパイル、画像とCSSを圧縮などを一瞬で行ってくれる。[grunt]と比較されがち。

こちらのほうが処理が少し速い印象を持ちます。

5分で導入! タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA

 

8.Git

バージョン管理ができる「Git」。学習コストは少し高いものの、

それだけの価値がある。

index.html以降が複数になったときなど、

問題解決にお勧めいたします。

 

 

このあたりはトレンドであって、

これらができればといった話ではありません。

 

Flashがなくなることもあり、

動きのあるサイトへの対応が変わってきています。

前回紹介したシネマグラフや、動画の背景への埋め込み、

ロード時間を考慮したJsでの記載など、選択肢は多岐にわたります。

 

様々なやり方ができてきていますが、

基本的にはロードが短く動きが軽いものを作成するためにも、

ライブラリを有効に活用するべきですね。