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運営中

  • 文字間隔にpxではなくemを使う利点の図解。px指定では文字が小さいと間隔が広すぎますが、em指定なら文字サイズに連動して適切な比率を維持できることを示す比較例とCSSコード。
    CSS

    【CSS】letter-spacingの使い方:emの計算と中央寄せのズレ対策

    2026年5月7日
  • space-between、space-around、space-evenlyの配置の違いと、複数行でspace-betweenを使うと最後の行が左右に分かれる問題の比較図。
    CSS

    【CSS】justify-contentの使い方:align-itemsとの違いや効かない原因

    2026年5月7日
  • 長方形でのグラデーション比較:指定なしだと楕円に伸びるが、circleを指定すると正円を保つ。下部にはconic-gradientによる時計回りの扇形グラデーションの例。
    CSS

    【CSS】gradientの使い方:背景・文字・枠線のグラデーション

    2026年5月6日
  • 10種類のCSSフィルターの適用例と、親要素に適用して文字までボケてしまう失敗例の比較。
    CSS

    【CSS】filterの使い方:画像や背景の色変更・ぼかしと効かない時の対策

    2026年5月3日
  • CSS Gridのtemplate-areasで「.」を使い空のセルを作る方法。中央を空けたレイアウト図と、2行目の中央にピリオドを配置したCSSコード例。
    CSS

    【CSS】:empty疑似クラスの使い方:空要素の判定と非表示

    2026年5月2日
  • Flexboxの配置例。中央寄せ、両端揃え、wrap指定なし(はみ出し)、flex-wrap: wrap指定(改行)の4つのパターンの図解。
    CSS

    【CSS】contentの使い方:文字・画像の挿入と幅の自動調整

    2026年5月1日
  • 画面幅に応じてバナーの比率を変更する説明図。スマホ画面では正方形(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日
1...34567...15
sugi
Site Operator
【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中
運営者情報ページへ
新着記事
  • 【HTML/CSS】コピペ!おしゃれなプロフィールカードデザイン11選
  • 【HTML/CSS】コピペ!ステップ・フロー図デザイン11選
  • 【HTML/CSS】コピペ!お知らせ・ニュースデザイン14選
  • 【HTML/CSS】コピペ!おしゃれな文字装飾・フォントデザイン16選
  • 【HTML/CSS】コピペ!おしゃれなスライダー(カルーセル)デザイン12選
おすすめコンテンツ
  • テープ風や付箋風、番号付きなど、6種類のCSS見出しデザインのサンプル一覧。
    【CSS】コピペだけ!おしゃれな見出し(ラベル)デザイン37選
    CSS5299
  • 必須、無効化、およびCSSのpointer-eventsで再現した読み取り専用の3つのセレクトボックスの状態を示す例。
    【HTML】プルダウン・セレクトボックス・ドロップダウンの作り方:コンボボックスとの違い
    HTML3571
  • 塗りつぶされたボタン(Filled button)のデザインバリエーション。スタンダード、シャドウ、立体的、内側に枠線、グラデーション、星アイコンのリボンの6つのスタイル。
    【CSS】コピペで動く!押したくなるおしゃれなボタンデザイン50選
    CSS2329
  • onchange(入力確定後に発動)とoninput(文字を打つたびに発動)の動作の違いを比較した図。oninputはリアルタイムで文字数が反映されることを示しています。
    【HTML】inputタグのtype種類一覧!属性の使い方とCSS装飾
    HTML2173
  • アイコン付き引用ボックスの3つのデザイン例:かぎ括弧風、背景あり、太めの左枠線。
    【HTML/CSS】コピペでおしゃれなボックス(枠)デザイン50選
    CSS2148
カテゴリー
WordPressの始め方
HTML
CSS

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

© Code Stock.