丸みを帯びた境界線

質問

okwaveユーザの方はここにログインすれば
ログイン情報の枠線の隅が丸みを帯びているのが分かります。
http://okwave.jp/

会員登録されてない方も右上のお知らせで確認できます。
この境界線の丸みをCSSで実装できるものなのですか。

タブに関しては図形を用意しているみたいですが、
これもそういうことをしているのでしょうか。

回答No.4

DrFell · ベストアンサー

境界線の丸みはｃｓｓ+画像で実装されています。ご質問の内容は、CSS Spriteと呼ばれるもので、アクセス回数を減らすことにより、サーバーへの負担を軽くし、同時にスピードアップが期待できます。小さなすき間だらけの荷物を沢山送るより、まとめて送り、切り出したほうが早いというわけです。

cgiやphpは関係ありません。CSS Spriteがわからなくてもcssでデザインできるなら、flyingbee さんでも利用できますよ。ジェネレーターもあります。

「ｃｓｓ　1枚」で検索すると、CSS Spriteにすぐたどり着きます。
「CSS Sprite」で検索すると、CSS Spriteに関する情報がいろいろ出てきます。
それにプラスして、ご自分のやりたいこと、調べたいことを検索されてはいかがでしょうか？

お礼

ご回答有り難うございます。
CSSが分かれば利用できるものなのですね。

多分、私は縁がなければ手を出さない世界だと思います。
ただ、その縁がどう転んで行くかは分からないところです。

そもそも、今回の質問がこんなに波紋が
大きくなることも予定していませんでした。

回答No.5

・真 綾・（@Ma-yan_bh1011）

ああ、そうか。
私がPHPと言ったのはflyingbeeさんの
＞CGIでサイトを構成
を受けてのサイト本体についての言及です。念のため。

回答No.3

kosukejlampnet

#2さんの補足です。
#2さんの言っているのは「CSSスプライト」と呼ばれています。このキーワードで検索にいっぱい引っかかると思います。
Yahoo, Google, Youtube・・・あげればきりがないほど利用されています。

「CSSスプライト　角丸」で検索してみるとこれまたいっぱい。
チュートリアルサイトが結構あるみたいです。

お礼

どうもご回答有り難うございます。
CSSスプライトというのですね。
確かに検索をかけたらそれなりに出てきました。

少しのぞいていくとJQueryとか、
このサイトでも時折質問に上がっている内容が出てきました。

回答No.2

・真 綾・（@Ma-yan_bh1011）

#1です。
CGIではないと思う。たぶんですが。CGIではないPHPではないかと。
そこはまあ別問題なのでこの辺で。

＞巨大な商業サイトはほぼ、そのような構成になっているということですか？
さすがにそこまでは私は知りませんが、この方法のメリットは画像が一枚だから読み込み回数が減るという点で、まあ膨大なアクセスのあるサイトならではの手法でしょうね。

お礼

画像１枚にする理由がアクセス数と関連があるのですね。
質問したお陰で興味深い話を聞けましたよ。

CGIでないとしたらユーザー側で処理しているのですかね。
PHPにも色々あるってことですか。

回答No.1

・真 綾・（@Ma-yan_bh1011）

CSSは隠されてるわけでもないから自分で見ればいいのに。
こうなってます。Googleやpixivでも使われてる方法ですね。PNGが添付できないのでJPGに変換したため、透過はなくなっていますが。
ちなみにこれは、その「枠線」で背景を保存。

お礼

ご回答有り難うございます。
CSSを見ても巨大すぎて、よく分からないのが本音です。

多分、画像を用意しているのかなとは思いましたが、
私の想像の上を行っていました。

こういうものを用意して、CGIでサイトを構成しているのですね。
googleやpixivでも使われているということは
巨大な商業サイトはほぼ、そのような構成になっているということですか？