CSS関連Tips の変更点 - 技術情報Wiki

追加された行はこの色です。
削除された行はこの色です。
CSS関連Tips へ行く。
CSS関連Tips の差分を削除
#author("2024-04-11T14:22:13+09:00","default:irrp","irrp")
#author("2024-04-26T11:34:55+09:00","default:irrp","irrp")
→CSS関連

#contents


*Tips/サンプル [#bf64fe79]
-[[知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説 | コリス>https://coliss.com/articles/build-websites/operation/css/relative-length-units-based-on-font.html]] 2024.3

-[[SVGでラインアニメーションを作る #CSS - Qiita>https://qiita.com/sekappy_official/items/f138d840352dee7697c0]] 2024.1

-[[ゲーミングCSSを作ってQiitaを光らせてみた #CSS - Qiita>https://qiita.com/ishi720/items/d8a4ff56ad0defb8b87b]] 2023.11

-[[【JSは使わない】HTMLとCSSのみで動く変身ベルトを作る【画像も使わない】 - Qiita>https://qiita.com/kurokky/items/b4b6c509c01281dd108c]] 2023.7

-[[自分で描いた絵を手書きでcss化する遊び - Qiita>https://qiita.com/kotomo16/items/8c00178c7ae89052cb78]] 2023.2

-[[Why is your z-index not working again? 階層は一体どうなっているの？｜ONE CAREER Tech Blog>https://note.com/dev_onecareer/n/n4e9f378aa847]] 2024.4
-[[ワイ「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


*Tailwind CSS [#hb7188c9]
-[[Tailwind CSSでz-indexの値をマジックナンバーにしないための小ワザ>https://zenn.dev/manalink_dev/articles/tailwind-zindex-tips]] 2024.4

-[[Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社>https://techracho.bpsinc.jp/hachi8833/2023_11_08/136255]] 2024.4

-[[Tailwind CSS実践入門 ～まず作ってから、あとで共通化する 記事一覧 | gihyo.jp>https://gihyo.jp/list/group/Tailwind-CSS%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%EF%BD%9E%E3%81%BE%E3%81%9A%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%8B%E3%82%89-%E3%81%82%E3%81%A8%E3%81%A7%E5%85%B1%E9%80%9A%E5%8C%96%E3%81%99%E3%82%8B#rt:/article/2023/07/tailwindcss-practice-02]] 2023.7

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


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



*ブラウザ対応 [#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]]



*ブラウザスタイルの初期化 [#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;
 }