css

1/2ページ

jquery(javascript)とCSSから考えるCPUとGPU、そしてSEO

css3_logo

自分はこのブログで良く「cssだけで出来る〇〇」という記事を書いています。 ですが、cssは本来何か動作するものを作るためのものではなく、 ウェブページのスタイルを指定するための言語なので、本来の想定とはズレている為実装は結構面倒です。 jquery(最近ならjavascript)ならスッキリかけるものをわざわざcssでやっていることも多いです。 ではなぜわざわざ面倒な方法を選ぶのか? ちゃんと理 […]

cssで画像サイズそのままに上下左右中央寄せしてトリミングする方法二つ(IE11対応)

答え

こんにちは!@bluesky177896です。 今回は画像サイズをそのままに、上下左右を中央に揃えてトリミングする(厳密にはしているように見せかける)方法を紹介します。 一行で出来るけどIEがま~た動かないパターンと、IEを無視できるかつ他のトリミング方法にも使える方法の二つを紹介していきます。

(cssのみ)縦スクロール画面で、自分がいる位置のヘッダータブにボーダーを引く方法

css3_logo

仕事で、縦スクロール画面のヘッダーで、 自分が今いる位置に下線を引く必要があった。 jQueryの場合、各要素のheightを保存しておいて、 スクロールイベントから長さを計算して各要素のheightに達したらborderを出す必要がある。 cssだけで同じようなことが出来ないかやってみたら出来たのでナレッジを残す。

メインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。

javascript

仕事でフォトギャラリーを作成する機会があった。 メインのイメージ領域があり、下にサブのサムネイルリストがあり、 クリックするとメインに大きな画像が表示されるような画像一覧だ。 Amazonの画像欄などによくあるあれである。今回はその作成方法を解説する。

hoverメニュー(マウスを重ねると開くメニュー)をcssだけで作る

css3_logo
  • 2018.08.12
  • css

今回はPC向けのメニューバーの作り方。 マウスポインタを上に載せた時(ホバー、 hover状態の時)に、メニューバーが開き、 マウスポイントを外すとメニューバーが閉じるようなメニュー。 hoverはPC独自の動きなので、スマホなどでは使えないうごきになってくる。 とはいえ、同じ動きをクリックした際に付けてモバイル端末でも使っていいかもしれない。

toggle(ドロップダウン)メニューをcssだけで作る。

css3_logo

モバイルファースト時代に使えるcssと言えば、toggle(ドロップダウン)メニュー。 普段折りたたまれている状態なので、最初に表示される要素が少なく済みます。 前回の記事でも書いたように、 モバイルファースト時代は極力スクロールを抑えたいので、軽量に出来るcssで出来る工夫はどんどん盛り込みましょう。