2021.12.15 WEBWebデザイン AdobeXDのスタック機能とパディング機能を使って効率的に余白を管理しよう webデザインの作成において、配置した要素が未確定だったり配置した後に内容の変更をする場面があります。 そのたびに変更した要素に対して余白を調整するのは効率的ではありません。 今回は、要素の内容が変更されても余白を保ったままデザインできる、AdobeXDのスタック機能とパディング機能を紹介します。 [...]
2021.10.19 WEBWebデザイン 【Sass実践編】「ミックスイン」を使って効率的にスタイルを管理しよう！使い方と利点を紹介！ CSSを書いていると、同じ形でも色が違うだけのボタンや、線の太さが違うだけの見出しなど、似たようなスタイルを一括で管理したいと思ったり、 ブレイクポイントを記述する際に、いちいち「@media screen～」と書くのが面倒だと思った経験などあるかと思います。 Sassではそんな使いまわしたいスタ [...]
2021.08.16 WEBWebデザイン 【Sass実践編】Sassの条件分岐と繰り返し処理とは？Sassでの制御構文の書き方を紹介！ 今回はSassの制御構文について解説していきます。 制御構文が使えるようになると、条件によってスタイルを振り分けたり、繰り返し指定するスタイルの記述を短縮できたりするので、理解しておきたい機能です。 INDEX制御構文とは@ifを使った条件分岐@forを使った繰り返し処理@whileを使った繰り [...]
2021.06.17 WEBWebデザイン 【Sass実践編】Sassを使いこなす第一歩、「変数」の書き方と使い方！ 今回はSassの機能の一つ、「変数」ついて解説していきます。変数の記述はSassをより便利に使う上で確実に覚えておきたい機能なので、これを機にしっかり理解していきましょう。 Sassのコンパイルに関しては「Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説」を参照にし [...]
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デザインにおける対比効果とは？対比効果の設定例ジャンプ率とは？ジャンプ率の概念文字のジャンプ率画像のジャンプ率ジャ [...]
