飾り枠

質問

下記のサイトのようなCSSで作成できる枠を探しているのですが。

http://www.netmania.jp/templates/deco_css.php

『CSS　飾り枠』などで検索してみたのですが、上記サイトのような枠(個人的におしゃれと思うような枠)は見つからず。
そもそもこういうのは『飾り枠』と呼ばれているのでしょうか？

こういった枠が掲載されているサイトをご存知の方いらっしゃいましたらご教示ください。

よろしくお願いします。

回答No.5

goo813 · ベストアンサー

ここなどはどうでしょうか。

シンプレスト
http://simplest.erimo.net/

あとは，こういったものもあります。

[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ│コリス
http://coliss.com/articles/build-websites/operation/css/css3-rounded-corners-and-box-shadows-by-webdesign-tutsplus.html

これはcss3を利用しているので面倒なんですが，こういったものもあります。
「コリス」はいろいろな情報が載っているので，勉強になりますよ。
最下部にカテゴリがあるので，「css」などのリンクから飛んでください。

質問者さんもそうだと思うのですが，デザインって面倒だから出来合いのものがほしいんですよね。
最近はcss3なんてものが出てきて，コピペすら面倒になってきたんですけど。IEのバクもありますし。

検索する用語としては，「飾り枠」が妥当なんですけど，ほかに検索するとしたら以下の言葉を組み合わせてみてください
・ボックス←これ重要！
・デザイン
・テンプレート
・レイアウト

あと変則的ですが，「見出し」とかで検索して出てきたやつも，飾り枠に応用できますよ。

あとは，普通のテンプレートサイトから飾り枠っぽいのだけ拝借しちゃうって方法もあります。
一応，テンプレートサイトの規約に「一部だけの持ち出し禁止」とかないことを確認してください。

方法はいろいろあるので，がんばってください。

お礼

回答ありがとうございます。
そしてお礼が遅くなり申し訳ありません。

素敵なサイトを紹介していただきありがとうございます。
まさにこういった事をやりたかったので助かりました。
また教えていただいた検索用語で探してみます。

ありがとうございました。

回答No.6

goo813

No.5なんですけど，一部日本語がおかしいですね……
なんとなく理解していただけたら幸いです。

これだけでは寂しいので，情報を追加しておきます。

ボーダーで装飾～CSSテクニック～
http://www.stylish-style.com/csstec/basic/m-border.html

こういったものもあります↓
CSSで見出しとかに使う「装飾のための記号」を表示させる方法
http://www.uka-blog.com/web/html_css/entry_001382.php

検索する文字に
・装飾
・エフェクト
・デコレーション
も加えてください。

回答No.4

tracer

初心者の方とお見受けしますが、一連の回答で話があわないのは、質問者さんが、デザインとHTML/CSSを混同されているからだと思います。繰り返しますが、「見た目をデザインすること」と「HTML/CSSを書くこと」は、別の作業です。デザインが先にあって、そのデザインに向けてHTML/CSSを書く。といえば分かりやすいでしょうか。

おそらく、質問者さんは「かっこいいデザインのサンプル」が欲しいのですよね？　ORUKA1951さんが回答されているのは、HTML/CSSの記述についてなので、ちょっと方向が違います。

ちなみに、質問者さんの言うところの「飾り枠」は、HTML/CSSではボーダー(border)と呼びます。
たとえば、以下のような内容はどうでしょうか。

https://gihyo.jp/design/serial/01/imadoki_ui/0010

お礼

回答ありがとうございます。お礼が遅くなり申し訳ありません。

初心者ではないんですけどね。一応自身で5つほどサイトを作成したいます。

＞おそらく、質問者さんは「かっこいいデザインのサンプル」が欲しいのですよね？　

仰るとおりです。
サイトも参考にさせていただきます。
ありがとうございました。

回答No.3

ORUKA1951

質問、回答へのお礼を拝見しても、質問の意味がわかりません。
質問では、「飾り枠テンプレート(CSS版) - ネットマニア ( http://www.netmania.jp/templates/deco_css.php )」のような枠が見つからず、と書かれていますが、「そのサイトのような枠」は、そのサイトに実在するのですし、実際のCSS自体も書かれていますから、「見つからない」と矛盾しています。

　「提示しているサイトの枠が気に入ってるので他にもこういった枠がないものかと探しています。」なら、そのサイトにすべて書かれているのですから、他を探す必要はまったくありません。

　枠自体はCSS2.1では、No.2さんの回答のとおり、様々なプロパティで指定することができます。さらに、CSS3では、
[枠の角を丸くする]
border-radius
　　border-top-left-radius
　　border-top-right-radius
　　border-bottom-left-radius
　　border-bottom-right-radius

[枠に画像を使う]
border-image
　　border-image-source
　　border-image-slice
　　border-image-width
　　border-image-outset
　　border-image-repeat

が用意されています。
　また、
[ボックスに影をつける]
box-shadow

CSS3は対応ブラウザが限られるので、実際に使うには相当な工夫が必要

お礼

むしろお前の回答が意味分からんわ。
読解力磨けバカ。
分からんならいちいち回答してくんなよ。バカには聞いてないから。物も言いようで角が立つって言葉しらんか？

『サイトの枠』と言ってるのではなく『サイトのような枠』ね。この『ような』の意味が分かりませんか？頭が固すぎるのかもっと柔軟な考え方できないのかな？
後の回答者様を見てみろ。しっかり理解して教えてくれてるのに。これだからバカは困るわ。

回答No.2

pasocom

ご提示のCSSでは結局枠線のスタイルを指定いてるだけです。
枠線は「ボーダー（border）」といいます。「飾り枠」ではないですね。
ボーダーのスタイルとしては・・・、
[上枠部分]
border-top・・・・・・・・・・・・・・・上ボーダーのスタイル・太さ・色を指定する
border-top-color・・・・・・・・・上ボーダーの色を指定する
border-top-style・・・・・・・・・上ボーダーのスタイルを指定する
border-top-width・・・・・・・・・上ボーダーの太さを指定する　

[下枠部分]
border-bottom・・・・・・・・・・・・下ボーダーのスタイル・太さ・色を指定する
border-bottom-color・・・・・・下ボーダーの色を指定する
border-bottom-style・・・・・・下ボーダーのスタイルを指定する
border-bottom-width・・・・・・下ボーダーの太さを指定する

[左枠部分]
border-left・・・・・・・・・・・・・・・左ボーダーのスタイル・太さ・色を指定する
border-left-color・・・・・・・・・・左ボーダーの色を指定する
border-left-style・・・・・・・・・・左ボーダーのスタイルを指定する
border-left-width・・・・・・・・・左ボーダーの太さを指定する

[右枠部分]
border-right・・・・・・・・・・・・・・右ボーダーのスタイル・太さ・色を指定する
border-right-color・・・・・・・・右ボーダーの色を指定する
border-right-style・・・・・・・・右ボーダーのスタイルを指定する
border-right-width・・・・・・・右ボーダーの太さを指定する

という風に個別に指定でき、ボーダーのスタイルについては
solid・・・・一本線で表示する。
double・・・・・2本線で表示する。
groove・・・・・立体的に窪んだ線で表示。
ridge・・・・・・立体的に隆起した線で表示される。
dashed・・・・・破線で表示。
dotted・・・・・・点線で表示。
というような指定が可能です。
ご提示のサイトは、これを上下左右の枠線に指定しているバリエーションなだけですから、上記を参考にご自分で好きなように指定すれば、出来合いのものではなくオリジナルな枠線を表現することができますよ。

お礼

回答ありがとうございます。
ただボーダーを組み合わせているだけですか。
私がサイトやブログで見た枠はまた違った形で表示されているのでしょうね。
ソースだけでも見ておけば良かったです。
丁寧に教えて頂きありがとうございました。

回答No.1

qualheart

個人的にはCSSのみでの飾り枠は、記載されたサイトにあるようなものが限界だと思いますよ。
ご質問者様が望むようなおしゃれな枠がCSSだけで実現できるかがそもそも疑問です。
やっぱり画像を使わないと難しいと思いますね。

ちなみに上記サイトの枠ではどこがダメなんでしょうか？

お礼

回答ありがとうございます。
ダメという事ではなく、提示しているサイトの枠が気に入ってるので他にもこういった枠がないものかと探しています。
サイトなどで使用しているのですが、もう少し他の枠も使いたいなと。
他所のブログやサイトを拝見していると画像とかではなく、提示したサイトのような枠を使用しているのを見かけたことがありますので他にもあるのではと思いました。
CSS以外でこういった枠を簡単に取り入れる方法があればそちらでも構いません。