[B! js][css] demizuのブックマーク

令和のHTML / CSS / JavaScriptの書き方50選

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

demizu 2024/05/14

リンク

gridでアコーディオンメニューの実装 - Qiita

はじめに今回は、アコーディオンの開閉部分をgridでおこなう方法があることを知ったので、備忘録として記事にしました。（私が知ってた）今までの実装 See the Pen accordion height by chisato (@mgkita) on CodePen. １．コンテンツの高さ（.accordion__body部分）に初期値としてheight: 0px;をcss設定し、コンテンツが表示されないようにする。 .accordion__body { height: 0px; overflow: hidden; transition: height 0.2s ease-out; } さらにoverflow: hidden;をつけることで、高さ（height: 0px;）を超えるコンテンツ（accordion__text部分）を表示しないようにしています。２．JSでクリック時のコン

demizu 2023/06/03

css
js

リンク

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。この記事を通じて以下の技術も学べます。スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ

demizu 2019/12/12

リンク

海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net

最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。デモ作りました。要するにこういうやつです。以下、これのつくりかたを紹介します。基本的な考え方アニメーションはCSS3のtransitionで制御するアニメーションの開始トリガーをjsで制御するという感じで、CSS3とjsのあわせ技で頑張ります。具体的なマークアップコーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section

demizu 2019/07/01

リンク

ScrollOut

ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Install with npm i scroll-out -s or Download .zip Feature Rich Use JavaScript callbacks, CSS selectors, or CSS Variables to animate elements in and out. You can even create sticky headers. Ridiculously Small At about 1kb minified and gzipped, this packs a whole lot of features into a small package. Progressively En