モバイル向けサイトやアプリでよく目にする3本線のメニュー。俗にハンバーガーメニューって言われますが、あれを実装できるJavascript。レスポンシブレイアウトのサイトでモバイル向けレイアウトになった時、それまでのグローバルナビがハンバーガーアイコンに収まるという手法はよく見かけますね。ただこの手法には結構賛否両論があり、「美しくない」という意見もよく目にします。個人的にはアレってAndroid App界隈限定での手法であって、WebやiOS Appにおいては全然一般的じゃなくね？とも思います。けどまぁサイトによってはこれの導入を求められる時もあるので、備忘録として残しておきます。
CSSを使って画像のクリッピングパスができるジェネレーター。画面左にある様々なシェイプで画像にマスクをかける事ができます。クリップした内容はページ下部にあるコードエリアにリアルタイムに反映されるので、思った通りのクリップパスが描けたらCSSコードをコピペするだけで使えます。ここで使われるプロパティは“clip-path”というもの。シェイプを選んだり修正したりすると、polygonの値が変化します。画像を使わずにコードだけでマスクを切る事ができるので便利ですね。ただ円形についてはグレーアウトしてて選べませんでした。polygonじゃ描けないからなのか、理由はよく分かりませんが、サークルシェイプって最近よく使われる印象なので、そこだけちょっとアレだしナニではあります。
CSS3とjQueryを使ったタブメニューの作例を集めた記事。なんと85の作例がまとめられてます。よくタブメニューという限定されたテーマでこれだけ集めたな・・・と感心せざるを得ません。一般的な水平方向に並んだタブ切り替えはもちろん、垂直方向でのタブ切り替え、アニメーションを併用したものなど色々あります。それぞれリンク先で導入法やデモなどが用意されてるので、タブの作例を探す際に使えそうです。
うっすらと背景のグラデーションが動くサイトってたまにありますよね。あれのジェネレーター。このサイトもよく見ると、うっすらとグラデーションが動いてますが、このコードを生成する事ができます。画面左にはグラデーションの方向と、アニメーションの方向指定があり、その下にはグラデーションで使う色の指定があります。色については2色だけでなく3色以上のグラデ指定もできるようです。これらを指定した後で「Preview」ボタンを押すと、サイトの背景に適用されます。指定した内容は随時右側に出てるCSSコードに反映されるので、気に入ったグラデーションが出来たらそれをコピーすればオッケ。いやーこのジェネレーター便利ですな。
ランダムに2色グラデーションを生成してくれるサイト。使い方は右上にある「Roll」ボタンを押すだけ。押す度にグラデーションを作ってくれます。とってもシンプルです。気に入ったグラデができた時には、「Code」ボタンを押せば2色それぞれのRGB, HEX, HSLを表示してくれます。また併せてCSSコードも出してくれるので便利です。フラットデザインの流れになった後、ノーシャドウ＆ノーグラデーションが主流になるかと思ったんですが、個性的なグラデーションはiOS 7のデザインのせいか、結構使われる機会が多いですな。
CSS3やHTML5、jQueryに関するチートシートをまとめた記事。世の中にはこういうの便利なものを作ってくれる人がいて、しかもそれぞれ印刷に向いてたりWebで探すのに便利なようにインデックス化されていたりして、色々と便利です。ものによっては的を絞った内容になっていて、例えばHTML5の文章マークアップだけにフォーカスしたチートシートなどもあります。印刷したりMacの壁紙にしたりブックマークしたり、色々な使い道がありそうです。
All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery
Web制作に便利なツール類をまとめた記事。50ものリソースが紹介されてます。その中からいくつか抽出すると、パターン、フォント、写真素材、コードスニペット、カラーピッカー、コーディングツール、CSS関連ツール、ブラウザチェッカー、ブラウザリサイザー、画像編集ツール、プレイスホルダー、Chrome機能拡張など。あると便利なツールっていうよりは、様々なツールを組み合わせて使う最近のコーディングスタイルでよく使われるツール類の紹介が多いです。BootstrapとかHerokuとかGitHubとか。
そういや昨日の発表でAppleのサイト大きく変わりましたね。あれだけやらないやらない言うてたけどレスポンシブレイアウトにも対応してました。iPhone 6とApple Watch、まぁどっちも問答無用で買いますけどね。
モバイルサイト制作に役立つ12のコーディングトリックを紹介した記事。いくつか抽出すると、フルスクリーン表示、ホームスクリーンにアイコンを設置してネイティブアプリぽく振る舞うWebAppの制作、フォームのインプットパターンカスタマイズ、レスポンシブレイアウト、Safariの半透明UI部分のカスタマイズ、ホームスクリーンに登録された際のアイコン名、Windows Phoneでのタイル使用など。どれもモバイル環境での閲覧時に向けたTipsです。各作例にはそれぞれコードが併記されているので、導入もサクっとできそうです。
