cssで画像サイズそのままに上下左右中央寄せしてトリミングする方法二つ(IE11対応)
こんにちは！@bluesky177896です。 今回は画像サイズをそのままに、上下左右を中央に揃えてトリミングする(厳密にはしているように見せかける)方法を紹介します。 一行で出来るけどIEがま～た動かないパターンと、IEを無視できるかつ他のトリミング方法にも使える方法の二つを紹介していきます。
cssだけで
(cssのみ)縦スクロール画面で、自分がいる位置のヘッダータブにボーダーを引く方法
仕事で、縦スクロール画面のヘッダーで、 自分が今いる位置に下線を引く必要があった。 jQueryの場合、各要素のheightを保存しておいて、 スクロールイベントから長さを計算して各要素のheightに達したらborderを出す必要がある。 cssだけで同じようなことが出来ないかやってみたら出来たのでナレッジを残す。
丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。
丸い円があり、そこをhoverもしくはclickすると、 丸い円からさらに小さいアイコンが飛び出してくるというかっこいいメニューバーをcssだけで作ってみた。 正式名称は分からない。
toggle(ドロップダウン)メニューをcssだけで作る。
モバイルファースト時代に使えるcssと言えば、toggle(ドロップダウン)メニュー。 普段折りたたまれている状態なので、最初に表示される要素が少なく済みます。 前回の記事でも書いたように、 モバイルファースト時代は極力スクロールを抑えたいので、軽量に出来るcssで出来る工夫はどんどん盛り込みましょう。
モバイルファースト時代は横スクロール。css一行で実装する方法。
世はモバイルファースト時代です。 PCでスマホの画面の開発をするというなんとも不思議な時代です。 そしてスマホ世代にとってスクロールは「面倒」なもの。 そこで出てくるのが「横スクロール」です。
テキスト量が多い場合の「…続きを読む」の実装方法(ページ遷移無し、cssのみ)
Amazonの口コミ等で、 書き込みの量が一定を超えると「…続きを読む」というリンクが表示され、 クリックするとページ遷移をすることなく続きが表示されるようになる機能がある。 今回はその実装方法を色々まとめてみた。
複数行で「text-overflow: ellipsis;」みたいなことをする方法色々。
text-overflow: ellipsis; とは、指定した領域をはみ出した文章の末尾を「…」に変えてくれるもの。 そのまま使うと複数行の文章には効かなくなってしまうので、 いろんな方法で複数行に効かせてみる。 今回はcssだけで行う。
cssとradioボタンを使ってタブのような挙動を実装する。
最近GoogleがSEO等でスピードを重視し始めている。 そうなってくると重要なのがAMPや、画像のWEBP化、 そして何よりjQueryやjsといったロードに影響を与えがちな処理の軽量化である。 今回はその一環として、 タブ切り替えをCSSだけで行う。