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

作成：2014/01/14
更新：2014/11/01
Web制作 >

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

エンジニア速報は Twitter の@commteで配信しています。

マルチデバイス対応

１．フルードレイアウト
２．ドロップレイアウト
３．ワンキャンバスレイアウト
４．可変グリッド
５．ブレイクポイント参考
６．レスポンシブ対策ライブラリ

パフォーマンス改善

７．ページを高速化する

CMS

８．WordPress化

HTML5　API

９．API一覧

マルチデバイス

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

１．フルードレイアウト

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

２．ドロップレイアウト

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

３．ワンキャンバスレイアウト

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

４．可変グリッド

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

５．ブレイクポイント参考

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

６．レスポンシブ対策ライブラリ

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

パフォーマンス改善

７．高速化

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

CMS

８．WordPress化

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

HTML5　API

９．API

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

位置情報取得／Geolocation API
図形描画／Canvasリファレンス - HTML5.JP
グラフ作成／インラインSVGの使い方 (1/5)｜古籏一浩のJavaScriptラボ
ドラッグ＆ドロップ／ネイティブ HTML5 ドラッグ＆ドロップ - HTML5 Rocks
ローカルファイル読み込み／ローカルファイルの読み込み
ストレージ／ブラウザでストレージ？ Web Storageを使いこなそう
オフラインアクセス／アプリケーションキャッシュ初心者ガイド - HTML5 Rocks
DBをローカルに保存／Indexed Databaseを使いこなそう
並列処理／「Web Workers」
通信／HTML5 Web Messaging

クロスブラウザ対策

１０．IE関連

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

１１．横置き／デバイス対策

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

縦長、横長、画面サイズでスタイルシートを切り替える

１２．Retinaディスプレイ対策

１３．ポリフィル

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

スポンサードリンク

Comments

Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG より:

2014年4月14日 12:00 PM

[…] https://commte.net/4041 […]

返信

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

もくじ

マルチデバイス対応

パフォーマンス改善

CMS

HTML5　API