コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック
ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。 Gradient Borders in CSS ※CSS-TRICKSがリニューアルされ、グラデーションが随所に使用されていますね。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素の周りにグラデーションのボーダーが必要な場合、どうしますか？ グラデーションのボーダーを実装するCSSのAPIはありません。 線形グラデーションの背景を持つラッパー要素を作成し、少し小さい内側の要素に背景を定義してくり抜くようにボーダーを実装します。 これを実装すると、下記のようになります。
absolute + tableの謎が解けた！！！！ - エンジニアをリングする
一昨日こんな記事を書きました。 yoshiko.hatenablog.jp そして今日「WWW WATCH」さんからこんなアンサーエントリを頂きました。 hyper-text.org ありがとうございます！！！感謝です🙏 エントリの中で、テーブルの視覚整形モデルについての仕様にリンクがはられていました。 その中に答えと思われる仕様の記述を見つけて「なるほど！！」って思ったので書いてみます！ Tables in the visual formatting model 日本語訳: 視覚整形モデルにおけるテーブルの扱い この参照すべき仕様の場所が見つけられなかったので教えていただけてとてもありがたいです＞＜ WWW WATCHさんでは、 「table の 'width' と 'height' にパーセンテージ値が指定された場合は、"table wrapper box" 自身ではなく、"tabl
Code smells in CSS | en.ja Article
CreditThis article is translated with permission of Harry Roberts. You can find original article at Code smells in CSS.本記事はHarry Roberts氏の了承を得て翻訳された記事です。 原文はCode smells in CSSにて掲載されています。 Chris Coyierが回答したとある問いがある: CSSコードが「臭い」かどうかをどう知ることができるのか？コードがいまいち、あるいはデベロッパがいまいちかどうかの兆候はどんなものか？コードの中でどんな部分を見て、善し悪しを決定づけるのか？ Chrisの素晴らしい回答にいくつか追加して私なりに回答してみようと思う。 私はBSkyBでインハウスデベロッパとして働く毎日を送っている。私は最近のサイトではフロントエンドに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Cheat Site
「CSSバトル」が面白い！自分のCSSスキルを活用してハイスコアを目指そう！【CSSのお勉強】