• TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社
中小企業Web戦略ラウンドナップ
  • TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社
中小企業Web戦略ラウンドナップ
No Result
View All Result
Home ウェブ製作技術

CSSだけで、フレキシブルな角丸ボックスを作る方法

中山陽平(Webコンサルタント) by 中山陽平(Webコンサルタント)
in ウェブ製作技術
Reading Time: 11min read
A A
Share on FacebookShare on TwitterはてなでシェアLineでシェア

例えばブログの記事を囲む枠をCSSだけで作ろうとすると、数種類のborderから選ぶことになるわけですが、今のところ”実線(solid)”、”破線(dashed)”、”点線(dotted)”、”二重線(double)…など、8種類がCSS2では用意されています。
#CSS2仕様書はこちら[http://www.y-adagio.com]

CSS3では、さらにいくつかの種類が用意される模様です。波線とか2つの点と短い線の繰り返しとかのようです。
#CSS3ワーキングドラフト[http://www.d-toybox.com/]

しかし、わりとメジャーな角丸についてはどうしようもなく、必要な場合は画像を作って実現することになりますが、大きさが画像のサイズに縛られるので、使い勝手が悪いのが問題です。コンテンツを他のページに移植するときなど、出来ればフレキシブルにしたいところです。

そんな悩みの一つの解決策として、456BEREA.Streetに、透過画像とCSSのみによる柔軟性のある角丸ボックスの作り方が載っていました。

ちなみにマークアップを維持したい方は
「JavaScriptだけで角丸Box。Nifty Corners(TM)がバージョンアップ。」をどうぞっ。

具体的な作り方

具体的な作り方としては。
デモページは以下のところにあるので、こちらのソースを見てもらうのが早いと思います。
http://www.456bereastreet.com/lab/flexible_custom_corners_borders/

単純化すると、
ひとまず以下のようにブロック要素を並べていきます。

<div class=”for_leftborder” >
<div class=”for_rightborder”>
<div class=”box_top” >
<div></div>
</div>

<p>ここに文章を入れる</p>

<div class=”box_bottom” >
<div></div>
</div>
</div>
</div>

一番外側(上のコードで言うfor_leftborder)と2番目のボックス(上のコードで言うfor_rightborder)は、入れ子になっていますが、役割的には同列です。
このサイトの場合、外側のボックスで

padding:0 12px 0 0;
background:#fff url(borders.gif) 100% 0 repeat-y;

として、右寄せで縦線画像を配置し、内側のボックス(上のコードで言うfor_rightborder)にて、

padding:0 0 0 12px;
background:#fff url(borders.gif) 0 0 repeat-y;

として、左寄せで縦線の背景を置いています。paddingは、置く画像次第で変わる部分です。

そして、そのボックス(上のコードで言うfor_rightborder)の中に、並列に二つのブロック要素と、内容になるブロック要素を放り込みます。上で言う

<div class=”box_top” >
<div></div>
</div>

<p>ここに文章を入れる</p>

<div class=”box_bottom” >
<div></div>
</div>

の部分です。

最初の”box_top”は、フレキシブルな枠の上部を作っている部分です。

先ほどのサンプルページの”box.gif”と言う画像を、最初のbox_topにて右寄せで配置し、さらにその中のdivで、逆に左寄せで置くことで、横幅が可変になっています。(厳密に言えば、元の画像の幅までが限界ですが…1600pxあるので問題ないかと。)

同様のことを”box_bottom”にて行い、これで可変ボックスが完成です。

概観的にはこんな感じですが、外側のパディングの分を内側のマイナス指定のマージンで取り返したりと調整が行われていますので、ソースを見てもらった方がいいです。CSSもヘッダーに書いてありますし。

Share188Tweet118BookmarkShare
Previous Post

Windows1はこんな姿だった

Next Post

h1に画像を入れたいけどSEOも気にしたい時は

中山陽平(Webコンサルタント)

中山陽平(Webコンサルタント)

