https://b.hatena.ne.jp/Magicant/CSS/ CSSに関するMagicantのはてなブックマーク (14) https://zenn.dev/seekseep/articles/css-new-features-catch-up-2026 Magicant 2026-05-01T01:21:00Z CSS <blockquote cite="https://zenn.dev/seekseep/articles/css-new-features-catch-up-2026" title="最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fseekseep%2Farticles%2Fcss-new-features-catch-up-2026" alt="" /> <a href="https://zenn.dev/seekseep/articles/css-new-features-catch-up-2026">最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選</a></cite><p><a href="https://zenn.dev/seekseep/articles/css-new-features-catch-up-2026"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f7908b5f4f124219fd4411f2407b58cf6ae5ae1b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--CLlGzRfA--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E6%25259C%252580%2525E8%2525BF%252591%2525E3%252581%2525AECSS%2525E3%252580%252581%2525E5%252585%2525A8%2525E7%252584%2525B6%2525E8%2525BF%2525BD%2525E3%252581%252588%2525E3%252581%2525A6%2525E3%252581%2525AA%2525E3%252581%25258B%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252580%252582%2525E3%252581%252593%2525E3%252581%2525931%2525E3%252580%25259C2%2525E5%2525B9%2525B4%2525E3%252581%2525A7%2525E4%2525BD%2525BF%2525E3%252581%252588%2525E3%252582%25258B%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E3%252581%2525AA%2525E3%252581%2525A3%2525E3%252581%25259F%2525E6%2525A9%25259F%2525E8%252583%2525BD10%2525E9%252581%2525B8%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252582%252588%2525E3%252581%252593%2525E3%252582%252584%2525E3%252581%2525BE%2525E3%252581%25259F%2525E3%252581%25258F%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dHdVdiR3Z6VEQzRHJJbDNocmJvVVpOZkhtbHZSZHJzRGMzMTRGdV9BPXMyNTAtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選" title="最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選" class="entry-image" /></a></p><p>この記事では、2024〜2025年にかけて主要ブラウザで使えるようになったCSS（一部HTML）の機能を10個紹介します。「昔はセレクターとか頑張って追いかけてたけど、最近は全然追えてない」という方を対象としています。 それぞれの機能について、目的・できること・昔のやり方・注意点をまとめました。コードを見ながら「...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/seekseep/articles/css-new-features-catch-up-2026"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/seekseep/articles/css-new-features-catch-up-2026" alt="はてなブックマーク - 最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選" title="はてなブックマーク - 最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/seekseep/articles/css-new-features-catch-up-2026"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 65 https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html CSS のプログラミング言語化がさらに進んだなあと思ふと同時にどんどん書きやすく読みやすい言語ではなくなってきたなあとも Magicant 2024-05-22T04:19:34Z CSS <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html" title="CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-only-magnetic-link-effect.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html">CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b4cb640fd9471d0feee46d26abed8417925e8746/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202402%2F2024052201%402x.gif" alt="CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック" title="CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック" class="entry-image" /></a></p><p>ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。アンカーポジショニング（Anchor Positioning）を使用すると、レスポンシブにも完全対応、アイテムが二段・三段...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html" alt="はてなブックマーク - CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック" title="はてなブックマーク - CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 108 https://blog.tai2.net/utility-first-css.html Tailwind が出てきた背景は解ったが、自分はそもそも HTML/CSS でウェブアプリを作るのをやめろと思ってるのでこの類のものを推す気にはなれない Magicant 2024-03-15T07:59:05Z CSS Webデザイン <blockquote cite="https://blog.tai2.net/utility-first-css.html" title="Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.tai2.net%2Futility-first-css.html" alt="" /> <a href="https://blog.tai2.net/utility-first-css.html">Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史</a></cite><p><a href="https://blog.tai2.net/utility-first-css.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bae5f08b2da45d485f5beb1bf139a4428a49b32e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog.tai2.net%2Fimages%2Fog%2Futility-first-css.png" alt="Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史" title="Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史" class="entry-image" /></a></p><p>目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないこ...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.tai2.net/utility-first-css.html"><img src="https://b.hatena.ne.jp/entry/image/https://blog.tai2.net/utility-first-css.html" alt="はてなブックマーク - Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史" title="はてなブックマーク - Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.tai2.net/utility-first-css.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 173 https://gihyo.jp/article/2024/01/tailwindcss-design-systems-01 デザインシステムに必要なのはカスタムプロパティとかで定数を定義・参照することによってパターンを再利用することで、その観点では Tailwind の機能と関係ないのでは? Magicant 2024-01-26T01:14:35Z CSS <blockquote cite="https://gihyo.jp/article/2024/01/tailwindcss-design-systems-01" title="Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Farticle%2F2024%2F01%2Ftailwindcss-design-systems-01" alt="" /> <a href="https://gihyo.jp/article/2024/01/tailwindcss-design-systems-01">Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp</a></cite><p><a href="https://gihyo.jp/article/2024/01/tailwindcss-design-systems-01"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/54905183f113a5d27b9929edd22d202a70b967f7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2Farticle%2F2024%2F01%2Ftailwindcss-design-systems-01%2Ftailwind-css-book-1.jpg" alt="Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp" title="Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp" class="entry-image" /></a></p><p>2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/article/2024/01/tailwindcss-design-systems-01"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/article/2024/01/tailwindcss-design-systems-01" alt="はてなブックマーク - Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp" title="はてなブックマーク - Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/article/2024/01/tailwindcss-design-systems-01"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 126 https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai 便利さうといふ感想より先にこれを実装するブラウザー開発者大変さうといふ感想が出てきてしまふ Magicant 2022-07-27T22:58:21Z CSS <blockquote cite="https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai" title="2022年のモダンCSS改"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Ftonkotsuboy_com%2F2022nian-falsemodancssgai" alt="" /> <a href="https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai">2022年のモダンCSS改</a></cite><p><a href="https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6c3c253b9db1768013c95d0f3aa2d1c37b508464/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F088ce942d40b455ba5a3a44b01f653df%2Fslide_0.jpg%3F22188528" alt="2022年のモダンCSS改" title="2022年のモダンCSS改" class="entry-image" /></a></p><p>7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがク…</p><p><a href="https://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai"><img src="https://b.hatena.ne.jp/entry/image/https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai" alt="はてなブックマーク - 2022年のモダンCSS改" title="はてなブックマーク - 2022年のモダンCSS改" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 751 https://www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/ Magicant 2021-02-12T12:27:47Z HTML JavaScript CSS <blockquote cite="https://www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/" title="I don&#39;t want to do front-end anymore"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.askonomm.com%2Fblog%2Fi-dont-want-to-do-frontend-anymore%2F" alt="" /> <a href="https://www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/">I don&#39;t want to do front-end anymore</a></cite><p><a href="https://www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/"><img src="" alt="I don&#39;t want to do front-end anymore" title="I don&#39;t want to do front-end anymore" class="entry-image" /></a></p><p>I started coding when I was 14, around 2007 or so. The very first thing I wrote was HTML, then CSS. I liked making stupid little web pages containing youtube embeds and guest books (anyone remembers those?) full of marquees, blinks and gifs. Lots of gifs. The pages were very simple, but joyful to...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/"><img src="https://b.hatena.ne.jp/entry/image/https://www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/" alt="はてなブックマーク - I don&#39;t want to do front-end anymore" title="はてなブックマーク - I don&#39;t want to do front-end anymore" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.askonomm.com/blog/i-dont-want-to-do-frontend-anymore/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://www.aplab.jp/fantasai Magicant 2018-09-12T12:24:48Z 日本語 電子書籍 CSS <blockquote cite="https://www.aplab.jp/fantasai" title="私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.aplab.jp%2Ffantasai" alt="" /> <a href="https://www.aplab.jp/fantasai">私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く</a></cite><p><a href="https://www.aplab.jp/fantasai"><img src="" alt="私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く" title="私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く" class="entry-image" /></a></p><p>はじめに ​ この原稿は2013年に8割ほど書いたまま放置していたものを、Advanced Publishing Laboratory（APL）の「fantasaiの業績を日本でも知ってもらいたい」という意志に促され、サルベージして完成させたものです。したがって文中の「現在」は2013年中頃であることをお断りします。 原稿を放置したまま今日に至った...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.aplab.jp/fantasai"><img src="https://b.hatena.ne.jp/entry/image/https://www.aplab.jp/fantasai" alt="はてなブックマーク - 私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く" title="はてなブックマーク - 私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.aplab.jp/fantasai"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 56 https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit Magicant 2018-07-13T14:49:13Z ブラウザ プログラミング HTML CSS <blockquote cite="https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit" title="edit#slide=id.g25ae9c179b_0_144"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y%2Fedit" alt="" /> <a href="https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit">edit#slide=id.g25ae9c179b_0_144</a></cite><p><a href="https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dd026f8b9ef77482e97574e7b5bcb7a3defdfaaa/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyJJdT5njsRuOlX9ZCXbfjkVX5-cpyok0qU5bNbc1kWZsutgKKso6Fi1jWei5OCA10J_UCGGIYS4-OAdtdWO4OGqOnZzF86XzsEQW9oIhOrR54-mJOy8%3Dw1200-h630-p" alt="edit#slide=id.g25ae9c179b_0_144" title="edit#slide=id.g25ae9c179b_0_144" class="entry-image" /></a></p><p>このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。</p><p><a href="https://b.hatena.ne.jp/entry/s/docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit"><img src="https://b.hatena.ne.jp/entry/image/https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit" alt="はてなブックマーク - edit#slide=id.g25ae9c179b_0_144" title="はてなブックマーク - edit#slide=id.g25ae9c179b_0_144" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 38 https://mizchi.hatenablog.com/entry/2017/10/02/074916 Magicant 2017-10-02T03:32:27Z HTML WWW JavaScript CSS <blockquote cite="https://mizchi.hatenablog.com/entry/2017/10/02/074916" title="やはりHTML/DOMは再発明されるべきじゃないか - mizchi&#39;s blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmizchi.hatenablog.com%2Fentry%2F2017%2F10%2F02%2F074916" alt="" /> <a href="https://mizchi.hatenablog.com/entry/2017/10/02/074916">やはりHTML/DOMは再発明されるべきじゃないか - mizchi&#39;s blog</a></cite><p><a href="https://mizchi.hatenablog.com/entry/2017/10/02/074916"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ca407f38c35424a7adb2c4d4ee2e007c610644dd/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729889376%2F8599973812303636912%2F1506900624" alt="やはりHTML/DOMは再発明されるべきじゃないか - mizchi&#39;s blog" title="やはりHTML/DOMは再発明されるべきじゃないか - mizchi&#39;s blog" class="entry-image" /></a></p><p>と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが...</p><p><a href="https://b.hatena.ne.jp/entry/s/mizchi.hatenablog.com/entry/2017/10/02/074916"><img src="https://b.hatena.ne.jp/entry/image/https://mizchi.hatenablog.com/entry/2017/10/02/074916" alt="はてなブックマーク - やはりHTML/DOMは再発明されるべきじゃないか - mizchi&#39;s blog" title="はてなブックマーク - やはりHTML/DOMは再発明されるべきじゃないか - mizchi&#39;s blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/mizchi.hatenablog.com/entry/2017/10/02/074916"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 804 https://internet.watch.impress.co.jp/docs/news/1057772.html Magicant 2017-05-08T13:42:44Z CSS <blockquote cite="https://internet.watch.impress.co.jp/docs/news/1057772.html" title="「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰　"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Finternet.watch.impress.co.jp%2Fdocs%2Fnews%2F1057772.html" alt="" /> <a href="https://internet.watch.impress.co.jp/docs/news/1057772.html">「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰　</a></cite><p><a href="https://internet.watch.impress.co.jp/docs/news/1057772.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5141f1784bf866e6fb099c290218cb0a599a7e8d/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Finternet.watch.impress.co.jp%2Fimg%2Fiw%2Flist%2F1057%2F772%2Fa1.png" alt="「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰　" title="「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰　" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/internet.watch.impress.co.jp/docs/news/1057772.html"><img src="https://b.hatena.ne.jp/entry/image/https://internet.watch.impress.co.jp/docs/news/1057772.html" alt="はてなブックマーク - 「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰　" title="はてなブックマーク - 「CSSで縦書き」の普及を促進する「たてよこWebアワード」の受賞作発表、和風な「縦書きWebサイト」を表彰　" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/internet.watch.impress.co.jp/docs/news/1057772.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 31 https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character Magicant 2014-05-16T12:55:05Z CSS <blockquote cite="https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character" title="Is it possible to apply CSS to half of a character?"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F23569441%2Fis-it-possible-to-apply-css-to-half-of-a-character" alt="" /> <a href="https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character">Is it possible to apply CSS to half of a character?</a></cite><p><a href="https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a591284234e1f367e22f174fbaf1317a71987680/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fstackoverflow.com%2FContent%2FSites%2Fstackoverflow%2FImg%2Fapple-touch-icon%402.png%3Fv%3D0f0cab681579" alt="Is it possible to apply CSS to half of a character?" title="Is it possible to apply CSS to half of a character?" class="entry-image" /></a></p><p>What I am looking for: A way to style one HALF of a character. (In this case, half the letter being transparent) What I have currently searched for and tried (With no luck): Methods for styling half of a character/letter Styling part of a character with CSS or JavaScript Apply CSS to 50% of a cha...</p><p><a href="https://b.hatena.ne.jp/entry/s/stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character"><img src="https://b.hatena.ne.jp/entry/image/https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character" alt="はてなブックマーク - Is it possible to apply CSS to half of a character?" title="はてなブックマーク - Is it possible to apply CSS to half of a character?" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 23 https://chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756 Magicant 2013-06-14T14:58:29Z CSS <blockquote cite="https://chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756" title="CSS3での日本語縦中横を考える - ちくちく日記"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fchiku-chiku-nikki.hatenablog.com%2Fentry%2F20130613%2F1371142756" alt="" /> <a href="https://chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756">CSS3での日本語縦中横を考える - ちくちく日記</a></cite><p><a href="https://chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6fdd30da6e3676b8b01ea876a4b1f18efc717b04/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F240e0edd85501e5ca1577463572abe68f140d029%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fa%252Fakane_neko%252F20130613%252F20130613173203.png" alt="CSS3での日本語縦中横を考える - ちくちく日記" title="CSS3での日本語縦中横を考える - ちくちく日記" class="entry-image" /></a></p><p>【問題】 日本語縦組で文字が縦中横されたとき、組まれた文字の文字幅はどうなっているのが正解か A. 1文字の幅（1em）に納める B. 何もせずそのままの幅にしておく ▲（左）A. 1文字の幅（1em）に納める　（右）B. 何もせずそのままの幅にしておく 何の話をしているのかというと、これ、、CSS Writing Modes Level3で定...</p><p><a href="https://b.hatena.ne.jp/entry/s/chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756"><img src="https://b.hatena.ne.jp/entry/image/https://chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756" alt="はてなブックマーク - CSS3での日本語縦中横を考える - ちくちく日記" title="はてなブックマーク - CSS3での日本語縦中横を考える - ちくちく日記" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/chiku-chiku-nikki.hatenablog.com/entry/20130613/1371142756"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 107 https://code.google.com/archive/p/zen-coding Magicant 2011-07-04T13:26:25Z HTML CSS <blockquote cite="https://code.google.com/archive/p/zen-coding" title="zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcode.google.com%2Farchive%2Fp%2Fzen-coding" alt="" /> <a href="https://code.google.com/archive/p/zen-coding">zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting</a></cite><p><a href="https://code.google.com/archive/p/zen-coding"><img src="" alt="zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting" title="zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting" class="entry-image" /></a></p><p>Code Archive Skip to content Google About Google Privacy Terms</p><p><a href="https://b.hatena.ne.jp/entry/s/code.google.com/archive/p/zen-coding"><img src="https://b.hatena.ne.jp/entry/image/https://code.google.com/archive/p/zen-coding" alt="はてなブックマーク - zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting" title="はてなブックマーク - zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/code.google.com/archive/p/zen-coding"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 346 http://deztec.jp/design/10/08/01_html.html Magicant 2010-09-22T11:34:58Z HTML CSS <blockquote cite="http://deztec.jp/design/10/08/01_html.html" title="「CSS3でドラえもん」はスゴイけれど……"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fdeztec.jp%2Fdesign%2F10%2F08%2F01_html.html" alt="" /> <a href="http://deztec.jp/design/10/08/01_html.html">「CSS3でドラえもん」はスゴイけれど……</a></cite><p><a href="http://deztec.jp/design/10/08/01_html.html"><img src="" alt="「CSS3でドラえもん」はスゴイけれど……" title="「CSS3でドラえもん」はスゴイけれど……" class="entry-image" /></a></p><p>1． 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなブックマークニュース 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD CSS3 ドラえもん 画像を一切使わないCSS3で製作した新サイト「NetaGear」！ - 裏技shop DD NetaGear 「すごい」と思う。そのアイデアにも技術にも...</p><p><a href="https://b.hatena.ne.jp/entry/deztec.jp/design/10/08/01_html.html"><img src="https://b.hatena.ne.jp/entry/image/http://deztec.jp/design/10/08/01_html.html" alt="はてなブックマーク - 「CSS3でドラえもん」はスゴイけれど……" title="はてなブックマーク - 「CSS3でドラえもん」はスゴイけれど……" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/deztec.jp/design/10/08/01_html.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 29