fukukitaru2980のブックマーク / 2018年3月15日

fukukitaru2980 id:fukukitaru2980

2018年3月15日のブックマーク (3件)

【CSS】background-sizeで背景画像をレスポンシブに設定する方法｜Gimmick log
TOP CSS 【CSS】background-sizeで背景画像をレスポンシブに設定する方法【CSS】background-sizeで背景画像をレスポンシブに設定する方法公開日：2016.11.28 更新日：2023.03.19 CSS CSSの background-size プロパティは、背景画像のサイズを指定できます。表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。同じ画像をそれぞれの値で表示したサンプルを作成したので、以下をご覧ください。サンプルページ
fukukitaru2980 2018/03/15
リンク
[CSSのみ] 続きを読むボタンをCSSで実装する
概要長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」「もっと見る」ボタン。要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。 UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。デモはこちら [jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。もっといい方法あるで！！という方はコメントやらついったーやらで教えてくださいませ。
fukukitaru2980 2018/03/15
リンク
[CSSのみ] 続きを読むボタンをCSSで実装する
概要長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」「もっと見る」ボタン。要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。 UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。デモはこちら [jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。もっといい方法あるで！！という方はコメントやらついったーやらで教えてくださいませ。
fukukitaru2980 2018/03/15
リンク
- 2018年3月19日
- 2018年3月15日
- 2018年3月13日