Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙♂️ CSS trick: transition from height 0 to auto! by Fra
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
デザイナー、Web制作者もできるSvelte入門
デザイナー、Web制作者もできるSvelte入門 ■第１話：Svelteのすすめ （最終更新日：2024.03.24） 「Svelteならできそう！」 現在フロントエンドのフレームワークで最もメジャーなものはReactである。 しかしながら、Reactは関数型言語の理解などが必要で学習コストが高く、使えるのはある程度プログラミングができる人に限られる。 そこで、Web制作ができる人であれば充分理解が可能なフロントエンドフレームワーク、Svelteが登場した。 今回は、比較的簡単に習得できるフレームワーク、Svelteについて解説する。 １.Svelteの特徴、SPAの比較 まずはSvelteの基本コードを見てみよう。 通常、JavaScriptは最上部、HTMLは中部、そしてCSSは最下部に記述する。 順序に厳密なルールはないが、基本的にはこの順序で書く。 HTML、CSS、JavaScr
HTMLとCSSを真剣に学びたい人におすすめ！ 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング
HTMLとCSSの実務に役立つ知識やテクニック、考え方を学びたい人にお勧めの解説書を紹介します。 デザイナーから渡されたモックアップを元に、情報の構造やデザイナーの意図を読み解き、コンテンツをブロックに分解し、コーディングの方針を検討し、HTMLのマークアップでどのように構造を設計し、CSSでスタイルする際に気をつけることなど、各ステップごとに詳しくていねいに解説されています。 HTMLの要素や属性、CSSのプロパティや値はそれなりに理解していて、UIコンポーネントなら気軽に実装できるけど、Webページや複数ページを実装すると、「納得のいく実装ができない」「もう少しクリーンな設計はできなかったのか」と、コーディングのスキルを磨きたい人にお勧めの解説書です。 知識やテクニックだけでなく、考え方についても触れられているので、本書から得られるものは大きいと思います。
gulp で markdown から html と pdf を生成してみる - Qiita
やりたいこと markdown から、html と、pdf を自動で生成したい gulp ってなあに? htmlのビルドツール gulpjs/gulp ビルドツール? 最近のマークアップ界隈では、コードを書いてからリリースするまでにいろいろやることがある coffeescript の js 化 javascript の minify Sass の css 化 などなど... その辺の処理をまとめて自動化してくれるツール rake とか make の html 版だと思うと良さそう どんなのがあるの? メジャーなのは、Grunt gulpは、ビルドファイルが Grunt より書きやすいらしく、こちらに移るユーザが増えてきて、米国では gulp vs Grunt で大戦争中らしい 今回は、ビルドファイルが書きやすいと聞いて、gulp を試してみる インストール インストールは、npm を使う
多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう - Qiita
追記（2020.4.19） Pandoc User’s Guideを日本語に全訳しました。 よろしければご参照ください。 新しい翻訳をプレリリースしました！（翻訳途中の部分もあります） Pandocユーザーズガイド 日本語版 [2.7.2] — 日本Pandocユーザ会 2019.02.21 ドキュメント 旧日本語版：Pandoc ユーザーズガイド 日本語版 はじめに 今回は、ドキュメント作成Tips Advent Calendar 2012の1日目 （マインドマップから全てを紡ぎ出す - XMind+Pandocのドキュメント作成術 -） で少し紹介したPandocというツールについて、もう少し深く掘り下げて紹介したいと思います。 MarkdownとかreStructuredTextとか、流行ってますよね いわゆる軽量マークアップ言語が最近流行しています。特にMarkdownは猫も杓子も
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
