サイトの印象を変える!CSSでフォントを指定する方法【初心者向け】

今回はCSSでフォントを指定する方法を説明します。 フォント一つでサイトの印象が大きく変わるので、非常に重要な知識になります。実際の業務でも必ず必要になる...

【綺麗に見せたい!】CSSでグラデーションを付ける方法【初心者向け】

最近では、より綺麗に見せるために色をグラデーションさせたサイトをよく見ます。 パッと見て印象が強く残りますし、見ている人もおしゃれだなと感じるでしょう。綺...

表現を豊かに!CSSでborder-radiusを使って角丸を作る方法【初心者向け】

border-radiusを使って角丸を作る方法について解説しています。 ボタンの形や円形のオブジェクトを作る際に便利なプロパティなので、ぜひ書き方を覚えてお...

海外の事例から学ぶ!デザインでユーザーを惹きつける7つの施策

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのCarrie Cousins氏...

実際に書いてみよう!CSSでボタンを作る方法【初心者向け】

今回はCSSで作る様々なボタンのエフェクトについて紹介します。 普通のボタンやアニメーション付きのボタンなど、様々なボタンの作り方を説明しているので、ぜひ...

レイアウトの調整に役立つ!CSSのflexboxの使い方【初心者向け】

CSSのflexboxの使い方について解説しています。 PCでは横並び、スマホでは縦並びをしたいという時にレイアウトの調整ができます。PCとスマホの両方に...

サイズ指定に役立つ!CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalc( )の使い方について解説しています。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利で...

改行を自動で!CSSで文字列を折り返しする方法【初心者向け】

今回はCSSで文字列を折り返しする方法を紹介します。 自動で改行できる便利な技術なので、覚えておくといざという時便利でしょう。 そもそもCSSが何か...

重ねて表示する!CSSのz-indexの使い方【初心者向け】

CSSで書くz-indexの使い方について解説している記事です。 ボックスを重ねて表示させる場合に必要な知識になります。現場でも使える技術なので、ぜひ身に...

今すぐ使える!CSSフレームワークのCompassとは【初心者向け】

CSSを効率的に書くためのフレームワークである、Compassについて解説しています。 Compassを使用するためにはSassの知識、開発環境が必要とな...

中央寄せしたい!CSSでセンタリングする方法【初心者向け】

CSSでセンタリング(中央寄せ)する方法を解説しています。 サイト内の画像を真ん中に表示したいという時にとても便利な技術です。初心者の方でも自分で書けるよ...

色々な動きを表現できる!CSSのtransitionプロパティの書き方【初心者向け】

CSSのtransitionプロパティを使う方法について解説しています。 一定時間でプロパティを変化させ、アニメーションをつけたい時に便利です。メニューの...

擬似クラス!CSSでnth-of-typeを使う方法【初心者向け】

今回はCSSでnth-of-typeを使って特殊な「擬似クラス」を使う方法を紹介します。 先頭から何番目だけ色を変えるといった特定の要素にスタイルを適用す...

外部ファイルを読み込む!CSSで@importを使う方法【初心者向け】

CSSで外部ファイルを読み込みする際に役立つ@importの使い方について解説しています。 ファイル分割をしてCSSの記述をする時などに知っておくと便利な...

CSSでbox-shadowを使って影をつける方法【初心者向け】

今回はCSSでbox-shadowを使って影をつける方法を説明します。ボタンなどより目立たせたいものがあるときに役立つ知識でしょう。 実際のWebサイトで...

CSSで!importantを使った優先順位の変更【初心者向け】

今回はCSSで!importantを使った優先順位の変更を説明します。 CSSの記述が多くなると思い通りのスタイルが適用されなくなる場合があったりしますが...

CSSでコメントアウトを書く方法【初心者向け】

CSSでコメントアウトする方法について解説しています。 Cloud9のエディターなどでは、Macであれば「command」+「/」、Windowsであれば...

余白を指定したい!CSSのpaddingの使い方【初心者向け】

CSSで書くpaddingについて解説しています。 そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書...

字下げする!CSSでインデントする方法【初心者向け】

今回はCSSでインデントする方法を紹介します。 Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。1文字目をインデントする方法、2...