Css

classを付与しなくても属性値によってcssでスタイルをつけられる！お知らせのカテゴリーの色分けに便利！ href属性、class属性、target属性、alt属性、src属性、type属性…これらの属性の値（例えば　 […]

このページの手順でできること ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わらないSVGでイラストを作成 ・複数の画像を1枚にまとめたス […]

疑似要素「:before」で要素の先頭に子要素のアイコンをつける 「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。 テキストの前にアイコンをつける contentを空にして […]

スクロールできない！ スマホでスクロールしようとして気が付きました。（PCでは分かりづらかった） スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。 リロードしてなぜかよく […]

パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。 画像の左右をカットして、スマホでも大きく印象的なメインビジュアルにしたいです。 今回は各ブラウザの高さに合わせて […]

Webサイトの「ダークモード」対応にチャレンジ！ 「ダークモード」とは？ パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、グレー背景に白文字が […]

子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました！ 横の配置をデザインする「justify-content」 親要 […]

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもありますのでよくご確認く […]

隣接セレクタ・間接セレクタ・直下セレクタとは？ 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素を結合子「~」でつな […]

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing-mode: ver […]

上下センター揃え フレックスボックス 「display: flex」を使います。 親{display: flex; justify-content: center; align-items: center;} &nbsp […]

cssでテキストに縁や影をつけます。

CSSでドロップシャドウをつける方法を二つ紹介します。

鮮やかなグラデーションを取り入れたサイトをよく見ます。 様々なタイプのグラデーション記述方法をまとめてみました！ グラデーションの種類 基本 グラデーションはbackgroundで指定します。先に書いた色が開始色（黄緑） […]

動画をサイトに取り入れることはいろいろなメリットがあります。文章よりも映像のほうが断然分かりやすく、商品の紹介やブランディングにも最適です。Youtubeにアップした動画をカンタンにサイトに埋め込む方法をまとめました！

JavaScriptを使わずにCSSだけでアニメーションを表現！CSS Animationキーフレームは0％（アニメーションの開始）から100％（終わり）まで細かく指定できます。

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね！