Tag: html5

CSS3
winmonaye

Retinaディスプレイ対応のレスポンシブなメニュー

この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナル記事へのリンク 3つのレイアウトで様々なブラウザ画面サイズに対応する、レスポンシブでタッチフレンドリーなRetinaディスプレイ対応のメニュー作成方法 今日は、ボーダーランズ(Borderlands)ゲームの武器メーカーMaliwanが打ち出す様々な色からインスピレーションを得た、多彩なRetina対応のレスポンシブなメニューを作成していきます。このメニューはブラウザのウィンドウサイズに合わせ、自動で次の3つの異なるレイアウトのうちの1つに変化します。「デスクトップ」向けの横1列表示バージョン、タブレット向けに最適化された縦2列表示バージョン、そして最後は、ナビゲーションを表示/非表示するためのメニューボタンを備える、より小さな画面のモバイル向けのバージョンです。 メニューを完全Retina対応とするため、アイコンフォントを使います。アイコンフォントを使うと、リサイズ時にメニューのアイコンの品質が低下する(ボケて滲んで見えたりする)ことがなくなります。 個々のCSSプロパティをサポートするブラウザ上でのみ実現される効果もありますので、ご注意ください。 アイコンフォントを準備する 独自のアイコンフォントを作るというと少々面倒な感じがするかもしれませんが、IcoMoonなどのツールを使えば、要はアイコンを作ってそのツールにインポートするだけです。アイコンフォントは他のあらゆるフォントと同様に機能するため、色の変更やサイズの指定が簡単にでき、品質が低下することもありません。異なる画面の解像度に合わせてアイコンを用意する必要がなくなり、Retina対応デバイスに最適です。 まず最初に、メニュー用のアイコンを作る必要があります。私はイラストレータを使いますが、例えばInkscapeなどのベクタグラフィックスエディタであればどれでも構いません。アイコンをそれぞれ作成したら、それら一つ一つをSVGファイルに書き出します。アイコンをあらゆるブラウザで適切に機能させるためには、各アイコンごとに、すべてのラインを完全にオブジェクトに変換し、それらのオブジェクトをすべて統合して1つの大きな形にする必要があります。すべてをSVGファイルに書き出したら、それらのファイルをIcoMoonアプリケーションツールにインポートします。 IcoMoonから提供されている膨大なライブラリのアイコンを使って、作成したフォントの見栄えをさらに良くすることもできます。必要なすべてのアイコンが揃ったら、ページ下の「Font」ボタンをクリックし、詳細設定のページに移ります。このページでは、エンコーディングの設定を選ぶことができるほか、各アイコンに文字を付けるかどうかの選択や、Private Use Area(画面を見た第三者によるアイコンのアウトプットを禁止する)を使用するかどうかの選択ができます。私個人としては、デフォルト設定での使用をお勧めします。それで十分機能するからです。 「Download」をクリックすると、4つのフォーマット(SVG、EOT、TTF、WOFF)のファイルがまとめられたZipファイル1つと、CSSファイル、デモページが生成されます。 アイコンを使えるようにするため最初にしなくてはいけないのは、IcoMoonから提供されたCSSをコピーして、自分のCSSファイルのトップにコピーすることです。また、フォントフォルダをコピーするのも忘れないようにしましょう。「a little “hack” to make fonts look nicer on Chrome Windows」も併せて読まれることをお勧めします。 メニューのHTML 今回のナビゲーションのHTML記述は以下のような感じです。 アイコンフォントを使うため、「icon-iconname」クラスをi要素(span要素でも同様に機能します)の中で用います。また、no-jsクラスをbodyに追加していますが、Modernizrを使った場合にはこれはjsとなりますので注意してください。これは、ユーザがJavaScriptを無効にしていた場合にメニューを開いたままにしておくためのものです。 CSSとJAVASCRIPT ここでは、CSS3プロパティにベンダープレフィックスを付けませんが、ファイルの中にはベンダープレフィックスが付いたものがあることに注意してください。 すべての画面サイズに適用されるグローバルCSSは次のようになります。 最初に、ナビゲーション全体に対してちょっとしたトランジション効果を追加してみます。ホバーされているものを除き、その他のすべてのアイテムの不透明度を下げるというものです。 次に、すべてのアイテムに対してちょっと素敵な感じの背景色を追加してみたいと思います。以下の記述では、リストアイテムを選択するのにnth-childを使っています。これで、好きなだけリストアイテムを追加でき、色指定のコードも追加した分だけ繰り返し実行されます。 Media QueryのMin-width属性を使うことで、800px(50em:bodyのフォントサイズが15pxで)よりも大きい画面を対象として、リストを横一列のナビゲーションに変化させることが可能になります。 継続してnth-childの選択テクニックを使い、メニューアイテム毎に異なる色を持つ4pxのボーダーを追加します。このテクニックを:hover疑似クラスに適用するだけでなく、タッチデバイスやキーボード・アクセスにも対応できるよう:focusと:active疑似クラスにも適用します。 次に、アイコンとテキストを配置します。 ホバー時にアイテムの高さをアニメーションで変更するよう設定します。 次にアイコンの配置位置を指定し、かつアニメーションによる高さの変更にも対応できるようにします。 視覚的な効果をつけるためにボックスの影をアニメーションで表示し、その影のサイズを0.8emから0に変更、また色も透明からより不透明度の高い色へと変更します。ここで最初のmedia-queryを閉じます。 ここで2つ目のmedia queryを使って、800px~980pxのサイズの画面向けに若干調整を施します。 これで「デスクトップ」バージョンの設定が終わり(1024px以上の画面を持つタブレットが続々と出てくる今日、その辺について大きな疑問をお抱えだとは思いますが)、800pxより小さい画面(ここでは49.938emに相当)用に、media query のmax-width属性を使って「グローバル」CSSの処理をします。 520px(32.5em)~799px(49.938em)のサイズの画面には、2桁3行のレイアウトのメニューを表示するようにします。ユーザーが各アイテムを容易に「タップ」できるようにパディングを追加し、また、アイコンを左側、テキストを右側に表示させるようにします。 大きな画面用のアニメーションを小さい画面にフィットさせるのはかなり厄介なため、より簡単かつ慎重なやり方でボーダーをシンプルに表示させることにします。ここでmedia queryを閉じます。 ここで再度、より小さな画面用にフォントサイズと幅を指定します。 非常に小さな画面についてはナビゲーションを非表示にしておき、ユーザがクリックするとナビゲーションを表示する「メニュー」ボタンを表示させるようにします。JavaScriptのコードでこれを実現します。 HTMLをすっきりさせるために「メニュー」ボタンを作り、JavaScriptを使ってDOMツリー内に挿入するという方法を取りました。changeClassファンクションにより、ユーザがボタンをクリックした際クラスがactive/クラスなしの間で切り替わります。 小さい画面向けバージョンのために必要なものがすべて揃ましたので、以降CSSでスタイルを指定していきます。以下は、メニューボタンのスタイルを指定する記述です。 デフォルトでメニューボタンは非表示になっています。サイズが519px (32.438em)以下の画面向けには、このボタンを表示させることにします。 ボタンがクリックされると、ナビゲーションの高さをアニメーションで変更するように指定します。ナビゲーションを閉じるときのためには高さを0em、開くときのためには最大の高さとして30emを指定します。JavaScriptが有効になっていない場合には、ボタンが表示されないため、no-jsクラスを使って常にナビゲーションを表示させるようにします。 JavaScriptが有効になっている際には、デフォルトでメニューを非表示にしておき、ユーザがボタンをクリックすると(activeクラスを取得し)表示されるようにします。 より小さなサイズの画面には、アイコンを左側、テキストを右側に持つアイテムから成る縦1列のリスト形式でナビゲーションを表示させるようにします。 素敵な色付きの8pxのボーダーも各アイテムの左側に追加します。 デスクトップ上で小さな画面用のバージョンをテストした場合にはナビゲーションは美しく表示されますが、モバイルデバイス上だとアイテムをタップするのが難しいかもしれません。Modernizrを使えば、デバイスのタッチ機能の検出が可能です。デバイスにタッチ機能があれば、touchクラスがbodyに追加されます。このクラスを使うことで、ナビゲーションアイテムを少し拡大させることができ、ユーザがより簡単にタップできるようになるため、タッチデバイス上での体験レベルが向上します。ここで最後のmedia queryを閉じます。 これでデスクトップ/タブレット/モバイルデバイス上で快適に機能するタッチフレンドリーなRetina対応のナビゲーションの完成です。皆さんに気に入っていただけると嬉しいです!

