| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
| html_css [2019/08/02 03:30] – ともやん | html_css [2025/04/21 03:41] (現在) – [参考文献] ともやん |
|---|
| <ifauth !@loggedinusers><html> | ====== HTML + CSS 関連 ====== |
| <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | |
| <script> | ===== 基本 ===== |
| (adsbygoogle = window.adsbygoogle || []).push({ | [[https://note.com/takamoso/n/nde1275183086|📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い｜たかもそ／Web Creator.｜note]]\\ |
| google_ad_client: "ca-pub-0791334967460971", | |
| enable_page_level_ads: true | ===== カテゴリー別 ===== |
| }); | [[html_css:embed_youtube_media_responsive|YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法]]\\ |
| </script></html></ifauth> | [[html_css:video_structured_data|動画の構造化データ]]\\ |
| ====== HTML5 + CSS3 関連 ====== | [[html_css:embed_twitter_tweets_responsive|Twitter のツイートを埋め込みする方法]]\\ |
| [[html_css:youtube_media_responsive|YouTube 動画の埋め込みを CSS3 のメディアクエリを使ってレスポンシブ対応する方法]]\\ | [[:html_css:special_characters|特殊文字]]\\ |
| | [[:html_css:unicode_emoji|Unicode 絵文字]]\\ |
| | [[:html_css:prefers-color-scheme|Web サイトのダークモード対応]]\\ |
| | [[:html_css:css_preprocessor|CSS プリプロセッサ]]\\ |
| | [[:html_css:replace_gifs_with_videos|アニメーションGIFをビデオに置き換えてページの読み込みを高速化する]]\\ |
| | [[:html_css;webkit_custom_scrollbar|WebKit のカスタム スクロールバー]]\\ |
| | [[https://www.asobou.co.jp/blog/web/css2|【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ | ビジネスとIT活用に役立つ情報]]\\ |
| | [[https://www.itra.co.jp/webmedia/what-is-pseudo-elements.html|擬似要素とは？便利な擬似要素を基礎から解説！]]\\ |
| |
| ===== CSS ジェネレータ ===== | ===== CSS ジェネレータ ===== |
| [[html_css:css_loading_animation|CSS ローディングアニメーション]]\\ | [[html_css:css_loading_animation|CSS ローディングアニメーション]]\\ |
| | [[html_css:minimum_font-size_for_each_browser|ブラウザ別 最小フォントサイズ]]\\ |
| | [[https://css-tricks.com/how-to-create-neon-text-with-css/|How To Create Neon Text With CSS | CSS-Tricks]]\\ |
| | |
| | ===== Sass、Scss、Less ===== |
| | [[https://brriant.hatenablog.com/entry/2015/09/22/145413|Sass？ Scss？！ Less！？ CSSと何が違うの？ ・・まとめてみた。 - sparkle]]\\ |
| | |
| | ==== Less ==== |
| | [[:html_css:less|Less - Leaner Style Sheets]]\\ |
| | |
| | ==== JSS ==== |
| | [[https://cssinjs.org/|JSS - A lib for generating CSS from JavaScript]]\\ |
| | |
| | ===== ツール ===== |
| | **HTML Tidy**は、無効なハイパーテキストマークアップ言語（HTML）を修正し、潜在的なWebアクセシビリティエラーを検出し、結果のマークアップのレイアウトとインデントスタイルを改善するためのコンソールアプリケーションである。\\ |
| | [[wp>HTML_Tidy|HTML Tidy - Wikipedia]] より\\ |
| | |
| | [[http://www.html-tidy.org/|HTML Tidy]]\\ |
| | [[http://tidy.sourceforge.net/|HTML Tidy Project Page]]\\ |
| | |
| | ===== 参考文献 ===== |
| | [[https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages|読み込みが速い HTML ページを作成するための Tips - 開発者ガイド | MDN]]\\ |
| | |
| | [[https://yuyauver98.me/hover-transform-scale/|【CSS】hover時にtransform:scale()で画像を拡大表示させる方法 | ゆうやの雑記ブログ]]\\ |
| | [[https://cotodama.co/css_mouseover_img/|CSS｜マウスオーバーで画像に効果を入れる方法 | コトダマウェブ]]\\ |
| | [[https://e-n-a.jp/web-creating/technical-blog/2019/09/04/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E3%82%82hover%E3%82%92%E5%AF%BE%E5%BF%9C%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/|スマホでもhoverを対応させる方法 | ホームページ制作・LP制作 | 東京・大阪 | 株式会社イーナ]]\\ |
| | [[http://www.hp-stylelink.com/news/2015/01/20150107.php|CSSだけでホバーエフェクトが実装できる！Hover.cssの使い方 | Web制作会社スタイル]]\\ |
| | [[https://daib-log.com/hover/|スマホのhover対策を解説！（PCと同じCSS効果を実現）]]\\ |
| | |
| | [[https://coliss.com/|コリス]]\\ |
| | [[https://baigie.me/officialblog/2019/11/26/high-speed-frontend/|サイトの表示高速化につながる18のこと | knowledge / baigie]]\\ |
| | |
| | [[https://stateofcss.com/ja-JP|State of CSS]]\\ |
| | |