今こそ「ウェブを頑張りたい」小さな会社のウェブ活用パートナー 距離の近い「リモート型コンサル」で、一緒に目標達成・不安解消・未来への道づくりを 緊急事態下でも平常対応・毎日コンサルに依頼や相談が可能・中小企業特化ノウハウ・HP制作運用も対応可能

この記事を読んだ人はこちらも読んでいます

ウェブ製作技術

最新のファイルを確実にクライアントに読ませる方法?

2006年4月4日
ウェブ製作技術

アクセシビリティの高いサイトを増やすには

2005年5月27日
Next Post

h1に画像を入れたいけどSEOも気にしたい時は

WWWは実際は"World Wide Wait"だと言ってみたり。

Discussion about this post

人気記事.

YouTubeで上位表示するために大事なのは「再生回数」より「総再生時間」

2012年10月14日

SEOにおいて、キーワードの検索順位だけを見て状況判断することの危険性

2014年2月11日

最新の記事

日本のマーケティングが10年遅れているというのは本当?

2019年1月9日

経営戦略全体の中で「ウェブで何ができるか」の結果がウェブ戦略だということ

2018年11月9日

SEOは無意味じゃない、ただ、ビジネスモデル的に情報発信から入っているサイトは注意

2018年10月8日

MENU

  • TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社
Facebook Twitter Soundcloud Youtube
中小企業Web戦略ラウンドナップ

“ウェブが苦手な中小企業をゼロにしたい”
「まず、どうすれば」「苦手意識が…」とお悩みの方へ
ウェブ活用の道を作り、全国対応で常に不安解消・各種依頼が可能。
安心実績700社のWebコンサルティング/各種制作なら。

Follow Us

カテゴリー

  • ECサイト運用
  • Facebook
  • Google+
  • Googleに関するSEO
  • Googleアップデート/変更
  • LocalSEO(Googleプレイス)
  • Moz(SEOmoz)
  • Pinterest
  • podcast
  • Search Marketing Expo関連
  • SEM(広告)
  • SEO(検索エンジン最適化)
  • SEO一般
  • SNS活用その他
  • Twitter
  • Webマーケティングツール
  • Web動画マーケティング
  • Web戦略全般
  • アクセス解析・ウェブ解析
  • インバウンド・マーケティング関連
  • ウェブ製作技術
  • キラーコンテンツを作るには
  • ケーススタディ
  • コンテンツ作成一般
  • スマートフォン対応術
  • ソーシャルメディア活用
  • ブログ/ビジネスブログ
  • ホームページ作成・運用
  • マーケティングとWebデザイン
  • メールマーケティング(リスト活用)
  • ランディングページ最適化(LPO)
  • リンクビルディング・構築
  • 業務日誌・お知らせ

© 2021 ラウンドナップWebコンサルティング(株式会社ラウンドナップ)

No Result
View All Result
  • TOP
  • Web戦略
    • Web戦略全般
    • インバウンド・マーケティング関
    • 動画マーケティング
    • メールマーケティング(リスト活用)
    • Webマーケティングツール
  • SEO
    • SEO(検索エンジン最適化)
    • SEO一般
    • Googleに関するSEO
    • Googleアップデート/変更
    • リンクビルディング・構築
    • LocalSEO(Googleプレイス)
    • Search Marketing Expo関連
    • Moz(SEOmoz)
    • SEM(広告)
  • コンテンツ
    • コンテンツ作成一般
    • キラーコンテンツを作るには
    • ブログ/ビジネスブログ
    • podcast
    • ケーススタディ
  • HP制作
    • ホームページ作成・運用
    • マーケティングとWebデザイン
    • ランディングページ最適化(LPO)
    • ウェブ製作技術
    • スマートフォン対応術
    • アクセス解析・ウェブ解析
    • ECサイト運用
  • SNS活用
    • ソーシャルメディア活用
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • SNS活用その他
  • Webinar
    • 音声セミナー(Podcast)
    • 動画セミナー(Youtube)
  • 運営会社

© 2021 ラウンドナップWebコンサルティング(株式会社ラウンドナップ)