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

  • CSSボックスモデルの図解。外側から順に、margin(外側の距離)、border(境界線)、padding(内側の余白)、content(本体)の構造を示しています。
    CSS

    【CSS】paddingとmarginの順番!上下左右の指定方法まとめ

    2026年3月9日
  • ブラウザでのレスポンシブ表示の例。幅を広げるとPCモード(緑色)、狭めるとスマホモード(橙色)に変化する様子。
    CSS

    【CSS】min/max-widthとは?使い方とレスポンシブ対応

    2026年3月7日
  • CSSのwidthプロパティ(300px、50%、auto)による挙動の違いを比較するデモ画面。親要素の幅の変化に対する各ボックスのサイズ変化を説明しています。
    CSS

    【CSS】width(横幅)とheight(高さ)の指定とボックスモデル

    2026年3月6日
  • VS Codeで表示されたHTMLとCSSのソースコード。h1タグや、文字色を指定する3つのクラス(.p-one, .p-two, .p-three)などのスタイル定義が含まれています。
    CSS

    CSSはどこに書く?HTMLでの正しい読み込み順と優先順位のルール

    2026年3月4日
  • CSSの様々な単位(px、em、rem、%、vw、vh)を使用したフォントサイズの表示例。
    CSS

    【初心者のCSS入門】CSS(スタイルシート)とは?書き方と装飾方法まとめ

    2026年3月3日
  • ブラウザでのh1からh6までの見出しの表示例。h1が最大で、h6に向かって順にサイズが小さくなる。
    HTML

    【初心者のHTML入門】基本構造の書き方とタグの使い方【タグ一覧表あり】

    2026年3月1日
  • ローカル開発ツール「Local」の管理画面。サイト「codestock」のPHP、Webサーバー、データベースなどの構成情報が表示されている。
    HTML

    【初心者のHTML/CSS入門】Webデザインの勉強に必要な環境を構築する

    2026年2月28日
  • ステップ1から5までが表示された横方向のタイムライン(ステップバー)のデザイン例
    CSS

    【HTML/CSS】コピペ!横方向のおしゃれなタイムラインデザイン1選

    2026年2月25日
  • ラジオボタンで作るモーダルの実装例。リンク風とボタン風の2つのスタイルが表示されているCODE STOCKのウェブサイト画面。
    CSS

    【HTML/CSS】コピペで作る!モーダルウィンドウデザイン参考2選

    2026年2月25日
  • Simple Tocの3つのデザインバリエーション:灰色背景&枠線、フラットデザイン&枠線、フラットデザイン。
    CSS

    【HTML/CSS】コピペで作る!おしゃれな目次デザイン3選

    2026年2月25日
1...1011121314...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.