MENU
  • WordPressの始め方
  • HTML
  • CSS
  • お問い合わせ
  • デザインギャラリー
Code Stock
  • WordPressの始め方
  • HTML
  • CSS
  • お問い合わせ
  • デザインギャラリー
Code Stock
  • WordPressの始め方
  • HTML
  • CSS
  • お問い合わせ
  • デザインギャラリー
  1. ホーム
  2. sugiの執筆記事

sugi– Author –

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

  • 無効な入力項目のラベルも連動してグレーアウトさせるべきであることを示す図解。UIの具体例と、ラベルが黒いままになる不適切なCSSコードの例。
    CSS

    【CSS】disabledの使い方:ボタン無効化やホバー・カーソルの制御

    2026年5月21日
  • CSSのホバー効果の例:色(hue-rotate)、影(box-shadow)、枠線(border)を回転させる3つのアニメーション手法の紹介。
    CSS

    【CSS】rotateの使い方:要素や画像の回転とアニメーション

    2026年5月20日
  • CSSのlinear-gradientで方向を指定する方法と、background-colorではなくbackground-imageプロパティを使用する注意点を示す図解とコード例。
    CSS

    【CSS】linear-gradientの使い方:文字や枠線・画像への重ね方

    2026年5月19日
  • 流体タイポグラフィの解説。clamp関数を使いメディアクエリなしでサイズを可変にする方法を説明。中央の引数に固定値ではなくvwなどの可変単位を使うべきという注意点とコード例が記載されています。
    CSS

    【CSS】clampの使い方:フォントの可変設定とellipsisやline-clamp

    2026年5月18日
  • CODE STOCK:Webサイト制作を楽にするデザイン・UIコピペサイト。PCとスマートフォンでの表示イメージ。
    HTML

    HTMLをWordPress化する移行手順:自作テーマより簡単な方法解説

    2026年5月15日
  • コンテナの幅に応じて、メインエリアでは横並び、サイドバーでは縦並びにレイアウトが切り替わるコンテナクエリの活用例
    CSS

    【CSS】コンテナクエリとは:使い方やメディアクエリとの違い・CSS変数

    2026年5月14日
  • Viewportタグの有無による表示の違い。タグがないとPC画面が極小サイズで表示されますが、タグがあると画面幅に最適化され文字が読みやすくなります。
    CSS

    【CSS】メディアクエリの書き方:レスポンシブ対応・ブレイクポイント・複数指定・効かない対策

    2026年5月14日
  • CSSのunsetによる背景とoverflowの挙動の比較。background: unsetで背景色まで消える失敗例と、背景色を残しつつ画像のみ消し、overflow解除で要素を枠外にはみ出させる成功例の解説。
    CSS

    【CSS】unsetの使い方:initialやrevertとの違い

    2026年5月14日
  • CSSのposition: stickyの実装例。座標指定がない失敗例と、座標を指定した成功例のコード。見出しが上端で固定されるデモ画面。
    CSS

    【CSS】stickyの使い方:fixedやabsoluteとの違い

    2026年5月11日
  • すりガラス効果の比較。単なるopacityでは背景が透けるだけだが、backdrop-filterを使うと背景が美しくボケることを説明する図。
    CSS

    【CSS】opacityの使い方:背景だけ透明にする方法とアニメーション

    2026年5月8日
12345...14
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.