https://b.hatena.ne.jp/FaceToFace/CSS/ CSSに関するFaceToFaceのはてなブックマーク (5) https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html FaceToFace 2025-03-06T20:40:01Z CSS 42 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html" title="CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-at-function-and-if.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html">CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a0bfae300ac940622a162c1fac9905c83e98b61f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202501%2F2025030501%402x.png" alt="CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります" title="CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります" class="entry-image" /></a></p><p>先週、CSSで関数を自分で定義できるカスタム関数が使えるようなる（紹介記事）ことをお伝えしましたが、続報として、なんとif()関数も使えるようになるそうです。すでにChrome Canaryではif()関数をCSSで使用できます。 CSSで使えるif()関数は、if()はもちろん、elseも使用でき、条件付きで値を選択できるようになります...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html" alt="はてなブックマーク - CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります" title="はてなブックマーク - CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/kd_rn/items/ed47adc705d4a88afc7d FaceToFace 2024-06-30T19:19:15Z CSS 85 <blockquote cite="https://qiita.com/kd_rn/items/ed47adc705d4a88afc7d" title="知らなかったCSSプロパティ 3選 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fkd_rn%2Fitems%2Fed47adc705d4a88afc7d" alt="" /> <a href="https://qiita.com/kd_rn/items/ed47adc705d4a88afc7d">知らなかったCSSプロパティ 3選 - Qiita</a></cite><p><a href="https://qiita.com/kd_rn/items/ed47adc705d4a88afc7d"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b3ecc875bf0d18a0c2f02b4a164b32058f55aa54/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fengineer-festa-ogp-background-074608b13b4bbe67c10ada41e7e2d292.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgxJUFBJUUzJTgxJThCJUUzJTgxJUEzJUUzJTgxJTlGQ1NTJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJTIwMyVFOSU4MSVCOCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzRkZGRkZGJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YmE1ZTczNDY1ZDAyYzRlZWUwYzdmZTViYzUwM2ExOGQ%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBrZF9ybiZ0eHQtY29sb3I9JTIzRkZGRkZGJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzgxNzU0MmE5NjdjYjQ2YTdkYTBlODE0MDRhOTMzMTc%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g44OA44Kk44Os44Kv44OI5Ye654mI5qCq5byP5Lya56S-%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523FFFFFF%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3De5c1783bd74362d5fac9378618c7fb3e" alt="知らなかったCSSプロパティ 3選 - Qiita" title="知らなかったCSSプロパティ 3選 - Qiita" class="entry-image" /></a></p><p>Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/kd_rn/items/ed47adc705d4a88afc7d"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/kd_rn/items/ed47adc705d4a88afc7d" alt="はてなブックマーク - 知らなかったCSSプロパティ 3選 - Qiita" title="はてなブックマーク - 知らなかったCSSプロパティ 3選 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/kd_rn/items/ed47adc705d4a88afc7d"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/230830/ FaceToFace 2023-08-30T20:57:01Z CSS 178 <blockquote cite="https://ics.media/entry/230830/" title="意外と奥深いCSSのfont-weightの話 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F230830%2F" alt="" /> <a href="https://ics.media/entry/230830/">意外と奥深いCSSのfont-weightの話 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/230830/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1e0d2b1cbc5ac473acf248bfc0da7bb914a728e4/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F230830%2Fimages%2Feyecatch.jpg" alt="意外と奥深いCSSのfont-weightの話 - ICS MEDIA" title="意外と奥深いCSSのfont-weightの話 - ICS MEDIA" class="entry-image" /></a></p><p>普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまう...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230830/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/230830/" alt="はてなブックマーク - 意外と奥深いCSSのfont-weightの話 - ICS MEDIA" title="はてなブックマーク - 意外と奥深いCSSのfont-weightの話 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230830/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.webcreatorbox.com/blog/css-mesh-gradients FaceToFace 2022-01-05T20:13:08Z CSS 43 <blockquote cite="https://www.webcreatorbox.com/blog/css-mesh-gradients" title="CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.webcreatorbox.com%2Fblog%2Fcss-mesh-gradients" alt="" /> <a href="https://www.webcreatorbox.com/blog/css-mesh-gradients">CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法</a></cite><p><a href="https://www.webcreatorbox.com/blog/css-mesh-gradients"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1bd53506366ad9a6b5dcee1dc0ebc12e09b9e1f2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2F89742c91f4da48db8c3058b859e70212%2Fthumb-mesh.jpg" alt="CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法" title="CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法" class="entry-image" /></a></p><p>CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！ 基本の円形グラデーションまずは...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.webcreatorbox.com/blog/css-mesh-gradients"><img src="https://b.hatena.ne.jp/entry/image/https://www.webcreatorbox.com/blog/css-mesh-gradients" alt="はてなブックマーク - CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法" title="はてなブックマーク - CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.webcreatorbox.com/blog/css-mesh-gradients"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1 FaceToFace 2018-06-10T08:56:51Z CSS 45 <blockquote cite="https://speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1" title="今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fgeckotang%2Fjin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018%3Fslide%3D1" alt="" /> <a href="https://speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1">今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -</a></cite><p><a href="https://speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d0adbc14dc91bd882ad922843b4d3bd4c0e78144/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F8fb61f927747430b8af455fef5cb5883%2Fslide_0.jpg%3F10193391" alt="今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -" title="今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -" class="entry-image" /></a></p><p>MTDDC Meetup HOKKAIDO 2018 http://mtddc2018.mt-ezo.net/ で発表したスライドです。</p><p><a href="https://b.hatena.ne.jp/entry/s/speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1"><img src="https://b.hatena.ne.jp/entry/image/https://speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1" alt="はてなブックマーク - 今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -" title="はてなブックマーク - 今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/speakerdeck.com/geckotang/jin-ri-karashi-eru-css-grid-mtddc-meetup-hokkaido-2018?slide=1"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>