モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
CSSで角丸を美しく実装する方法、相対角丸のテクニック
角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか？ 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。 Relative rounded corners by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで美しい角丸を実装する方法、相対角丸 CSSで美しい角丸を実装する方法、相対角丸 角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。 外側と内側に同じ値の角丸 この角丸に違和感を感じる理由は、値が同じ（たとえば、20px）であっても、それぞれの角丸の中心点が異なるからです。同じ値であ
レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック
border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。 この難しい条件をCSSの関数で実装するテクニックを紹介します。 Conditional Border Radius In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの値をスマホとデスクトップで変えるテクニック 実装方法の解説 なぜ、9999を使用するのか 終わりに はじめに 私はデベロッパーがどのようなCSSを書いている
CSS 有機的に動く円の作成方法 - by Takumi Hirashima
CSS で有機的に動く円の作成方法を紹介します。 例えば、ページのアクセントや、サムネイルのワンポイントに便利な方法です。 CSSで有機的な円を作る CSSで有機的な円を動かす 円の動きを滑らかにする 円の中に写真を入れるとうまくいかない CSSで有機的な円を作る CSS で有機的な円を作るには border-radius に複数のプロパディ値を指定します。 実装時の見た目はこちら。 ベースのHTMLはこちら。 <div class="round-wrap"> <div class="round"></div> </div> 続いてCSSの指定はこちら。 .round-wrap { width: 200px; height: 200px; } .round { width: 100%; height: 100%; border-radius: 30% 70% 60% 40% / 30% 4
CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法
CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装 この実装で学んだこと はじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され
CSS 角丸 border-radius の設定方法 - by Takumi Hirashima
CSS で角丸を border-radius で設定する方法を紹介します。 例えば、角丸ボタンや正円を作りたい時に便利な方法です。 CSS 角丸 border-radius の設定方法 角丸の四隅を一括で設定する方法 角丸の四隅を別々の値で設定する方法 角丸の横と縦の値を別々に設定する方法 CSS 角丸 border-radius の設定方法 CSS で角丸表現をするには border-radius プロパティを使用します。 角丸の四隅を一括指定する方法や、四隅の大きさを細かく設定できるので、順を追って詳しく説明します。 角丸の四隅を一括で設定する方法 四隅の角丸のサイズを一括で設定する場合は border-radius に値を一つ設定します。 実際の見た目とCSSの指定は次のようになります。 .radius { border-radius: 20px; } 角丸の四隅を別々の値で設定する
HTML テーブルを角丸にする方法 - by Takumi Hirashima
HTML テーブルタグで角丸にする方法を紹介します。 例えば、テーブルタグにアクセントを加えたい時に便利な方法です。 テーブルタグを角丸にする方法 テーブルタグを角丸にする方法 テーブルタグを角丸にする方法紹介します。 テーブルタグは「ボーダーの感覚」や「隣接するボーダーの間隔」の設定のせいで、角丸（border-radius）が正しく適用されない場合があります。 そのため、角丸（border-radius）を指定するには、border-spacing と border-collapse の指定を調整する必要があります。 テーブルタグに角丸を適用した場合の実際の見た目と CSS の記述は以下の通りです。 A B C D E 1
スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20 | NxWorld
用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。 CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。 ツールによってはもう少しシンプルに実装できると感じるコードが出力されるので、その辺を判断できる人はそのまま出力コードを使うのではなくベースとして使用するのが良いかもしれません。 また、公開されてからしばらく経っているなどの理由で、現在ではほとんどの場合で不要なプレフィックスが出力されるものもあります。 各プロパティのプレフィックス有無の判断が難しい人は、「Can I use...」などと併用して試してみてください。 Neumorphism/Soft UI CSS shadow gene
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