詳細を読む »
CSS
winmonaye

第1弾:デザイン画像を稼働中のWebページに組み入れる方法

仕入れたデザイン画像を稼働中のウェブページに適用するのに苦労することはありませんか?ウェブ開発のすべり出しが順調であるにも関わらず、デザイン設計のある部分でつまづくことは? wireframes はあなたにとってコーディングによる設計よりも簡単?ローディング速度が遅くメンテの難しいwebの開発に満足できますか? 多くのデザイナーたちが自分のデザイン画像を稼働中のHTML/CSS web ページに上手く変換できません( 中にはコーディングすら全くしない人もいます)。大抵の場合、その理由はデザイン設計のアプローチと、1つの命令行を書き込む前のプロセスに対する考え方に問題があるからです。 噂とは裏腹にCSSは難しい言語ではありませんし、web ページやweb サイトの開発も難しくある必要はありません。多くの場合、問題は基礎構造の開発前に細かい部分を気にして混乱してしまうところにあります。またデザインのうち、コードを複雑化するような軽微で些細な部分の処理に捕われてしまうことも問題要因の一つです。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している場合もあります。オリジナルの記事はここよりご覧いただけます。 デモにリンク オリジナルの記事 この投稿では、皆様に自由にダウンロードできる試供デザインを閲覧し、そのデザインを稼働中のweb ページに組み入れる方法を見ていただきます。この投稿では私は簡潔なコードを用いますが、デザイン・テンプレートに付いたオリジナルコード同様、ページを立ち上げるために私が使用したコードをダウンロードしていただけます。この投稿自体は、主にデザイン設計のための思考過程に重点をおいて進めていきます。 ダウンロード The Artificial Casting テンプレート 下のデザインをご覧ください。これらはSmashing Magazinesから無料でダウンロードできます(当ページの3つ目のテンプレート)。 テンプレートクリエーターによる設計デモをご覧になり、上にある私のデモと比較していただくことも出来ます。 私がこのテンプレートを選んだのは、見た目がオシャレで私がチェスが好きだという理由もありますが、何より典型的な3カラム・レイアウトで、開発にあたり2つ3つの難関と選択肢が用意されているからです。また最終ページに入れるか否かを決定する詳細な箇所が数個含まれています。 デザインから開発までの過程に対する一般的考え Artificial Casting テンプレートの説明に入る前に、開発にあたってwebサイト全てに共通する2つ3つの事柄を考えてみましょう。 好むと好まざるとに関わらず、web ページは全てボックスを使って開発されます。HTMLの全要素はボックスを持ち、ボックスは CSSボックス・モデルをもとに形づけられます。隣同士や上下に並ぶボックスもあれば、他のボックスに包含されているものもあります。デザインが箱形でなければならないということではなく、開発時に作られるボックスについて考える必要があるということです。 最も上級なレベルでは、2つ3つの大ボックスで大枠のレイアウトが構成されて、デザインの詳細はその大ボックス中の小ボックスに入ります。これらの長方形ボックスを頭で思い描くことは、デザインのどの部分がボックスに上手くフィットして、どの部分をボックスから外すべきかを見定めるのに役立ちます。まずは、これらの大レイアウト・ボックスについて考えましょう。細かい部分を見て内側から外側へコーディングせず、外側からのコーディングを行います。 画像とHTTPリクエストは、webページのローディングを遅くする大きな要因の一つです。デザインを考えるにあたって本当に画像化するべきもの、またコードを用いて簡単に再現できるものは何かについて思案することは賢明です。一つ画像を少なくすることで、ファイルサイズもサーバー上のリクエスト数も縮小するため、 画像を最適化することができます。 私はただの大きな色の集合体に過ぎない、webページ上の画像を見かけることがよくあります。そもそも色の集合体が画像化されなければならない理由はないのです。私たちは画像を眺めて、どうやって必要とする画像全体のファイルサイズを縮めるかについて考えながら、使用する画像の数を減らしています。 レイアウト テンプレートに関してまず考えたいことは、レイアウト全体の概観についてです。デザインを大ブロックに分けようとしていますが、この場合、まず上下方向に行うのが最も簡単でしょう。デザインを見ると3つの帯がページを横切っているのが分かります。この帯がヘッダーやコンテンツ、そしてフッターに当たるものです。 フッター 最下部に3つの情報ボックスとテキストを含んだ分かりやすいフッターがあります。とりあえずフッターの中味は気にせず、先ず上部からフッターを切り離すためにどこで線引きするかを決めます。 この端の部分を画像化しますが、それをフッターもしくは上のボックスのどちらに入れるかを選択できます。どちらでもOKですが、私はイメージをフッターに入れることにしました。 この記事で触れませんが、最終的にはサイトにわたって繰り返されるページのある部分を別のファイルで管理するために、PHPを含有したファイルの類いを使用するのが妥当でしょう。この画像は当サイトの全ページ上に登場するため、私にとっては最終的にfooter.phpファイルになるフッターに置くほうが合理的なのです。 フッター内にある他すべての詳細については、基礎レイアウトの作成中はそれについて考える必要はありません。 コンテンツ 本文を3つのカラムと2つのサイドバー、そしてその間にあるメイン・セクションに分けてフッターの真上に置きます。3つのカラムについては後ほどもう少し詳しく触れます。今は内側を3つのカラムまたは3つの小ボックスに分割される、一つの大コンテンツ・ボックスについて考えるだけで十分です。 フッターの場合と同じく、コンテンツ・ボックスの初めと終わりをどこにするかを決めなければなりません。ここに開発上の問題のタネとなる2つの要素があります。複数のカラムおよびコンテンツ全体をそれぞれまたいでいるログイン・ボックスとチェスの駒の画像はヘッダーに属します。 オリジナルのテンプレート開発にあたって、両者はヘッダーの一部として設定されましたが、私はそれらをコンテンツエリアに置くことにしました。フッターの場合と同じく、この2つがサイトの全ページに登場させるべきかを考えました。確かにテンプレートのデザイン時に設定すればそうなっていたでしょう。しかし、2つがページ毎に変わるような柔軟性を持たせるのも良いだろうと考えました。 おそらく、サイト内の別のセクションでは別のチェス駒画像が登場し、ログイン・ボックスは一部のページあるいはセクションにのみ登場するでしょう。 コンテンツエリアにインクルード・ファイルは使いません。ページ毎に変わるセクションはここだけなので、サイトにわたって変化させたいデザイン素材は、このボックスに入れるのが妥当なのです。しかしここからチェス駒の画像をコンテンツとヘッダーの両方に置くため、どのようにコーディングするかを把握しておく必要があります。 ヘッダー ここではヘッダーについて紹介します。消去法からするとヘッダーにはロゴやナビゲーション・バー、そしてその背後に勾配の背景が入ります。ヘッダーとコンテンツエリアの間を、ページを横切る細いラインで仕切ります。このラインもページ毎に変化しないため私はヘッダーに入れています。ヘッダーは最終的にサイトの全ページに入る header.phpファイルになります。 レイアウトの作成 HTMLを以下のように組み立てることができます。 先述したメインボックスやビルディング・ボックスは、それぞれ セマンティック id を適用した divになります。 コンテンツエリアの中に3つのカラムが入っているのが分かるとおり、コンテンツ div は3つの追加 divsを持っています。一方がより重要であることを反映させるためによくされることですが、2つのサイドバーをそれぞれ「プライマリー」「セカンダリー」と名付けました。 チェス駒とログイン・ボックスの画像をコンテンツ div の中に追加しますが、 ログイン・ボックスをカラム構造の枠から独立させるために、 3つのカラムdivsの外に置くことにします。 ここからはCSSについて。 CSSでサイトのレイアウトを作る際の鍵は、CSSの不要な場合を見定めること、そしてフロートを要する場所がわずかであるという理解です。HTMLでは、コンテンツ div はそのままヘッダー divの真下に置き、 フッター div はそのままコンテンツdiv の下に置きます。これは div のデフォルト動作で、それが起こるために何もする必要はありません。 このデフォルト動作を変えたいので、コンテンツdiv内の各 divs をフロートします。これら3つのdivs がお互いの下に来ないように、お互いを隣り合わせにして配置し各々左方向にフロートするようにします。 デフォルト動作を変更させたら次はフッター divの調整を行います。 コンテンツ div内の内容全てがフロートした状態にあるので、 フッター divは自動的にその下に来ることはありません。 clear: both を追加することで(ここでは  clear: leftを使っていますが)フッター div を強制的にコンテンツ div下に持っていきます。 必然的により多くのCSSが最終的には必要となります。上記のコードを試すと、どの divs にも幅や高さ指定、またそれらを設定するコンテンツがないため内容が乏しいのが分かります。そこにはこれから中味を埋めていく空っぽの構造体があるだけです。 フロートされた3つの divs の合計幅がページ全体の幅を越えないようにしなければいけないため、それら3つの幅設定には特に注意する必要があります。レイアウトに際してのもう一つの決定事項である全体の幅について、まだ詳しく述べていないことにお気づきでしょう。 固定もしくはリキッドのレイアウト デザイン・イメージを一見しただけでは、デザインが 固定されているのか流動的なのかが分かりません。事実どちらも可能なのです。テンプレートに付いているコードを見ると、3つの水平の帯(ヘッダー、コンテンツ。フッター)がウィンドウの端まで伸びながら、帯内のコンテンツ全部がページの中央に来るように設計されています。同じように私たちもしてみましょう。 全てを固定して中央に持っていきたい時は、div でその周辺を包んで幅を確保し、その div  で包んだ部分を中央に据えます。おそらくCSSでページを中央に置く方法が皆さんには馴染み深いでしょう。 ページ全体を中央に置く方が簡単と言えば簡単なのですが、ここではそれを行いません。3つの水平帯の背景をブラウザの端まで伸ばしながら、帯内の内容全てをウィンドウの中央に置きます。私たちが目指すのは リキッドな背景と固定したコンテンツですが、幸いにもSoh Tanaka氏がすばらしいとても簡単な解決方法を提供してくれました。 ただCSSで一つのクラスを作り、それをHTML構造内にある選択可能なdivsに適用するだけでよいのです。 センタリングに精通している人なら、上のコードが通常 wrapper divに加えるものであることにお気付きになるでしょう。クラスとしてCSSを設定すれば、それが適用される箇所での柔軟さとコントロールが確実になります。新しいHTMLはこのようになります。

