CSS辞典– category –
-
【CSS】グリッドレイアウト（grid）で1つだけカラム数を変える
グリッドレイアウトは、扱えるようになると便利なスタイルです。 flexレイアウトは、幅を1つだけ変更したいときは、width:100%;や flex-basis などで幅をかえることで、簡単に調整ができます。 gridの場合は、幅指定では、調整ができません。grid でカラム... -
CSSだけで吹き出しを作る方法
CSSだけで吹き出しを作成する方法です。 吹き出しのイメージ HTML [crayon-6a550496ed747136609043/] CSS [crayon-6a550496ed749369366284/] -
【CSS】table のセル（td・th）の幅を均等にする
HTMLでテーブル（表）の幅を均等に揃えたい時があると思います。 例えば4つ並びなら、tdの幅を25%にすればよいですが、セルの幅の増減に合わせて調整が必要になってしまいます。 [crayon-6a550496ed9aa677963330/] 「table-layout: fixed;」を使用すれば、... -
レスポンシブデザインで役に立つ！CSSの相対単位の使いどころ
はじめに レスポンシブデザインでは「どのCSS単位を使うか」が大きなカギになります。固定の px だけで作ると、画面サイズやデバイスが変わったときにレイアウトが崩れやすくなります。 そこで活躍するのが 相対的な単位（%, em, rem, vh, vw など）。ここ... -
CSSの単位まとめ｜px・em・rem・%・vh・vwの使い分けガイド
CSSにおける単位とは？ CSS（カスケーディングスタイルシート）の単位は「文字サイズ」「余白」「幅や高さ」などを指定するときに使います。大きく分けると「絶対的な大きさを表す単位」と「親要素や画面に依存する相対的な単位」があります。それぞれの特... -
CSSの擬似クラスの : と :: どっちを使えばいい？【使い分けと理由を解説】
[crayon-6a550496edc0f473825435/] CSSでスタイルを指定していると、:hover や ::before など、コロンが1個のものと2個のものを見かけたことがありませんか？ 「これって何が違うの？どっちを使えばいいの？」と疑問に思った方のために、この記事では「:（... -
CSSで横並びメニューを簡単に作る（flexboxの基本）
サイトのグローバルメニューやナビゲーションバーを作るときによく使われるのが横並びのメニューです。 flexboxを活用すると、複雑な調整なしに簡単に横並びレイアウトを実現できます。少し前は、横並びレイアウトに floatを使用していましたが、現在はCSS... -
レスポンシブデザインに必須「メディアクエリ」の基本
レスポンシブデザインの基礎にして最重要テクニック Webサイトをスマホやタブレット、PCなど異なる画面幅に対応させるには、CSSの「メディアクエリ」が欠かせません。ビューポートのサイズに応じてスタイルを切り替えることで、柔軟なデザインを実現できま... -
【CSS】クリックで押した感のあるボタン（transform: scale & shadow）
実際に押したようなフィードバック演出をする ボタンをクリックしたとき、「へこむ」ような動きを加えることで、視覚的なフィードバックを演出できます。ユーザーにクリックが伝わったことを感覚的に示せる、非常に実用的なUI演出です。 HTML [crayon-6a55... -
ボタンをプルプル震えさせるアニメーション
注目を集めたいボタンや、遊び心を加えたい場面に ボタンが「プルプル」と震えるアニメーションは、ユーザーの注目を引きつけたり、遊び心を演出したいときに役立ちます。CTA（行動喚起）ボタンや、ゲーム風UI、インタラクティブな表現で活躍するテクニッ...
