ボックスの幅を超えてコンテンツを表示させる方法ボックスの幅を超えて(はみ出して)コンテンツを表示させるデザインってありますよね。個人的には見出しとか多い印象なんですが、そんなデザインをHTML/CSSで実現しなきゃいけない場合に、知っておくと便利なTIPSをご紹介します。以下のような図の場合。白背景部分はpadding:20px;の余白を持ったボックスなんですが、見出しの黒背景は、そのpaddingを超えて表示されています。HTMLの記述は以下のように、#contents内にh1とpが内包されたオーソドックスな構造です。id=&quot;contents&quot;&gt;&lt;h1&gt;見出し&lt;/h1&gt;&lt;p&gt;文章&lt;/p&gt;&lt;/div&gt;これに対してCSSは以下。7行目のmarginと8行目のpaddingが肝です。#333;}#contentsにpadding:20px;が指定されているので、通常だとボックス内側20pxは余白になるはずですが、h1に対してネガティブマージンで左右の余白分(20px)だけ広げます(CSS7行目部分)。あとはpaddingを使って文字の位置などを適宜調整すれば完了。2カラムレイアウト時に片方を固定・可変にする組み方2カラムのレイアウトで、サイドカラム幅は固定、メインカラムはウィンドウ幅に応じて伸縮するリキッドな感じの配置にしたい時のコーディング方法です。コーディングjQueryを勉強した時にタメになったサイトいまやウェブ製作の世界においてFLASHに代わって必要不可欠な要素となっているのがjQueryプラグインによる簡単かつ動的なアクションの実装。これから、勉強される方にオススメなサイトのご紹介です。olリストに1などの丸数字を使う方法olリストで表示させる番号を「1.」とか「2.」ではなく、「1」とか「2」などの丸数字へCSSで強引に変更する方法について。ブラウザ間の表示の差異を注意する際のリストブラウザごとの表示の差異。若干の違いは仕方がないのですが、その許容範囲はクライアントによって様々。閲覧対象ブラウザによってはコーディングの仕方も変わってきます。サーバー・ドメイン「.html」ファイルでPHPを実行させる方法htmlファイルでPHPを実行させる場合の対処法について。画像ページの先頭へ某企業のウェブ担当を経て2012年に独立。現在は東京・神奈川を中心にウェブ企画/デザイン/コーディングなどウェブ製作業務に従事してます。