HTML&CSS

スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編

スマートフォン用のドロワーメニューの簡単な例は前回紹介しましたが、少し複雑な動きに対応させるには多少問題があります。 今回は起こり得る問題点と解決方法について考えてみます。サンプルとして前回使用したドロワーメニューを使用します。 スマートフォン用ドロワーメニュー学習用簡単版 ドロワーメニュー修正サン  >>続きを読む

スマートフォン用開閉メニューの作成方法

スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉(ドロワーメニュー)の基本的な仕組みの解説です。 jQueryとCSS3を使用した作成方法です。通常jQueryのアニメーションはCPUで処理されますが、CSS3を有効活用す  >>続きを読む

レスポンシブサイトの切り替えポイント〜javaScript

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメディアクエリを利用した切り替えポイントの例です。 501px以上ではdiv.ba  >>続きを読む

CSS3のtransitionで使えるイベント〜transitionのトリガー

transitionアニメーションを実行するには何らかのトリガー(イベント)が必要です。通常は:hoverが使用され、マウスがホバーすると簡単なアニメーションを行ったりします。けれどもトリガーになるのは:hoverだけではありません。 色々なトリガーを使い分けてシンプルで使い勝手のよいページ作成に役  >>続きを読む

Adobe Typekitの使い方

TypekitとはAdobeが提供するFontを自分のパソコンで同期したり、Webフォントとして使ったりできるものです。 このサービスを使用するにはAdobeのCreative Cloudに契約するか、Typekit単体で契約するなどします。 2015年10月6日からモリサワが使えるようになったとい  >>続きを読む