Frameで表示する記述も追加。chromeがインストールされてない場合、IE最新レンダリングエンジンで表示。charset="utf-8"直下に記入します。Frameは終わっているので、今は以下の「,chrome=1」を抜いたもので大丈夫です。content="IE=edge">これは必須ではないですが、以下のサイトに書かれてあるキャッシュ対策もすごい参考になります。レイアウトを変更したときにキャッシュが残ってしまってファイルが更新されず、ページが崩れて見えてしまうのを防ぐ方法。F5してくれませんからね。Happiness6.OGP記述SNS向けの記述も企業サイトに取り入れる機会が多くなりました。サムネイル表示と100文字抜粋するOGPの設置例。OGP設置方法とどこまで設定するかを考える7.ファビコンファビコンのサイズや形式について。各種ブラウザに対応するファビコンの作成・設定方法。タッチアイコンやタイルアイコンなども。ファビコン・カンニング・ペーパー8.アウトライン作成コンテンツの中身である文章の構造、階層を決めておきます。HTML5のコーディングではアウトライン(文章の概要/本の目次みたいなもの)を強く意識しながら進める必要があるので。インデント表示なので分かりやすいですね。Chrome拡張版はこちら。HTML5でサイトをつくろう9.バリデーターをチェックバリデータチェックをしながらコーディングしてみましょう。おなじみですが、html5の検証には以下のバリデーターが利用できます。アウトライン確認可能。HTML5.JPでは仕様書の翻訳やリファレンスなどがあり、日本語なので分かりやすいですよ。HTML5ではUTF-8が強く推奨されてるので、UTF-8で作成します。設定10.ノーマライズスタイルブラウザにははじめから、h1は「見出し」らしく大きく表示し、pには余白をつけるなど「デフォルトスタイル」が適用されています。ブラウザ間の差異や、オリジナルスタイルを作成するときに起きるトラブルを避けるため、デフォルトスタイルを無効にするのがリセットスタイルといいます。リセットスタイルは「要素の特徴をないことに」しますが、ノーマライズスタイルは「ブラウザ間の差異をすり合わせる」ようにします。デフォルトスタイル(h1は大きく、p要素に余白がついたり)を引き継ぎながら、ブラウザ間の差異をなくそうというものです。こちら「normalize.css」から最新版をダウンロードして読みこむだけです。筆者はこちらを使う頻度が高いです。大量のデータ(画面サイズや回線速度)を扱うPCを基準にしてしまうと、スマートフォンで閲覧したときにデータ量が多すぎて読み込み時間がかかる問題が発生してしまいます。モバイルを基準にした設計をすることで、PCやタブレットでも軽量になり快適に使うことができるという考え方がモバイルファーストです。モバイルスクリーンサイズの基準は、iPhone等のスマートフォンに多い、幅320pxで進めます。@IT12.プログレッシブ・エンハンスメントの考え方を取り入れるどの環境でも最低限の情報を提供し、高水準の端末や環境が整っているブラウザではリッチな見せ方でコンテンツを提供しましょうという考え方です。いずれにしても、クライアントさんにこの考え方を最初に話しておくことが大切です。@ITYahoo!が採用する「プログレッシブ・エンハンスメント」とは何か13.ビューポート設定スマートフォンOSブラウザーが採用している仮想ウィンドウの「viewport」を設定します。user-scalable=noと指定すればピンチイン/ピンチアウト(拡大・縮小)を無効化できます。width=device-widthはデバイスの横幅、スマホが320pxで表示されるようになります。initial-scale=1.0は表示初期倍率なので、等倍サイズで表示されるようになります。対応スマホやタブレットにIEはほぼ使われてないですけど一応。IEに対応させる為の方法。IE8以前はHTML5+CSS3メディアクエリ非対応なのでRespond.jsを読み込ませます。次世代WEB研究開発15.メディアクエリ設定お次はCSS内。ブレイクポイント(ウィンドウの幅)などの指定条件にあわせて、それぞれの条件に沿ったスタイルシートを記述していきます。一つはメディアクエリをIE6、IE7、IE8に対応させる方法とリンク。softelメモ16.フルードイメージ設定ブラウザーの窓幅にあわせ画像サイズをフィットさせる方法をフルードイメージといいます。ナビゲーションなども%で分割します。(1/3)|ゼロから始めるレスポンシブWebデザイン入門17.Retina対応ディスプレイ解像度は今までのディスプレイと処理が異なるため、これまでのような制作フローだと画像が荒れて表示されてしまいます。以下はRetinaディスプレイ対応のまとめ。「元画像ファイル名+@2x.png」のようにすれば、retina用画像に差し替えてくれるretina.jsの使い方など。@IT18.ドロップダウンナビ実装PCでは普通のナビ、スマホではセレクト(ドロップダウンナビ)にしてくれるjQueryプラグイン(TinyNav.js)を使います。軽量な上、スマホ表示の際、スペースを確保できるので重宝します。他、レスポンシブ対応ナビ10パターンまとめ。BlackFlag19.レスポンシブ対応スライダースライダーの実装は多いと思いますが、モバイル表示での高速化を考えて、軽量であるResponsiveSlides.jsを使います。スライド・フェードの早さはオプションで変更可です。memocarilog20.テーブル料金表などテーブルが必要なページを作るときが必ず出てくると思います。スマホで見やすく表示する場合、こちらが参考になります。組み込みの流れ有料テーマは使わない方向で。読み込むファイル数が多すぎたり、使わない機能があるので、メンテナンス性や高速化を考え、0からhtmlテンプレートをWP化していく方法をとります。ここでは、自分用ではなくて、クライアントさんに納品するためのテーマ作成フロー、おさえておきたいことになります。デザイナーさんはWPやMT組み込み作業することもあるかもしれないので一応覚えておきます。静的ページ作成前と同様に、WordPress記述のルールも以下の規約にならって統一します。インストールしたらオリジナルテーマ(index.php/style.css/screenshot.jpg)を作成し、htmlをワードプレスに組み込んでいきます。cssは、組み込み前に作ったスタイルシートをインポートして、修正分だけstyle.cssに追加していきます。Webクリエイターボックス23.管理画面カスタマイズクライアントさんが使いやすいように、管理画面内の表示をカスタマイズします。顧客アカウントを追加し、管理権限を制限・非表示にすることによって、サイト構築内容が変更されてしまうのを防ぐ事ができます。以下のサイトを参考にできることの一部です。大量のデータを扱う場合や、カテゴリーやタグだけでは対応できないときがあるので、投稿画面入力フィールドを追加して、簡単にコンテンツ管理できるようにカスタマイズします。記事に決まった情報を直接書かせるよりも、カスタムフィールドという入力欄(テキストフィールド・チェックボックス)があることで、クライアントさんが使いやすくなります。Mapsを呼び出して表示することができます。住所を入力するカスタムフィールドを投稿画面につけておいて、それをインクルードして地図を自動表示させます。ジャンルが多いコンテンツを制作する場合、検索機能の強化をしないと使い勝手が悪くなります。筆者も都道府県ナビサイトを構築中するとき「カテゴリ✕タグ✕タクソノミー✕カスタムフィールド」のような複数の絞込機能(セレクトボックス+チェックボックス+テキストフィールド)をつけましたが、以下のサイトが参考になりました。7をカスタマイズするのが早いと思います(自由度は少し低いです)。自動返信の機能をつけたり、メール送信後にリダイレクト、表示を切り替える方法です。NxWorld28.CRM(顧客関係管理)[プラグイン]簡易版CRMであるFlamingo。お問い合わせやメールアドレスを簡単に管理できます。7を事前にインストールして有効にします。ネタワン29.スパム対策[プラグイン]スパム対策サービスであるAkismet。海外からのスパム書き込みもほとんどスパムフォルダに隔離してくれます。以下、APIキーの取得方法と設定方法。見積もりに入れ忘れないようにしたいセキュリティ対策。一つはパスワード管理、SSL、IP制限。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2015/08/101ページで完結、Web制作者が助かるチートシート・資料・PDFまとめページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上2014/09/1Web制作で使えた!jQueryプラグインまとめ+起業しました報告が遅れましたが、5月に退社し6月に起業(株式会社コムテ)しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブ2013/08/12知識0なのにすぐ出来た!iPhoneアプリ開発が簡単にできるまとめ16去年、アプリをリリースしました。アプリに関する知識など全くなかったんですが、意外と簡単に出来るもんだなぁと思いました。テレビを消して、アフィリエイトをやってみたい。今回は、経験にもとづいて「確かにCommentsサイトリニューアル手順をまとめ。コメントデータの処理方法の詳細はこちらをご覧ください。