#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でリストを整形するなら覚えておくべき8つのリストデザインサンプル集>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 👩‍💻👨‍💻>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 *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共通の9つの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でよく遭遇する6つのバグとその解決方法>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", "MS P ゴシック", san-serif; }