サイト構築 -CSS

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック

Post on:2018年11月14日

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「cal

...記事の続きを読む

CSSの新機能のまとめ -2018年、CSSワーキンググループの会議で変更が加えられたCSSの新機能とそのデモ

Post on:2018年11月9日

先週、CSSワーキンググループの会議でCSSの仕様にさまざまな変更が加えられ、Webデザイナーや制作者にとって興味深い議論が行われました。 CSSの新機能とそのデモ、現在議論されている点について紹介します。 The CS

...記事の続きを読む

[CSS]これは知らなかった!セレクタを使った条件分岐のテクニック

Post on:2018年11月2日

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか? CSSのセレクタだけを使用して、古いブラウザ用とモダンブラウザ用にスタイルシートを条件分岐させるテクニックを紹介しま

...記事の続きを読む

CSSのborder-radiusは実はすごかった!あまり知られていない機能を使用して、かっこいいレイアウトを作る方法

Post on:2018年10月23日

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイ

...記事の続きを読む

CSS Gridでレイアウトする時はこのプロパティが重要!「grid-template-*」と「grid-auto-*」の使い方を解説

Post on:2018年10月18日

CSS Gridはブラウザのシェアも87.85%に達し、そろそろ、そして既に採用している人も多いと思います。そんなCSS Gridのレイアウトで混乱させる2つのプロパティについて、その明確な違いと使い方を紹介します。 U

...記事の続きを読む

[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック

Post on:2018年10月16日

テキストリンクのホバー時に波線をうにょうにょとアニメーションさせるスタイルシートのテクニックを紹介します。 波線はSVGで描くので、非常に滑らかに表示されます。 ※下記はアニメーションGIFでコマを落としているため、実際

...記事の続きを読む

カオス化したスタイルシートから卒業!CSSでカラーを管理する効率的な方法

Post on:2018年10月2日

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, pa

...記事の続きを読む

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説

Post on:2018年9月28日

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異

...記事の続きを読む

CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方

Post on:2018年9月25日

エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどの

...記事の続きを読む

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css

Post on:2018年9月20日

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており

...記事の続きを読む

top of page

©2019 coliss