詳細を読む »

ウェブサイトをHTML&CSSに基礎から構築 〜 第1回 〜

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明したいと思います。これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト このシリーズでは、ホーム(トップ)のページだけをCSS&HTMLにコーディングしますが、トップページができれば、他のページも難なくできると思います。 あと、フォトショップのデザインのチュートリアルは今度ご用意しますので、お楽しみに待っててください。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 1.フリーのフォトショップウェブデザインファイルを入手 今回は、MateusのGrunge Para Portfolio を使います。ダウンロードのリンクは以下になります。 http://www.mateusneves.com/design/layout-grunge-para-portfolio-gratuito/ 2.ウェブページの各部分を見極める フォトショップで開いたら、まず一番最初にすることは。。  考えることです。基本的なウェブサイトは、Background(背景), Header(ヘッダー), Content Area(コンテンツ エリア) と Footer に分けることができます。 今回のデザインの背景から見てみると、背景画像は大きな画像が一つで大丈夫そうですねー。 ヘッダーには、メニュー(ナビゲーションバーNavigationbar)とロゴとソーシャルサイトへのリンクがあって。これは、他のページでも、同じく登場するので、phpなどで、includeするといいと思います。 コンテンツの部分は、最近のプロジェクトのスライダーあって、さらにその下に三つのポートフォリオの画像を載せれる部分があります。これらのコンテンツの部分はページごとに異なりますねー。 フッターの部分はオレンジのバーより下の部分で、ちょっとしたサブロゴと他のページへのリンクがあります。このフッターも全部のページに共通の部分になります。 3.固定レイアウト(Fixed Layout), 柔軟レイアウト (Liquid Layout), エラスティックレイアウト (Elastic Layout) を決める 各レイアウトの詳しい説明は、リファレンスを用意しますが、簡単に説明しますと、画質解像度によってレイアウトが柔軟に対応できものを作るか、ある程度解像度の枠を絞って製作するかということです。固定レイアウトが一番簡単なのと、デザインが保てるで、7割、8割がたのウェブサイトは、固定レイアウトのはずです。 今回のウェブサイトのデザインは、柔軟レイアウトにする意味がなさそうなので、固定レイアウトで行いたいと思います。 4.骨組み(フレームワーク)を作る 骨組みのプランをしっかり作っておくことで、実際のコーディングが楽になります。自分は、簡単にノートにスクラッチして、どの部分がどれくらいの大きさで、どこにどうやって、なにを置いて、どう作るかをノートにまとめます。先に色んな細かい部分をシュミレーションすることで、後に遭遇する問題を前もって理解し、それを回避できるように考えながら、骨組みにコメントなどを入れて作ります。 骨組みは、人によって様々なので、状況と自分に合ったものを作ればいいと思います。ウェブ製作会社のなどでは、しっかりとした物を作って、クライアントと確認しながら進める場合も少なくありません。 その他にも、オンラインツールやダウンロードして使えるソフトウェアも数多く存在しますので、Googleってみてください。 http://www.hotgloo.com/ https://gomockingbird.com/ https://cacoo.com/ http://iplotz.com/ http://www.balsamiq.com/products/mockups 5.エディター&ブラウザー それでは、コーディングを始めましょう。今回は、マックのCodaを使って行います。HTMLやCSSは過去の物を習うより、将来に必要なHTML5やCSS3をドンドン使っていきます。あと、現在IEを使ってる人はすぐにIEをパソコンから消去してください。IEは現在ブラウザーのマーケットで一番遅くて、一番規格が外れている、バグだらけのブラウザーです。 ファイアーフォックス、クローム若しくは、サファリをゲットしてください。 フォルダーの構成は以下のように設定しておきます。 6.HTML5のDOCTYPE お好きなエディッターを開いて、新規にファイルを作成して、index.htmlに名前を変更して保存して、HTML5用にDOCTYPEやBODYタグを以下のように用意します。あとCSS用のフォルダ−を作ってそこにstyle.cssのファイルを作って、HTMLのHeadの中からリンクさせてください。 7.css リセット 実は、ブラウザーによって様々ですが、ブラザーは基本的なCSSのマークアップを行っているのです。例えば、body や div にマージンが勝手に入っていたり、ul や ol に list style が適用されています。今後スムーズにCSSのマークアップを行うために、css reset のスタイルシートも入れておきましょう。 自分はmeyerweb の CSS Resetシンプルなのを使ってますが、yahoo の YUI CSS Reset など使うのもいいかも知れません。 8.bodyのバックグラウンドーイメージ 今回は大きなイメージ一つでバックグラウンドイメージの作成で良さそうですね。Photoshopからイメージをスライスさせてウェブサイト用にエクスポートさせましょう。 JPG 80%ぐらいで画像を保存してイメージフォルダーに保存してください。 そして、CSSを以下のように書きます。 まぁ、コードを見てもらえばわかると思いますが、bodyにbackgroundとして、さっき程フォトショップからエクスポートしたイメージにリンクさせて、真ん中の上に配置して、繰り返しをなしに設定して、画像が以外の部分の色を設定しました。 これで一気に雰囲気がでてきましたねー。 第一回目はこれで終わりです。第2回は、トップのメニュー&ロゴの部分のチュートリアルになりますので、お楽しみに。 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座

詳細を読む »