下記のサイトのようなCSSで作成できる枠を探しているのですが。
http://www.netmania.jp/templates/deco_css.php
『CSS 飾り枠』などで検索してみたのですが、上記サイトのような枠(個人的におしゃれと思うような枠)は見つからず。
そもそもこういうのは『飾り枠』と呼ばれているのでしょうか?
こういった枠が掲載されているサイトをご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
ここなどはどうでしょうか。
シンプレスト
http://simplest.erimo.net/
あとは,こういったものもあります。
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ│コリス
http://coliss.com/articles/build-websites/operat …
これはcss3を利用しているので面倒なんですが,こういったものもあります。
「コリス」はいろいろな情報が載っているので,勉強になりますよ。
最下部にカテゴリがあるので,「css」などのリンクから飛んでください。
質問者さんもそうだと思うのですが,デザインって面倒だから出来合いのものがほしいんですよね。
最近はcss3なんてものが出てきて,コピペすら面倒になってきたんですけど。IEのバクもありますし。
検索する用語としては,「飾り枠」が妥当なんですけど,ほかに検索するとしたら以下の言葉を組み合わせてみてください
・ボックス←これ重要!
・デザイン
・テンプレート
・レイアウト
あと変則的ですが,「見出し」とかで検索して出てきたやつも,飾り枠に応用できますよ。
あとは,普通のテンプレートサイトから飾り枠っぽいのだけ拝借しちゃうって方法もあります。
一応,テンプレートサイトの規約に「一部だけの持ち出し禁止」とかないことを確認してください。
方法はいろいろあるので,がんばってください。
回答ありがとうございます。
そしてお礼が遅くなり申し訳ありません。
素敵なサイトを紹介していただきありがとうございます。
まさにこういった事をやりたかったので助かりました。
また教えていただいた検索用語で探してみます。
ありがとうございました。
No.6
- 回答日時:
No.5なんですけど,一部日本語がおかしいですね……
なんとなく理解していただけたら幸いです。
これだけでは寂しいので,情報を追加しておきます。
ボーダーで装飾~CSSテクニック~
http://www.stylish-style.com/csstec/basic/m-bord …
こういったものもあります↓
CSSで見出しとかに使う「装飾のための記号」を表示させる方法
http://www.uka-blog.com/web/html_css/entry_00138 …
検索する文字に
・装飾
・エフェクト
・デコレーション
も加えてください。
No.4
- 回答日時:
初心者の方とお見受けしますが、一連の回答で話があわないのは、質問者さんが、デザインとHTML/CSSを混同されているからだと思います。
繰り返しますが、「見た目をデザインすること」と「HTML/CSSを書くこと」は、別の作業です。デザインが先にあって、そのデザインに向けてHTML/CSSを書く。といえば分かりやすいでしょうか。おそらく、質問者さんは「かっこいいデザインのサンプル」が欲しいのですよね? ORUKA1951さんが回答されているのは、HTML/CSSの記述についてなので、ちょっと方向が違います。
ちなみに、質問者さんの言うところの「飾り枠」は、HTML/CSSではボーダー(border)と呼びます。
たとえば、以下のような内容はどうでしょうか。
https://gihyo.jp/design/serial/01/imadoki_ui/0010
回答ありがとうございます。お礼が遅くなり申し訳ありません。
初心者ではないんですけどね。一応自身で5つほどサイトを作成したいます。
>おそらく、質問者さんは「かっこいいデザインのサンプル」が欲しいのですよね?
仰るとおりです。
サイトも参考にさせていただきます。
ありがとうございました。
No.3
- 回答日時:
質問、回答へのお礼を拝見しても、質問の意味がわかりません。
質問では、「飾り枠テンプレート(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
- 回答日時:
ご提示の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
- 回答日時:
個人的にはCSSのみでの飾り枠は、記載されたサイトにあるようなものが限界だと思いますよ。
ご質問者様が望むようなおしゃれな枠がCSSだけで実現できるかがそもそも疑問です。
やっぱり画像を使わないと難しいと思いますね。
ちなみに上記サイトの枠ではどこがダメなんでしょうか?
回答ありがとうございます。
ダメという事ではなく、提示しているサイトの枠が気に入ってるので他にもこういった枠がないものかと探しています。
サイトなどで使用しているのですが、もう少し他の枠も使いたいなと。
他所のブログやサイトを拝見していると画像とかではなく、提示したサイトのような枠を使用しているのを見かけたことがありますので他にもあるのではと思いました。
CSS以外でこういった枠を簡単に取り入れる方法があればそちらでも構いません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- CAD・DTP 「機能ブロック図」の描画用フリーソフトを教えてください 1 2022/09/23 16:12
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- その他(資産運用・投資) 積み立てNISAで、一部を売却したら非課税枠は翌年には40万円に戻りますか? 1 2022/06/06 17:35
- HTML・CSS Affinger6でトップページに記事をタイル状に並べたい 1 2023/05/20 14:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の横に文字をうまく配置で...
-
table で画像をピッタリとくっ...
-
ボタンをセル内一杯に表示させ...
-
3つの画像を中央に寄せて表示さ...
-
リンクを知らせる手のマークが...
-
HTMLでボタンを横に2つ並べる方法
-
cssで、チェックボックスの画像...
-
画像の場合のみ、下線を消す方...
-
画像をクリックして元に戻すには
-
floatさせたdtの内容が多い場合...
-
画像と背景色の幅が合わない
-
ポップアップウィンドウのサイ...
-
XML画像データををHTMLで簡単に...
-
htmlで画像を2個ずつ並べていき...
-
htmlの文字が縦書きになる
-
質問1.
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
サイトにjQueryが使用されてい...
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
ポップアップウィンドウのサイ...
-
プルダウンの選択リストの中に...
-
htmlで画像を2個ずつ並べていき...
-
ホームページビルダーの画像サ...
-
XML画像データををHTMLで簡単に...
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
リンクを選択したときの青い枠...
-
レスポンシブ対応のHTML・CSS(...
-
footerの背景が切れて、背景画...
-
html+CSSのみで作るスライドショー
-
ホームページタグ打ち。サイズ...
-
画像の横に文字をうまく配置で...
-
水面の波紋
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
HTMLのIMAGEに。。
おすすめ情報