MENU
  • WordPressの始め方
  • HTML
  • CSS
  • お問い合わせ
  • デザインギャラリー
Code Stock
  • WordPressの始め方
  • HTML
  • CSS
  • お問い合わせ
  • デザインギャラリー
Code Stock
  • WordPressの始め方
  • HTML
  • CSS
  • お問い合わせ
  • デザインギャラリー
  1. ホーム
  2. 2026年
  3. 4月

2026年4月– date –

  • 画面幅に応じてバナーの比率を変更する説明図。スマホ画面では正方形(1:1)、PC画面では横長(16:9)に切り替えることを示しています。
    CSS

    【CSS】aspect-ratioの使い方:画像や動画の縦横比を固定・維持

    2026年4月30日
  • ダイナミックアイランドとホームバーに重ならないように設計されたスマートフォンの画面レイアウト。
    CSS

    【CSS】insetの使い方:配置の一括指定・内側の影・スマホセーフエリア対応

    2026年4月28日
  • 要素を左右に寄せるCSSの解説。justify-content: space-betweenで両端に配置する方法と、margin-left: autoで特定の要素を右に寄せる方法のコード例と図解。
    CSS

    【CSS】align-itemsの使い方:縦の中央揃えからjustify-contentとの違い

    2026年4月28日
  • CSSのorder属性は親要素がFlexかGridの場合のみ有効であることを示す図解。親がblockだと順番は変わらず、flexだとorder指定通りに並び替わる比較例とコードが示されています。
    CSS

    【CSS】orderプロパティの使い方と順番:優先順位や一括指定

    2026年4月27日
  • :not()セレクタを用いて、最後の要素以外に下線を引く方法や、ホバーされていない要素を暗くするCSSの実装例。
    CSS

    【CSS】:not()疑似クラスの使い方:効かない原因と複数条件の指定

    2026年4月27日
  • contentプロパティと::before疑似要素を使用して、HTMLを書き換えずにカードの角に「NEW」のリボンバッジを表示するCSSの実装例
    CSS

    【CSS】::before・::after擬似要素の使い方:画像・アイコン・ホバーエフェクト

    2026年4月27日
  • url(#id)を使用したレスポンシブな波線とテキストクリップの例。CSSでclip-path: url(#responsive-wave);を指定するコード例も含まれています。
    CSS

    【CSS】clip-pathの使い方:図形の切り抜きと影・枠線の付け方

    2026年4月25日
  • :has()を使用してMacOSのDock風エフェクトを実装する例。ホバー時に隣接する要素も変化するプレビューと、そのCSSコード。
    CSS

    【CSS】:has()疑似クラスの使い方:親・子・孫要素の指定や複数条件との組み合わせ

    2026年4月25日
  • CSSのbox-shadowプロパティにおけるX/Y軸のズレ、ぼかし、広がりの各数値が影の見た目に与える影響の比較と、それに対応するコード例。
    CSS

    【CSS】box-shadowの使い方:おしゃれな影のコピペ集と浮遊感の作り方

    2026年4月24日
  • ブランドイメージに合わせた角丸の使い分けの解説。3px(信頼・誠実)、8px(親しみ・標準)、50px(ポップ・行動喚起)のボタン例と、共通のCSSコード。
    CSS

    【CSS】角丸を作るborder-radiusの使い方:一部指定やボタン実装

    2026年4月23日
123...5
sugi
Site Operator
【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中
運営者情報ページへ
新着記事
  • SWELLとLightningの違いを徹底比較!どっちを選ぶべき?
  • SWELLとCocoonの違いを徹底比較!どっちを選ぶべきか迷っている方へ
  • 【安い】ロリポップのWordPress簡単インストールでブログを開設する手順
  • WordPress オワコン? それでもWordPressブログをやめない理由
    WordPressはオワコン?でもWordPressブログをやめない理由
  • WordPress 『WordPress 稼げない』 稼げるサイトにする たった一つのSEO戦略
    WordPressで稼げないサイトを稼げるサイトにするたった一つのSEO戦略
おすすめコンテンツ
  • テープ風や付箋風、番号付きなど、6種類のCSS見出しデザインのサンプル一覧。
    【CSS】コピペだけ!おしゃれな見出し(ラベル)デザイン37選
    CSS4159
  • 必須、無効化、およびCSSのpointer-eventsで再現した読み取り専用の3つのセレクトボックスの状態を示す例。
    【HTML】プルダウン・セレクトボックス・ドロップダウンの作り方:コンボボックスとの違い
    HTML3018
  • 塗りつぶされたボタン(Filled button)のデザインバリエーション。スタンダード、シャドウ、立体的、内側に枠線、グラデーション、星アイコンのリボンの6つのスタイル。
    【CSS】コピペで動く!押したくなるおしゃれなボタンデザイン50選
    CSS2047
  • onchange(入力確定後に発動)とoninput(文字を打つたびに発動)の動作の違いを比較した図。oninputはリアルタイムで文字数が反映されることを示しています。
    【HTML】inputタグのtype種類一覧!属性の使い方とCSS装飾
    HTML1968
  • アイコン付き引用ボックスの3つのデザイン例:かぎ括弧風、背景あり、太めの左枠線。
    【HTML/CSS】コピペでおしゃれなボックス(枠)デザイン50選
    CSS1834
カテゴリー
WordPressの始め方
HTML
CSS

目次
  • WordPressの始め方
  • HTML
  • CSS
  • デザインギャラリー
  • 運営者情報
  • お問い合わせ
  • プライバシーポリシー
  • コンテンツ制作ポリシー

© Code Stock.