CSS関連 の履歴差分(No.1)

• 履歴一覧
• 現在との差分 を表示
• ソース を表示
• 履歴 を表示
• CSS関連 へ行く。
  • 1 (2022-12-23 (金) 10:51:07)
  • 2 (2023-02-08 (水) 13:28:12)
  • 3 (2023-02-18 (土) 11:11:48)
  • 4 (2023-07-25 (火) 22:15:53)
  • 5 (2023-08-01 (火) 17:33:31)
  • 6 (2023-08-07 (月) 12:45:11)
  • 7 (2023-09-28 (木) 10:30:53)
  • 8 (2023-10-24 (火) 21:23:48)
  • 9 (2023-11-07 (火) 09:38:25)
  • 10 (2023-12-21 (木) 13:40:58)
  • 11 (2024-03-08 (金) 23:44:15)
  • 12 (2024-03-16 (土) 22:31:05)
  • 13 (2024-04-01 (月) 14:17:56)

• 追加された行はこの色です。
• 削除された行はこの色です。

→HTML関連

→Web技術関連

→JavaScript関連

#contents

*用語 [#xa33efe1]
-置換要素 replaced element：要素の内容がドキュメントの内容では直接表せないものと置き換えられる要素。コンテンツがない。例）img, input
-非置換要素 nonreplaced element：要素自体が表示されるもの。例）span
-ブロックレベル要素：親要素のコンテンツエリアを埋める要素。要素ボックスの前後に改行を生成する。例）p, div
-インラインレベル要素：行の流れを分断することなく、テキスト行に要素ボックスを生成する。要素ボックスの前後に改行を生成しない。例）a, strong, em


*一般記事 [#yb6dea1d]
-[[僕「デザイナーが言うてる〇〇モーフィズムってなんやねん」 - Qiita>https://qiita.com/alpaca1231/items/6c980848a783660aef8d]] 2022.12
--ニューモーフィズム、グラスモーフィズム、クレイモーフィズム

-[[GCP上でGoogle Cloud Speech-to-Textをpythonで動かしてみた - Qiita>https://qiita.com/kakuchotakaku/items/fc7ea5a6be3578577065]] 2022.9

-[[CSSでよく使う指定方法をまとめてみた - Qiita>https://qiita.com/kabechiyo13/items/01d6652a5fbfe291595a]] 2022.9

-[[10 GitHub Repositories to Become a CSS Master - DEV Community>https://dev.to/martinageradams/10-github-repositories-to-become-a-css-master-9h4]] 2022.8

-[[IEのサポート終了で使えるHTML&CSS - Qiita>https://qiita.com/yoshimochin/items/216b5ac82a8827b8f505]] 2022.6

-[[【CSS】Gridレイアウトを使いこなすエンジニアはかっこいい！ - Qiita>https://qiita.com/degudegu2510/items/8ef80cd811bf7d21c060]] 2022.4

-[[【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qiita>https://qiita.com/degudegu2510/items/2939294031cdf6fc23b5]] 2022.1
--Grid Layout, clamp(), object-fit

-[[【初心者必見】CSSチートシート集まとめ - 現役エンジニアが使い方も合わせて徹底解説(保存版)>https://sbucks-blog.com/program/tool/cheatsheet/css02/]] 2021.7

-[[【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ>https://qiita.com/mame_hashbill/items/e5f01d0f2523de6a13e5]] 2019.11

-[[今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜>https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/]]

-[[[HTML/SCSS]BEM設計を図を使って解説してみる>https://qiita.com/mame_hashbill/items/c5b09461d7acfce047fa]] 2019.8
-[[scssをwebpack4でトランスパイル>https://qiita.com/t-motoki/items/4eab2fcd46198c2377b3]] 2019.3

-[[レスポンシブ・ウェブデザインでの CSS コードの書き方>http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html]] 2012.10.9

-[[CSS の勉強中に困ったら>http://unformedbuilding.com/articles/if-stuck-in-the-study-of-css/]] 2012.7.4

-[[CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ>http://webdesignrecipes.com/css-visual-formating-model/]]

-[[2010年総まとめ：CSSの実用的なテクニック集>http://coliss.com/articles/build-websites/operation/css/best-of-css-tutorials-in-2010.html]] 2011.1.6

-[[画像を一切使わずにCSS3だけでドラえもんを描いてみた>http://shopdd.blog51.fc2.com/blog-entry-932.html]] 2010.5.5

-[[CSSだけで JavaScriptのような動きを実装するサンプル30>http://blog.creamu.com/mt/2010/04/cssjavascript30.html]] 2010.4.28

-[[覚えて良かったCSSテクニック>http://zaru.tofu-kun.org/2010/04/22/%E8%A6%9A%E3%81%88%E3%81%A6%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9Fcss%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/]] 2010.4.23

-[[Tableのヘッダーをすべてのページに表示>http://www.ideaxidea.com/archives/2009/10/table_repeat_header_css.html]] 2009.10.27

-[[Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる「CSSViewer」>http://www.moongift.jp/2008/12/cssviewer/]] 2008.12.27
--https://addons.mozilla.org/en-US/firefox/addon/2104

-[[インストール不要！Web制作者必見のCSS解析ツール>http://ascii.jp/elem/000/000/193/193926/]]
--http://www.westciv.com/xray/index.html
-[[ドロップダウン型ナビゲーションを作るフレームワーク>http://coliss.com/articles/build-websites/operation/css/1593.html]]
-[[CSSを書くときに使っているツールの紹介>http://labs.unoh.net/2008/08/introduction-of-css-coding-tools.html]] 2008.8.7

-[[ムダなCSSをチェック>http://news.atode.cc/bar.php?u=http%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2007%2F09%2Fcsswebcss_redun.html]]

-[[CSS Library>http://www.dynamicdrive.com/style/]]

-http://jp.cssez.com/
--CSSEZは、短時間で簡単にCSSデザインが作成できる、オンラインCSSメーカーです。

-[[CSSデザインサイトまとめ>http://gigazine.net/index.php?/news/comments/20070425_bestcss/]]


*Tailwind CSS [#hb7188c9]
-[[A Beginner's Guide to Tailwind CSS - DEV Community 👩‍💻👨‍💻>https://dev.to/aahil13/a-beginners-guide-to-tailwind-css-81f]] 2022.8
-[[Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜>https://wywy.jp/blogs/tailwind-css-photo]] 2022.8
-[[【入門】Tailwind CSS入門に役立つ技術ブログ6つの紹介>https://wywy.jp/blogs/tailwind-css-articles]] 2022.8


*入門サイト [#n8a25b08]
-[[CSS Tutorial links>http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/]]
-http://www.free-css-templates.com/
-[[CSS for Beginners:http://www.codeproject.com/html/cssbeginner.asp]]
-[[Ten more CSS tricks you may not know:http://www.codeproject.com/useritems/css-tricks-2.asp]]
-[[CSSリファレンス:http://hp.vector.co.jp/authors/VA013937/cssref/index.html]]
-[[スタイルシートリファレンス:http://www.htmq.com/style/index.shtml]]


*ブラウザ対応 [#m27a8ac0]
-[[IE共通の９つのCSSバグをそれぞれ解決する方法>http://phpspot.org/blog/archives/2009/11/ie9css.html]]
-[[IE6、IE7、IE8におけるCSSの違いまとめ>http://journal.mycom.co.jp/news/2009/10/16/062/index.html]] 2009.10.17
-[[IE6で泣かないための、9つのCSSハック>http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack01/01.html]] 2009.10.9
-[[IE6でよく遭遇する６つのバグとその解決方法>http://coliss.com/articles/build-websites/operation/css/1036.html]]


*Bootstrap [#mbf2efbe]
-[[Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】>https://techacademy.jp/magazine/6270]] 2017
-[[超便利！Twitter BootstrapでさくさくWeb開発>http://blog.asial.co.jp/887]]
--CSSのフレームワークです。
--https://getbootstrap.com/


*Tips/サンプル [#bf64fe79]
-[[ワイ「z-index完全に理解した」 - Qiita>https://qiita.com/Yametaro/items/399a383b48ec2082997e]] 2022.9

-[[【React / Next】gifを使わずにcssだけでオーバーレイスピナー(loading)を実現する - Qiita>https://qiita.com/tak001/items/945e479d496e5366988b]] 2022.8

-[[【CSS】 Magic Circle>https://codepen.io/_developes/pen/PoRLwNE]] 2022.8

-[[Can I use... Support tables for HTML5, CSS3, etc>https://caniuse.com/]] 2022.7

-[[正多面体5種類全部描くぞ。HTMLとCSSだけで。 - Qiita>https://qiita.com/ichimonji_haji/items/53e48d172077433bf820]] 2022.7

-[[Amazing! Implementing artistic graphics with CSS - DEV Community>https://dev.to/chokcoco/amazing-implementing-artistic-graphics-with-css-1plg]] 2022.7
--This article mainly introduces how to use CSS to quickly create beautiful CSS graphics with the help of CSS-doodle.

-[[16 CSS Units That Every Good Web Developer Should Know | by Nehal Khan | Jul, 2022 | Level Up Coding>https://levelup.gitconnected.com/16-css-units-that-every-good-web-developer-should-know-8727a762f538]] 2022.7

-[[2行目から字頭をずらしたい時のHTML、CSSの書き方（インデント） - Qiita>https://qiita.com/yuta0929/items/258c5d750ab77cd13ac8]] 2022.4

-[[【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 - Qiita>https://qiita.com/pk_bb/items/b2e05b8aedb70ad882df]] 2022.1


-[[Defensive CSS - Ahmad Shadeed>https://ishadeed.com/article/defensive-css/]] 2021.12

-[[動くWebデザインアイデア帳 | 動くWebデザインアイディア帳>https://coco-factory.jp/ugokuweb/]] 2021.11

-[[【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30>https://saruwakakun.com/html-css/reference/box]] 2019

-[[CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則>https://coliss.com/articles/build-websites/operation/css/improve-your-css-with-these-5-principles.html]] 2019.11

-[[tableを使わないで位置を揃える方法>https://teratail.com/questions/13876]] 2015.8

-[[枠線などを指定したい！CSSのborderの使い方【初心者向け】>https://techacademy.jp/magazine/8626]]

-[[CSSだけでできるあんなことこんなこと>https://qiita.com/rana_kualu/items/43e8841a4fccb8a80113]] 2019.7.16

-[[改行削除するくらいなら gzip したらいいじゃない>http://hyper-text.org/archives/2012/11/webcontents_gzip.shtml]] 2012.11.16

-[[レスポンシブWebデザインでテーブルを使う時の小技>http://design-spice.com/2012/11/01/responsive-table/]] 2012.11.1

-[[[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework>http://coliss.com/articles/build-websites/operation/css/css-framework-kubeframework-for-professional-developers.html]] 2012.9.20

-[[CSSの知識をもっと深める30+2の小技テクニック集>http://weboook.blog22.fc2.com/blog-entry-260.html]] 2011.6.10

-[[1px欠けの角丸ボックスをCSSだけで作る方法>http://www.webbibo.com/stylesheet/layout/1pxcorner.html]] 2009.12.22

-[[モダンブラウザでも使えるCSSハック18選>http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack03/01.html]] 2009.12.16

-[[JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル>http://phpspot.org/blog/archives/2009/12/javascriptcss_3.html]]

-[[とっても使えるoverflowプロパティ。その使い方いろいろ>http://css-happylife.com/log/css-template/000751.shtml]]

-[[ページ送りのサンプル4種+2>http://css-happylife.com/log/css-template/000750.shtml]] 2009.10.28

-[[覚えておいて損は無い CSSの定番テクニック>http://c-brains.jp/blog/wsg/09/06/18-223233.php]] 2009.6.18

-[[Scrollovers>http://www.scrollovers.com/]]
-[[Nifty Corners>http://www.html.it/articoli/nifty/index.html]]

-[[CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集>http://phpspot.org/blog/archives/2009/10/css_97.html]] 2009.10.21
-[[よいCSS開発を行うための8のTIPS>http://phpspot.org/blog/archives/2009/04/css_83.html]] 2009.4.1
-[[CSSでイメージをオシャレに修飾するサンプル集>http://phpspot.org/blog/archives/2008/05/csscss_decorati.html]]
-[[アイデア満載のスタイルシート30選>http://coliss.com/articles/build-websites/operation/css/1050.html]]
-[[Scriptを使わないCSSエフェクト、Tipsいろいろ>http://www.designwalker.com/2008/04/pure-css.html]]
-[[DiggやFlickrのようなページ切り替えメニュー>http://www.ideaxidea.com/archives/2008/03/diggflickrpaginationcss.html]]
-[[知っておくといいかも知れない8つの小技>http://www.ideaxidea.com/archives/2008/03/_8_premium_one_line.html]]
-[[縦方向にセンタリング>http://blog.livedoor.jp/dankogai/archives/51011227.html]]
-[[ページ全体に枠線をつけるCSS>http://phpspot.org/blog/archives/2008/02/css_53.html]]
-[[CSS Gradient Text Effect>http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/]]
-[[101 CSS Techniques Of All Time Pt.1>http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html]]
--[[同 Pt.2>http://www.noupe.com/css/101-css-techniques-of-all-time-part2.html]]
--[[101のCSS技術というエントリから抜粋>http://e0166.blog89.fc2.com/blog-entry-372.html]]
-画面用と印刷用のスタイルシートを分けたいときはlinkタグのmedia属性を使う
 <link rel="stylesheet" type="text/css" href="hoge.css" />
 <link rel="stylesheet" type="text/css" href="print.css" media="print" />
-[[Changing Page Syle for Printing:http://www.codeproject.com/html/ChangePageStyles.asp]]
-[[CSSでWii風のシンプルで角がまるいボタンを作る>http://gigazine.net/index.php?/news/comments/20070215_wii_buttons/]]
--http://www.hedgerwow.com/360/dhtml/css-simple-link-button-with-round-corner/demo.php

**Flexbox [#h7977d23]
-[[【図解】ちゃんと理解するフレックスボックス【CSS】 - Qiita>https://qiita.com/Naughty1029/items/dc8e1b93fe0acc89aa71]] 2022.5
-[[今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbox レイアウト編〜>https://nulab-inc.com/ja/blog/nulab/css-basics-for-engineer-flexbox/]] 2017.7
-[[Mozillaのリファレンス>https://developer.mozilla.org/ja/docs/Web/CSS/flex]]
-[[「CSSだけ」初心者に贈る、flexbox基本のキ - Qiita>https://qiita.com/2san/items/e542bb5f3fb610f557ee]] 2022.2
-[[日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス>https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet]] 2017



*ブラウザスタイルの初期化 [#sebaea52]
-参照：http://code.nanigac.com/source/view/134
 *{
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: black;
    font-size: medium;
    font-family: Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐ ゴシック", san-serif;
 }


*セレクタの種類 [#r2e6bda6]
-[[CSSセレクタ総復習>http://redline.hippy.jp/lab/css/css_20105.php]]

-基本のセレクタ
 body,h1{プロパティ名:値}
 *{ } すべてに適用

-idセレクタ
 div#header { } divタグの id="header" の要素に適用
 #header{} すべてのタグの id="header" 要素に適用

-クラスセレクタ
 div.hoge{} class="hoge" の指定のある要素に適用
 div[class="hoge"] {} 別表記
 .hoge{} すべてのclass="hoge"指定のある要素に適用

-疑似クラスセレクタ
 a:visited すでに訪れたことのあるリンク
--その他、:hover, :focus, :active など

-子孫セレクタ
 A B {} Aタグの中のBタグの要素に適用
-擬似要素 セレクタの最後に付ける
--:first-letter
--:first-line
--:before
--:after

-属性セレクタ
 h1[class] {} h1タグでclass属性を持っているものを選択
 div[id="header"] {} divタグの id="header" の要素に適用


*セレクタの詳細度(specificity) [#g714c9af]
-複数のセレクタ指定で同じ要素に複数のスタイル指定が競合した場合は、セレクタの詳細度が最も詳細なスタイルが適用される。
-詳細度の高さは ID ＞ クラス、属性選択、疑似クラス ＞ 要素 （p.66)


*コンビネータ [#fa0af06e]
-子コンビネータ child combinator: 子供の要素を指定 例）h1 > strong{}
-隣接コンビネータadjacent-sibling combinator: 兄弟の要素を指定 例）h1+p {}


*プロパティの種類 [#u5714def]
-基本書式＝<名前>:<値>;
-margin:0;
-color:#fff;
-background:#fff;
-display:none; //ある要素を表示させたくないとき
-margin, border, padding, height, width の関係

#ref(cssbox.png)

*コメント [#wd6412a3]
-コメントは /* */で囲む