calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

スピードアップした!フロントエンジニアがWeb制作のために知っておきたいことまとめ

frontend_skills

以前までHTMLコーダーと呼ばれていたフロントエンドエンジニアは、表現の進歩やトレンドに伴って、CMSやAPIなどより高度な技術や知識を求められるようになりました。今回は今以上に効率化するために、フロントエンドやWebデザイナーが必要とする知識をまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

マルチデバイス対応

パフォーマンス改善

CMS

HTML5 API

クロスブラウザ対策

マルチデバイス

レスポンシブデザインなど、1つのWebサイトで全てのデバイスに対応させるための知識です。ここではレスポンシブWeb デザインのレイアウトパターンをまとめました。状況に応じて使い分けます。

1.フルードレイアウト

fluid_layout_front

ブラウザの横幅に合わせてサイズ調整。複数カラムで構成され、各カラムが画面サイズに応じて変化します。タブレット+PCでは横にカラムを並べ、スマートフォンではワンカラムにします。

2.ドロップレイアウト

drop_layout_front

画面幅が狭くなるにつれカラムを下に落としていきます。広い画面ではカラム要素を横並びに配置、狭くなるにつれ少しずつ要素を下に落としていきます。大きめのディスプレイで表示領域を有効活用できます。

3.ワンキャンバスレイアウト

one_canvas_front

コンテンツの一部(ナビメニューなど)を狭い画面サイズでは見えないように配置します。スマートフォンの左右にメニューボタンを置き、クリックすると隠れていたメニュー展開するようなレイアウトなどですね。以下はjsだけでメニューを作れるトグルタイプのメニュー。

4.可変グリッド

variable_grid_front

一定サイズのボックスを基準にし、ブラウザ幅を変えるとボックスが規則的に自動配置されます。商品数が多いサイトや、整理整頓されたレイアウトを構築したいときに便利。

5.ブレイクポイント参考

breakpoint_front

レスポンシブでデバイスを切り替えるためのポイントとなるサイズ・区切り。レスポンシブ対応サイトを作るとき、どのポイントで切り替えるか悩むことが多いので。

6.レスポンシブ対策ライブラリ

responsive_library_front

JavaScriptライブラリの「Response JS」は複数の画面サイズのデザインを一つのHTMLで提供しています。以下、IE対策やスライダー・画像・解像度対応など。

パフォーマンス改善

7.高速化

speeding_up_front

フロントエンド高速化のためにやるべきこと、キャッシュ、サイトそのもののパフォーマンス改善、リクエスト数削減など高速化に関する比較的新しい記事です。ページ表示を軽くするために必須。

CMS

8.WordPress化

of_wordpress_front

既存サイトやテーマを作成するときに役立つ記事。WP化するときに見ておきたいまとめです。筆者がナビサイトを構築するためWPテーマを作ったときに、実際に参考にした記事です。上手く構築すればプラグインの数がグッと減ります。

HTML5 API

9.API

html5api_front

HTML5として規格づけされた機能。Canvasを使った図形描写、WebStorageを使ったローカルファイルへのアクセス、他にはユーザー位置取得など、今までHTMLやjsでは不可能だったことが出来るようになりました。HTML5を使えるということは、タグだけでなくて「HTML5 API」も使えるということ。以下HTML5 API一覧です。

クロスブラウザ対策

ie_related_front

フロントエンド開発者が知っておきたいバグ、もう一つはIEのバージョンを上げなくてはいけない場合やIEのバージョンごとの違いを把握するための記事。

11.横置き/デバイス対策

「orientation」はCSSを切り替えるための属性で、Landscape(横向き)かPortrait(縦向き)を指定できます。デバイスが横向きのとき、display:none で隠すなど。レイアウトでどうしても横向きでの表示で適用させたいときに使えます。

12.Retinaディスプレイ対策

13.ポリフィル

polyfill_front

賛否両論ありますが「ポリフィル」は先進的なブラウザに合わせ作成する際、一般的なブラウザにJavaScriptのライブラリを使用して上位のブラウザに近づける手法です。CSS PIEなどのスクリプトを記述することで背景画像の複数指定や角丸を適用することができます。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事