CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
detailsタグのアニメーションについて - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
WordPress6.3でも実装されたdettailsタグ。 これはdetailsのSummaryタグ。 detailsのここが中身。 ↑こんな感じで開閉がCSSやJSを使わずに簡単に実装できる。 しかもアクセシビリティ面も配慮されているのがありがたいところ。 ただ、アニメーションをつけようとすると途端に難易度が上がっちゃう。 いろいろ調べてたどり着いた内容を残しときます。 CSSだけで実装 いちおうCSSだけでアニメーションをつけることは可能。以下は参考コード。 ※こちらの記事を参考に作成しました 属性「open」が付いたときに、animationを使って微妙に位置をずらす+フェードインを使って動きを付けてる。 JSを使わない実装をする場合はこの方法が現状の最適解かな。 ただ、閉じる際にアニメーションが効かない上に、高確率でアニメーションが効かない…。 もう少ししっかり動きをつけたい…。
HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか
HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ
フォーカストラップとは? 〜アクセシブルなモーダル〜
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <title>Dialog</title> </head> <body> <nav> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About</a> </li>
【パーツ集】HTML・CSS・JavaScriptをコピペで終わらせられるサイトまとめ | まさたブログ
「毎回同じコード書くのいやだけど、コードのストックも持ってないしな〜」や「過去のコードをまとめるの自体めんどう。。」という方に非常におすすめのサイトをまとめてみました。 どれも無料なのに驚きますが、ブックマーク登録してありがたく使わせていただきましょう！ まず紹介させていただくのは「JAJAAAN!」です。 こちらのサイトはボタン、見出しがそれぞれ100種類以上まとめてあり、どれもHTMLとCSSをコピペするだけで簡単に実装することができます。 グラデーションなどおしゃれなデザインも幅広く取り扱っているのもいいですよね！ 種類の多さと手軽さに驚きます。 【ボタン集】 https://jajaaan.co.jp/css/button/ 【見出し集】 https://jajaaan.co.jp/css/css-headline/ headers.css 2つ目は「headers.css」です。
ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう
メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }
YouTubeの動画をサイトの背景として使用する方法 | 東京のホームページ制作 会社｜ブラボーウェブ
.overlay, #yt_player { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; } .overlay{ z-index: -1; } #yt_player{ z-index: -2; } playerとoverlayのdivタグは同じCSSを適用し、z-indexで前後関係を調整します。動画になる#yt_playerが下になることでユーザーは動画に触れなくなります。 3.JavaScript 最後にscriptです。一見量が多いですが、リファレンスのものをベースに少し変更している程度なので、コードの中身や意味はざっくりわかればOKです。今回はリファレンス内の動画を利用します。 YouTube APIはJQuery本体の読み込みは必要な
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
動画をWebページの背景に埋め込む時のテクニック｜notes by SHARESL
Webページの背景に動画を埋め込む時のメモ 今回はWebページの背景に動画を埋め込む時に必要なテクニックをまとめてメモ。 TOPページのファーストビューに背景動画を設置したサイトをよく見かけますが、実際に実装することになると下記のような点で悩むことがあります。 埋め込み方法（<video>タグ、YouTubeやVimeoなどの外部サイトをiframeで埋め込み） 動画の容量による負荷の問題（サーバー負荷、ロード時間） 動画上のコントロールバーやタイトルなど不要な情報の表示 ループ再生 自動再生 ミュート再生 こういった点について、動画の埋め込み方法を紹介した上でメリット・デメリットを比較してまとめてみました。 動画の埋め込み方法の比較 この記事で紹介する背景動画の埋め込み方法は下記の4つです。 直接サーバー上のファイルを読み込む（videoタグ） Googleドライブのファイルを読み込む（
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
水平スクロール発生時の原因特定に使える便利スニペット - NxWorld
ページ内で意図しない水平スクロールが発生してしまった際、パッと見で該当箇所が見つからないとか他からの引き継ぎで修正する必要がある場面で、原因となる要素を見つけるのに使える便利スニペットです。 JavaScriptで要素特定 デベロッパーツールを開いてConsoleで下記を実行すると、ドキュメントサイズよりも大きい、つまり横スクロールが発生しているであろう要素を出力してくれます。 該当するものがなければundefinedのみが出力されます。 let docWidth = document.documentElement.offsetWidth; [].forEach.call(document.querySelectorAll('*'), (el) => { if ( el.offsetWidth > docWidth ) console.log(el); }); CSSで視覚的に特定 CS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
