2021.04.16 WEBWebデザイン 【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう！書き方と利点を解説！ 前回の記事（Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説）では、SassをCSSにコンパイルする環境を構築しました。 今回はSassを使って効率的にCSSを記述していくうえで欠かせない機能、ネスト（入れ子）について解説していきます。 この機能を使うと記述をまとめ [...]
2021.02.17 WEBWebデザイン Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説 CSSをより効率的に記述する、Sass（サス）という言語ですが、Sass自体はブラウザで読み取ることができません。 今回はWindows10で、SassをCSSに変換（コンパイル）するための環境構築手順をご紹介します。 過去にDreamweaverでSassのコンパイルを取り扱った記事もありま [...]
2020.12.16 WEBWebデザイン JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 IND [...]
2020.10.19 WEBWebデザイン 手軽なCSSアニメーション！transitionプロパティの使い方（基礎編） 前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい [...]
2020.08.07 WEBWebデザイン CSSアニメーションを使ったリンクボタンを作ってみよう！（実践編） 前回の記事（基礎編）ではCSSアニメーションの概要やanimationプロパティの種類など、基本的な情報をまとめました。 今回は実際にアニメーション表現のあるリンクボタンを作りながら、CSSアニメーションの使い方とその効果を解説していきます。 INDEXCSSアニメーションのおさらいリン [...]
2020.06.16 WEBWebデザイン CSSでアニメーションを作るには？CSSアニメーションの作り方（基礎編） 最近ではアニメーションを使用しているwebサイトが多くなりました。 要素の色や形を変化させたり、移動させたりすることで、動きのある華やかな印象を与え、より直感的に情報を伝えることが出来るアニメーション。 そんなアニメーションをCSSだけで表現する方法を、今回解説していきます。 INDEXCS [...]
2020.04.17 WEBWebデザイン positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ 前回の記事positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sticky;に関して解説していきます。 INDEXposition: s [...]
2020.02.17 WEBWebデザイン positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編） HTMLの要素は通常、記述しただけでは右もしくは下に配置されていきます。要素を自由に配置できるということはwebサイトのデザイン性の向上だけでなく、ユーザーの使いやすさにも大きく関わってきます。 今回はそんな要素の配置位置を指定するときに役に立つCSSの一つ、positionプロパティについて、 [...]
2019.12.17 WEBWebデザイン 擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！ 前回紹介した擬似要素・擬似クラスの指定方法の中から、今回はbeforeとafterについて詳しく解説をしていきます。 基本的な知識から具体的な活用方法まで、丁寧に解説していきますので是非参考にしてください。 INDEX属性要素「before」「after」とはbeforeとafterの基本的 [...]
2019.10.16 WEBWebデザイン 【初心者向け】CSSの属性セレクタを活用しよう！種類や指定方法を解説！ 前回の記事【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ではCSSを使った擬似的な要素の指定方法をまとめました。 今回は属性を使った指定方法を解説していきます。 INDEX属性セレクタとは属性セレクタの種類1. A[属性名] （指定の属性を持つ要素A）2. A[属性名=”属性値 [...]
2019.08.07 WEBWebデザイン 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ 前回の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 INDEX擬似要素とは ～擬似要素の適用例～擬似 [...]
2019.04.23 WEBWebデザイン 【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編） CSSとは正式にはCascading Style Sheets（カスケーディング・スタイル・シート）といい、webサイトにデザインを施すための言語です。HTMLとセットで扱われ、HTMLで記述した文章構造を装飾し見栄えを良くする役割を担っています。 今回はCSSを記述する際に必要となる「セレク [...]
2018.10.02 WEBWebデザイン 【初心者向け】ジャンプ率を利用して効果的なデザインを作成しよう デザインをするうえでぜひ知っておきたい知識の一つにジャンプ率による効果が挙げられます。今回はデザインにおける基本的な知識である「ジャンプ率」について解説していきます。 INDEXデザインにおける対比効果とは？対比効果の設定例ジャンプ率とは？ジャンプ率の概念文字のジャンプ率画像のジャンプ率ジャ [...]
