css

css

flexの基本レイアウト その2

flexレイアウトの解説記事その2。flexアイテムの縦方向の整列・余白について説明します。display:flex を指定すると子要素に指定したheightは無視され、均等の高さに整列されますが、align-items、align-selfを指定することで変更することができます。
css

とりあえずこれだけ。flexの超基本レイアウト

この記事から4回に分けてflexレイアウトについて解説していきたいと思います。flexは子要素をすべて一方向に並べるcssプロパティです。flexアイテム(子要素)は元のwidth、heightを失い、最小幅、同じ高さに統一されて一方向に並びます(*初期値の場合)。
css

背景画像にグラデーションをかける方法

疑似要素beforeとlinear-gradientプロパティをつかって、背景画像にグラデーションをかける方法を勉強します。
スポンサーリンク
css

CSSで画像編集ができてしまうfilter プロパティ

明度やコントラストの調整、グレースケールやセピア加工など、画像編集ソフトのような働きをする「filter」というcssプロパティがあります。 かなり便利なプロパ...
css

要素サイズの決め方を指定するbox-sizing

横一列に並べたつもりの要素が一列に収まりきらず段落ちしてしまった。ほとんどの場合borderかpaddingの値を見落としていることが原因ですが、この辺のトラブ...
css

外側・内側に余白を作るmarginとpadding

余白を設定するmarginとpadding。それぞれの違いや使いわけを知っておきましょう。
css

グラデーションの基本(linear-gradient)を抑える

背景や枠線にグラデーション効果を表現できるcssプロパティ、linear-gradient。働きを知っていると、グラデーションだけでなく幅広い表現が利用できます...
css

borderをグラデーションにする方法

borderをグラデーションにする方法ですが、そのために必要なborder-imageプロパティを説明します。特にborder-image-sliceは理解しにくいのですが、図解をまじえてできるだけ噛み砕いて解説します。
css

z-index:-1をすると消える、上に重なるときの対処法

疑似要素にz-index:-1を指定したのに、要素が上に重なってしまう・疑似要素が消えてしまう。そんなときの原因と解決策。「z-indexを理解する」の続きです。
css

border-radiusを詳しくまなぶ

border-radiusをつかって円を描く方法や、個別に角度を指定する方法など、border-radiusについて詳しく解説します
css

CSSで三角の吹き出しを作る方法

cssで吹き出しの三角を作る方法について3種類説明します。
css

疑似要素before、afterの使い方

疑似要素before afterの基本の使い方と働き方、3つ以上の疑似要素をつなげて使う方法などを解説します