ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
