CSS
unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
おしゃれなSVGファイルを無料で扱っているunDrawのSVGファイルを、無料から使えるデザインツールであるFigmaで加工して、SVGファイルをCSSでアニメーションさせるための下準備の手順を紹介します。
CATEGORY
CSS
CSSに関する基礎、実装例、トラブル解決の記事をまとめています。
54ARTICLES
CSS
【SCSS】background-imageで画像配列をforループ文で表示させる方法
SCSS(SASS)のfor文を使って、background-imageで画像配列をループさせる方法を紹介します。
CSS
CSSのボックスモデルとbox-sizingを理解する
CSSのボックスモデルを理解することで、とても自由にレイアウトが組めるようになります。 この記事を読むことで、 widthとheightを理解する borderを理解する paddingを理解する marginを理解する…
CSS
CSSのpositionプロパティを理解する
positonプロパティをマスターすることで、好きな要素を好きな場所に配置したり、スクロールしても同じ位置に配置するような表示ができるようになります。 positionプロパティの使い方と具体例 要素の絶対配置 z-in…
CSS
CSSのcalcを使いこなす
レスポンシブ対応にするときや、HSLで色を指定するときなどで、計算が煩雑になる場合があります。 それは往々にして、計算する際に単位が異なっていることがあるからです。(％とpx）など。 calcは、単位が違う値でも計算する…
CSS
CSSで影をつけるためのプロパティと具体例
CSSでテキストやボタンに影をつける方法をみていきましょう。 まずは、基本的なことから勉強しましょう。 CSSで影をつけるためのプロパティ box-shadowプロパティとtext-shadowプロパティがありあす。 そ…
CSS
CSSで背景をスタイリングする
背景は面積が大きいため、WebサイトやWebアプリに与える印象はとても大きいです。 そんな背景を整えることができるCSSをみていきましょう。 背景のスタイリングするためのCSS background-colorで背景の色…
CSS
CSSでfloatを使いこなす
floatプロパティを使うと、要素を右に表示したりすることができます。 サイドバーや細かい部品に使うことも多く、理解しておく必要があります。 CSSのfloatの使い方 floatプロパティを使うと、要素を右や左などに動…
CSS
CSSの基本セレクターを学んで使ってみよう。
HTMLとCSSを紐付けるために使うのが、セレクターです。 CSSのセレクターの知識は自由にHTMLを装飾する上で基本的な土台となるので、しっかりと学んでいきましょう。 CSSの基本セレクターの種類 要素型セレクター 要…
CSS
セレクターを組み合わせて自由に指定する方法（結合子）
CSSには、複数の組み合わせ方法があり、それらを使いこなすことで、より短く記述したり、自由に装飾することができます。 その組み合わせの際に使う記号のことを、結合子といいます。 どんな組み合わせ方法があるのか、どの結合子を…
CSS
属性セレクターの便利な指定方法（前方一致、後方一致、部分一致）
属性セレクターには、便利は指定方法があるので、みていきましょう。 属性セレクターの便利な指定方法 完全一致 → [【属性】=”【値】”]で、【属性】が【値】の要素 前方一致 → [【…
CSS
レスポンシブウェブデザインにするためのCSSの使い方
スマートフォンやタブレットやデスクトップといったPCのどの画面からでも快適に最適な表示ができることをレスポンシブウェブデザインといいます。 いろんな媒体で閲覧される近年では必須の知識なので、そのためのCSSの使い方をマス…
CSS
CSS変数を使ってみよう
CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。 管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。 CSS変数ってどう便利なの？ まずは、CSS変数が使える…
CSS
CSSでリストをスタイリングする方法
リストのスタイリングが少し違うだけでかなりおしゃれに見えたり、独自性を出すことができます。 CSSでリストをスタイリングする方法をみていきましょう。 CSSでリストをスタイリングする方法 リストをスタイリングするときに特…
CSS
CSSのHSLで色指定すると統一感のある色表現が簡単にできる
HSLで色指定すると、とても簡単に統一感のある色表現を実現できます。 具体的な例とそのやり方をみていきましょう。 HSL色指定を使って統一感を出すCSSテクニック バックグラウンドの背景色は、 body { backgr…
CSS
CSSの色の指定方法とそれぞれのメリット・デメリット
CSSでは、いろいろな色をいくつかの方法で表現することができます。 それぞれメリット・デメリットがあるので、その方法と具体的な使い方をみていきましょう。 CSSの色の指定方法 CSSで色を指定する場合、次のような方法があ…
CSS
CSSで垂直方向に文字や画像を揃える方法
CSSで垂直方向に文字や画像を揃える方法をみていきましょう。 簡単なようですが、baselineの考え方を理解していないと意図していない形になってしまうので、ざっと確認していきましょう。 CSSで垂直方向に文字や画像を揃…
CSS
CSSで行の高さを調整するやり方
CSSで行の高さを調整するやり方をみていきましょう。 CSSで行の高さを調整するやり方 CSSで行の高さを調整する場合、line-heightプロパティを使います。 line-heightは複数の行が同じ高さになるので、…
CSS
CSSでフォントを指定する方法
WebサイトもWebアプリも、画像や動画のちからはあるけども、最も多く使われるのが文字のため、フォントは次第で印象が大きく変化する。 この記事では、CSSでフォントを指定する方法と、フォントの種類をみていきましょう。 C…
CSS
CSSでテキストにスタイルを設定する方法
CSSを使ってテキストにスタイルを設定する方法をまとめました。 よく使うものに厳選しているので、確認してみてください。 CSSでテキストにスタイルを設定する方法 <h1>CSSでテキストにスタイルを設定する方…
CSS
CSSのスタイルの継承
CSSのスタイルの継承を理解することは、とても大事です。 CSSのスタイルの継承を理解していないと、「なんで変化しないの？」といったトラブルや、「なんで設定してないのにこうなってるの？」といった困った状態にほぼ100%陥…
CSS
CSSの書く場所と基本的な書き方
CSSを勉強する上で、最も基本となる部分を知っておきましょう。 具体的には、 CSSを書く場所 CSSの書き方 CSSのクラスセレクターの書き方 を解説します。 CSSの基本のキの部分であり、これから当たり前のように使っ…