レスポンシブ - 気まぐれWEBLOG

【コピペで解消】横幅サイズ固定のサイトの固定ヘッダーの横スクロール！

bodyに最小値を設定して、header固定だとうまくいかない headerにposition:fixed;をすると、コンテンツ自体は横スクロールではみ出たコンテンツが右側に表示されます。しかしheaderはfiexdしてるので、横スクロールできず […]

例えば、デザインデータが750pxだとして、各画像をスライスした際に、すべての画像が750pxの横幅に対しての大きさになるので、その画像一つ一つにcssでwidth:〇〇vw;のように記載していかなければならないときがありますね。そんな面倒なことは […]

CSS

cssのバグによりIEやFirefoxでのみcssを反映させたいブラウザチェックでよくあるバグがIEやFirefoxのデザイン崩れ cssの当たり方がブラウザによって違う時があって、場合によってはIEやFirefoxにのみcssを当てたい場合があり […]

スマホのメニュー展開時にコンテンツ部分がスクロールしてしまう。スマホのメニューはアコーディオンであったり、横スライドメニューであったり、様々ですが、ボタンを押すと展開するタイプが多いですね。その際にフリックするとコンテンツ部分がスクロールできてし […]

マウスでフリックをしたい！マウスでのフリックはライブラリを使用したりとか、ちょっと難しい部分もあるので敬遠しがちですが、 html css jsの3ファイルにコピペするだけで簡単に実装できます。まずはhtmlファイルからですが、構成は上記のように […]

レスポンシブ対応で画像がPC用とSP用で違うものを使いたい場合 PC用とSP用の画像を2枚用意していてcssもレスポンシブで出し入れする場合、結局画像をdisplay noneで非表示にしているだけで読み込んでいるのでサイトの読み込み速度が遅くなりま […]

CSS

縦横比を維持するのはCSSだけでは難しい実際に横幅100％だったりとかでの対応が多いと思うのですが、レスポンシブするにあたって、画像の縦横比を維持したまま横幅を％指定したい、という事がありますよね。その時の実装方法を簡単に説明します。 1,まず […]

CSS

高さがわからない要素に、高さがわからない要素を天地中央にする最近はメインビジュアルを画面いっぱいにして、天地中央にロゴや要素を配置するデザインが流行っています。そんなときにどのようにして中央に要素を配置していますか？画面の高さが変われば、中央に […]

jQueryでユーザーエージェント判定をして、レスポンシブ対応をする cssはメディアクエリでレスポンシブ対応が可能ですが、jQueryでも必要な場合があります。そんな時の一つの方法として【ユーザーエージェント判定】と言うものがあります。簡単に言 […]

CSS

例えば100%のボックス要素の中に、50pxの要素と 100% – 50pxの要素を並べる場合このような場合、cssの数値で引き算が出来るとベスト。 calcという便利なファンクションがありますので、calcで計算式をすることが可能。 […]