お世話になります。
CSS初心車です。参考書など見ながらhtmlとCSSを作成してみましたが、
レイアウトが崩れてしまいます。CSSのほうに問題があるとは思うのですが、初心者な者でいまいちどこが間違っているのか分かりかねます。どうかご教授くださらないでしょうか。
問題はdiv#rightmenuにあると思います。
rightmenuの中にさらにrightbox-top/rightbox-inside/rightbox-buttomと3つのdiv分けをしており、それぞれbackground-image指定してコンテンツの多さによってリピートしていく背景(ボックスのような画像)を制作したいです。
ところが、以下のような指定をするとおかしなところがたくさん出てきました。
(1)headerとrightmenu全体の間に20pxほどの隙間ができる。
(2)rightbox-topとrightbox-insideの間、同じくrightbox-insideとrightbox-buttomにも20pxほどの隙間ができる。
(3)rightbox-insideのbackground-imageが適用されない。

さらに言うとFirefoxやSafariで確認するとレイアウトは上記のような問題があるにしろ、そこそこレイアウト崩れはありませんが、DWで作業しているともうひどいレイアウト崩れが発生しています。自分だけではどうしても解決できなくてみなさんに力に頼ざるを得ませんでした。どうかお願いします。


●html
<div id="rightmenu">
<div id="rightbox-top">
<h3></h3>
</div>
<div id="rightbox-inside">
<p><img src="images/index-main-image01.jpg"></p>
<p><img src="images/index-main-image02.jpg"></p>
<p class="text"> 本文いろいろp>
<a href="result.html" id="index-button01"></a>
<a href="contact.html" id="index-button02"></a>
</div>
<div id="rightbox-buttom">
<h4></h4>
</div>
</div>
</div>

●CSS
div#rightmenu {
width:650px;
float:right;
margin:0px;
}
div#rightbox-top {
width:650px;
}
#rightbox-top h3 {
background-image:url(../images/rightmenu-top.png);
background-repeat:no-repeat;
width:650px;
height:20px;
}
#rightbox-inside {
background-image:url(../images/rightmenu-inside.png);
background-repeat:repeat-y;
width:650px;
}
#rightbox-inside p img {
float:left;
padding-left:40px;
}
#rightbox-inside p.text {
margin-right:30px;
padding-bottom:10px;
width:400px;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:10px;
letter-spacing:130%;
line-height:180%;
color:#333333;
float:right;
}
#rightbox-buttom {
width:650px;
clear:both;
}
#rightbox-buttom h4 {
background-image:url(../images/rightmenu-buttom.png);
background-repeat:no-repeat;
width:650px;
height:20px;
margin:0px;
}

「このhtml,cssでどこがおかしいか分」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (3件)

naokitaです(補足への回答)


当初の質問内容が解決したら一旦閉めた方が良いようです。
ついでに言えば、1回に3項も質問しない方が誰かが回答付けてくれる可能性が高いでしょう。 NO.2の補足は当初の質問から外れるようなので、この回答にて最終にします。
------------
その前に、
(3)の部分が、それなら崩れる可能性があるので、
float枠には、widthの幅設定をしましょう。
それが、ウェブサイトの設計って事なので、
拡張性を残しつつも、
後から増築・改築しなくて済むような設計をした方が良いでしょう。

paddingで左右の隙間も変更しているようですが、
width幅と左右のpadding幅も計算して設計する事(DTDを考慮)
------------
前回答の<h3></h3><h4></h4>を空にしないって事と同じで、
他のタグも空にしない事。
何故、~ a {text-indent:-9999;}を利用するのか?
って事の1つの要因でもあります。
つまり、
ブラウザによりますが、<a></a> が空だからって事。

前回答でも背景画像は前面があってこその背景と書いたはず!
空なのだから背景表示どころか、クリックすら出来ない・・・
逆に言えば、クリック領域さえ作ればCSSで固定幅にもできるし背景も作れる。

HTMLが無ければCSSは使えないって事。
CSSやJSは、HTMLのオプションでしかない。
逆に言えば、HTMLが正しければ、JSやCSSで好きなように出来るって事です。
つまり、不正なHTMLでは使い物にならないし、
アンカーテキストがなければ、Googleでも解釈できない。

main-image-button01:hover
プロでも↑こんな風に書く人もいますが、
疑似クラスが使えない古いブラウザがまだ10%程度も想定できるので、
id か classを充ててからa:hoverとする方が(今はまだ)実用的でしょう。
    • good
    • 0
この回答へのお礼

ありがとうございます。
自分のような素人に根気強く対応してくださって、本当感謝です。無機質なネット上でアツいものを感じました。
補足してくださった点、肝に銘じてがんばっていきます。
ありがとうございました。

お礼日時:2011/04/28 09:35

naokitaです(補足への回答)


(3)ですが、clearは、回り込み解除、
もしくは、floatの終点としてセットで覚えても良いです。
まずは、画像への文章の回り込みの方法と解除も勉強して下さい。
floatカラムでのclearは、
clear:both; 、 clearfix 、 display:inline; 、 overflow など多々あって、UA対応で解釈も変わりますので、色々試して、自分の最良の方法を選択して下さい。
floatカラム+clear設定する事で、全ブラウザ対応で背景画像が表示できる。具体的には、rightbox-inside内でfloatしているなら、rightbox-inside内でクリアー。
-------
中身は、上下の画像や背景画像は、外枠の為って事ですね。
それなら、
まずは、HTMLでの意味を考えましょう。
<h3></h3>や<h4></h4>は、その項の小見出しですから、
空にするのは、何の為の<h3><h4>なのか!?
意味の無いマークアップはしない事(一部テクニックを除く)
また、デザインだけならCSSの役目です。
 >何か最適な方法はあるのでしょうか。
前回答の1.2.3.4で書いたはず・・・
画像の「画像文字」なら<h3><img></h3>で良いでしょう。
no-repeatの背景画像で、空要素で前面テキストが無いなら<img>にするのが妥当です。わざわざ、CSSで背景画像にする必要は無いのでは?

横枠は、縦にリピートさせるので、
div#rightmenuで全体背景にする方法もあります。
その前面の上下に透過では無い画像を置くと四角い枠になります。

主に、情報ボックスなど枠を作るケースですが、
これも何種類か方法があります(書ききれない程)
<div 真ん中のリピート横枠背景><img上辺画像>コンテンツ<img下辺画像></div>
または、
<div 真ん中のリピート横枠背景><div上辺背景画像><div下辺背景画像>コンテンツ</div></div></div>
こんな方法の方が簡単かもしれませんが、
現状の質問者さん環境で設定すると、(h3,h4無し * 幅は適当)
<div id="rightmenu">
<div id="rightbox-inside">
<div id="rightbox-inside-img"><img src="images/index-main-image02.jpg"></div>
<div id="rightbox-inside-txt"><p>文章</p><p>リンク<br>リンク</p></div>
<div id="rightbox-buttom"><img src="images/rightmenu-buttom.png"></div>
</div>
</div>

#rightmenu { width:650px; float:right; padding-top:20px;
background:url(../images/rightmenu-top.png) no-repeat;}
#rightbox-inside { padding-top:10px;
background:url(../images/rightmenu-inside.png) repeat-y;}
#rightbox-inside-img { width:240px; float:left;
text-align:right; padding:10px 10px 0 0;}
#rightbox-inside-txt { width:400px; float:left;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:10px; letter-spacing:130%; line-height:180%; color:#333;}
#rightbox-inside-txt p { margin:0; padding:10px 50px 10px 10px;}
#rightbox-buttom { clear:both;}

※ 下辺の画像を透過しない。

または上記4行、逆でもOK(画像配置の違い)
#rightmenu { width:650px; float:right;
background:url(../images/rightmenu-inside.png) repeat-y;}
#rightbox-inside { padding-top:20px;
background:url(../images/rightmenu-top.png) no-repeat;}
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
(3)に関してですが、解決しました。naokitaさんの助言を参考に以下のようにHTMとCSS書きました。親切に教えてくださり本当にありがとうございました。<h3><h4>記述せず、<img>で表示する方法は知りませんでした。こっちのほうがシンプルですね!
<div id="rightmenu">
<div id="rightbox-inside">
<div id="rightbox-inside-img">
<img src="images/index-main-image01.jpg" alt="解説"><img src="images/index-main-image02.jpg" alt="解説">
<p>本文</p>
</div>
<div id="main-image-button">
<a href="result.html" id="main-image-button01"></a>
<a href="contact.html" id="main-image-button02"></a>
</div>
<div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="解説">
</div>
</div>
</div>

●CSS
#rightmenu {
width:645px;
float:right;
padding-top:20px;
background:url(../images/rightbox-top.png) no-repeat;
}
#rightbox-inside {
background:url(../images/rightbox-inside.png) repeat-y;
}
#rightbox-inside-img {
float:left;
text-align:left;
padding:10px 0 10px 35px;
}
#rightbox-inside-img p {
float:right;
width:400px;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:11px;
letter-spacing:130%;
line-height:180%;
color:#333;
margin:0;
padding:20px 30px 10px 0px;
}
#rightbox-buttom {
clear:both;
}

ただ、迷惑ついでに新しい問題が...
テキストの下に新しく<div id="main-image-button">を作り、マウスオーバー仕様のボタンを設置しようと思っているのですが、何故かbackground-imageがまったく表示されません。
CSSは、
div#main-image-button {
width:400px;
float:right;
padding:10px 30px 10px 0;
}
main-image-button a {
display:block;
}
main-image-button01 {
width:190px;
height:50px;
background-image:url(../images/index-button01.jpg);
}
main-image-button01:hover {
background-image:url(../images/index-button01-hover.jpg);
}
main-image-button02 {
width:190px;
height:50px;
background-image:url(../images/index-button02.jpg);
}
main-image-button02:hover {
background-image:url(../images/index-button02-hover.jpg);
}
です。
これってどうしてなんでしょうか、何か基本的なことを見落としている気がするのですが...差し支えなければご助言ください。ありがとうございました。

お礼日時:2011/04/26 17:51

>レイアウトが崩れてしまいます。


いえ、書いた通りで表示されますよ。
崩れるというのは、特定のブラウザだけ違うって事であって、
意図した配置が出来ないって事ですよね。
間違ってるといえば、
(3)の部分と、<p>が p>になってる程度です。
但し、
CSSの基本的なmarginなど理解や使い方が曖昧ですし、
HTMLを自身で複雑化しているように思います。
--------------
(1)
#rightbox-top h3に margin:0; padding:0; 追加 or 調整。
 (空要素はNG * 下記参照)

(2)
#rightbox-inside p{ margin:0; padding:0;} を追加 or 調整

(3)
floatしてるのに、その要素内でclearしていないって事が原因です。
#rightbox-buttom は、一見clearしてるように見せてるが、
その要素の中ではなく、外でclearしちゃっています・・・
--------------
DWの作業ビューのデザインは作業する為の簡易ビューであって、
正しくレンダリングされる訳ではありません。
プレビューもDWのCS?バージョンによって違いますし。
--------------
<h3></h3>と<h4></h4>を
空っぽにして背景画像で表示しているのでしょうか?
それなら、背景は、前面があってこその背景なので、
前面が空だと背景にならず・・・(ブラウザによる)
別の方法としては、
1、背景画像を使わずに、<img>だけでよいのでは?
2、<div><h3>とブロック要素で二重にする必要も無い。
3、特に意味の薄い画像なら<div><h3>を削除して<img>のみでも良い。
4、div#rightmenu {background:url(../images/rightmenu-top.png) no-repeat; padding-top:20px;} でも良い。
--------------
<p>もブロック要素なので、中の<img>をfloatしても
<p>自体は動かないので、<p>内でimgが動くだけです。
この辺の配置設計が出来ていないようで、
background-color:yellow; または border:1px solid red;
など各ブロック要素の骨格が目視できるように作業しましょう。

<p><img src="images/index-main-image01.jpg"></p>
#rightbox-inside p img {
float:left;
padding-left:40px;
}
この使い方も無意味で、表示された画像を良く見て設定する事です。
--------------
<div id="rightmenu">内は、
マークアップの仕方によって配置方法も変わるので、
その画像類をどう解釈させたいのかによって、
HTML,CSSの書き方がガラッと変わります。

その画像が何を意味するのかにもよりますし、
png画像が透過なのか、どう見せるのかとか、
幅とか、背景色とか背景画像で良いのかimageにするかとか、
その辺がわからないので、HTML,CSSが書けず、その部分の回答は安易にできないです・・・

この回答への補足

詳しいご回答ありがとうございます。
(1)と(2)に関しては余白はなくなりました。
<h3></h3>と<h4></h4>を空っぽにして背景画像で表示しているのでしょうか?
>>その通りです。以前は適当なテキストを入力してtext-indent:-9999px指定していたのですが、このやり方は検索エンジン側からスパム行為と認識される可能性が高く、SEO的な見地からオススメできないという意見がネット上にあり(そんなレベルでないのは分かっていますが...)今回のような仕様にしたのですが...空要素はNGということですが、何か最適な方法はあるのでしょうか。

(3)こちらはまだ解決しておりません。
floatしてるのに、その要素内でclearしていないって事が原因です。#rightbox-buttom は、一見clearしてるように見せてるが、その要素の中ではなく、外でclearしちゃっています・・・
>>覚えが悪くて申し訳ありません、要素内でclearするというのはどういうことでしょうか。#rightbox-inside {}でしょうか。それとも#rightbox-inside p.text {}でしょうか。素人なので、不明な発言をしていると思いますがご容赦ください。

rightmenu部分は背景に視覚的にもボックスのような画像(透過png)を乗せて、そこにコンテンツを表示させたいと考えています。rightbox-inside{}のコンテンツ量はページによっても変わるので<img>配置ではなくbackground-imageで指定し、repeat-yしていきたいです。
{background:url(../images/rightmenu-top.png)と
{background:url(../images/rightmenu-buttom.png)はそのボックス画像のいわゆる上辺と下辺の「枠」部分です。
具体的なイメージとしては下記サイトの「今週の元気」「お知らせ」「ピックアップニュース」の表示ボックスのようなことがしたいです。
http://c1000.jp/news/

ご親切なご指摘ありがとうございます。

補足日時:2011/04/25 10:58
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q財布(メンズ)の御意見箱

ヴィトン(黒エピ)、ポールスミス(茶革)を使用してきて次はグッチを考えています。今までの財布はなかなかタフで満足いく物でしたが、グッチの財布(メンズの茶革・黒革)って、実際使用してみるとどうですか?革の質、縫製、使い勝手、タフさ…

男がグッチを持つのを女性の方はどう思われますか?ご意見・ご感想お待ちしております。

Aベストアンサー

こんばんは、友達がグッチの黒の財布を持っています。もう2年になりますがまだまだ使えると言っていました。ただ、友達はカードはカードケースを別に持ち、財布のカード入れは使用していません。これでだいぶ違うと思いますよ。財布もカードの入れすぎでパンパンになっているのをたまに見ますが、あれは財布にかなり無理をさせていると思うので、長く使いたいと思うのであればそういうのも気をつけたほうが良いと思います。

QHTML,CSSのみでDIVブロック

IEで図のようなDIVブロックを表示させたいと考えています

DIVでなく他のHTML要素でもいいです

jQueryなどライブラリを使わないで

HTMLとCSSのみで図のような表示のサンプルプログラムが見れる

サイトを教えてください

また、グーグルなどで、これらを検索する際

適当なワードを教えてください

よろしく、お願いします

Aベストアンサー

?

Qメンズの財布【福岡】

財布を誕生日プレゼントにあげたいと考えていて、
大名のショップをいろいろ練り歩き、メンズの財布を捜したのですが、
これ!というものに出会えませんでした。

条件は
1.シンプルな革財布
2.二つ折り(小銭いれ付)
3.2万以内

です。
オススメがありましたら、教えてください!!!
(ショップのある場所も含めて)

Aベストアンサー

こんばんわ!23歳の女です。
福岡人です^^

うーーーーむ

シンプルな革ザイフ、2つ折り、2万以内

という条件からは、イル・ビゾンテしか出てきませんでした><
有名だし既にご存知ですかね。。
その場合は、この回答は無視して下さってOKです^^;

お店は、大丸の1階と、VIOROの1階にあります。

参考URL:http://www.ilbisonte.jp/index.html

QHTML,CSS記述でエラーを見つけられるエディタ

今では、メモ帳や秀丸をはじめ、様々なテキストエディターがあります。
2012年10月の現時点でフリーソフトの、HTMLやCSSの記述ミスを自動修正できる、一番良い物はありますでしょうか?
機能の例としては、たとえば、正しくは「 cleare:left; 」とする所を、「 crear:left; 」としてしまった場合、つまり、「 l と r 」 を間違えた場合に自動修正しなくても、パッと分かる程度で十分です。
詳しい方がいましたら、よろしくお願いします。

Aベストアンサー

No.1です。
画像を添付し忘れてました。

Qこの財布はメンズ?レディース?

閲覧ありがとうございます。20代女、社会人です。

昨日のクリスマスイブ、彼氏から添付画像のような革財布をプレゼントされました。
見た瞬間「…メンズ?」と思い、彼に恐る恐る確認しましたが彼は「店員さんに、彼女へのプレゼントを探してると話したらコレを勧められた」と。

その場では納得しお礼も言いましたが、改めて今見て「メンズっぽいなぁ」と思ってしまいました。
彼の言葉を疑っている訳ではないのですが、腑に落ちないというか、もやもやしています。

財布のブランド『CONCIATA AL VEGETALE』のサイトを調べてみましたが同じ商品が見当たらなく分かりませんでした…(ブランド自体はメンズ、レディースどちらも扱っているようです)

このブランドに詳しい方、何かご存知の方は何でも良いので教えてください。

また、ブランドを知らない方はこの財布をパッと見て、メンズとレディースどちらに感じたかを聞かせてください。(自分の感覚がずれているだけかもしれないので)
説明足らずの部分は指摘してくだされば補足します。

長くなりましたがどうぞ宜しくお願い致します。

閲覧ありがとうございます。20代女、社会人です。

昨日のクリスマスイブ、彼氏から添付画像のような革財布をプレゼントされました。
見た瞬間「…メンズ?」と思い、彼に恐る恐る確認しましたが彼は「店員さんに、彼女へのプレゼントを探してると話したらコレを勧められた」と。

その場では納得しお礼も言いましたが、改めて今見て「メンズっぽいなぁ」と思ってしまいました。
彼の言葉を疑っている訳ではないのですが、腑に落ちないというか、もやもやしています。

財布のブランド『CONCIATA AL VEGETA...続きを読む

Aベストアンサー

メンズっぽく私も見えます。
でも好みの問題だと思います。
女の友達が持ってても変に思わないけど
自分では持たないなぁという感じです。

Q外部CSSが反映されるHTMLとされないHTML

レンタルサーバのファイルマネージャを使ってサイトを作っています。

外部CSSで文字のフォントをMS Pゴシックに統一したいのですが、反映されるページとされないページができました。

CSSには、
@charset "Shift_JIS";
p {
font-family: "MS Pゴシック",sans-serif;
}

読み込みには、
<link href="./style.css" rel="stylesheet" type="text/css">
と記述しました。

反映されたのはサイト2ページ目の2分割フレームの片側だけで、その他のページはブラウザで指定したフォントのままCSSが反映しません。
HTML、CSS共に文字コードはShift_JISで統一していて、それぞれ<head></head>間の同じ位置に記述してあります。

反映されたHTML内にはボックスの幅指定でCSSを使っていますが、その他のページにはCSSを使っていません。違いはこれだと思うのですが、それがきっかけで反映されたりされなかったりと変わるものなのでしょうか?

HTML、CSS共に初心者です。この質問が初歩的なことなのか難しいことなのかもわかりません。
よろしくお願いします。

レンタルサーバのファイルマネージャを使ってサイトを作っています。

外部CSSで文字のフォントをMS Pゴシックに統一したいのですが、反映されるページとされないページができました。

CSSには、
@charset "Shift_JIS";
p {
font-family: "MS Pゴシック",sans-serif;
}

読み込みには、
<link href="./style.css" rel="stylesheet" type="text/css">
と記述しました。

反映されたのはサイト2ページ目の2分割フレームの片側だけで、その他のページはブラウザで指定したフォントのままCSSが反映しません...続きを読む

Aベストアンサー

 いわゆるframestの子供HTMLのうち、ひとつのページのみスタイルシートが利いているということですね。
 一番考えられるのは、適用されないページに書かれているスタイルシートへのパスが通っていないことです。
たとえば
 frameset.html
  frame1.html
  frame2.html
のframe2.htmlからのスタイルシートへのパス指定が誤っている。これは、frame1.htmlと異なる階層にframe2.htmlがある場合におきます。
 全体(framest)を表示して該当するフレーム内で右クリックして「このフレームだけを表示する」を選択すると、そのページだけが表示されるはずです。そこでソースを見てそのパスを元にURLを表示させようとするとNot Faundになるのでは?


 なお、frameは使うべきではない手法です。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
 スタイルシートを使うのでしたら、スタイルシートでフレームのように実装することを強く勧めます。フレームは過去の技術です。
 HTML4.01strict(XHTML1.0strict)では非推奨、それ以降のXHTML1.1では廃止、HTML5ではiframeの形で使えますが、かっての使用方法とは変わります。

 いわゆるframestの子供HTMLのうち、ひとつのページのみスタイルシートが利いているということですね。
 一番考えられるのは、適用されないページに書かれているスタイルシートへのパスが通っていないことです。
たとえば
 frameset.html
  frame1.html
  frame2.html
のframe2.htmlからのスタイルシートへのパス指定が誤っている。これは、frame1.htmlと異なる階層にframe2.htmlがある場合におきます。
 全体(framest)を表示して該当するフレーム内で右クリックして「このフレームだけを表示する」を選択...続きを読む

Qジッパーもスナップボタンも無い革財布

ジッパーもスナップボタンも無い、革だけで作られた財布を探しています。
今から20年前に購入した革財布を今でも使っていますが、さすがに綻びが目立ち、そのうち壊れそうです。すごく気に入っているので、修理してでも使い続けたいんですが、新品で似たようなものがあれば購入も考えています。
全部革で作られており、小銭入れにジッパーもスナップボタンも無い、シンプルな構造の革財布なんですが、こういうタイプの財布がどこかで販売されていたら教えていただけると助かります。

Aベストアンサー

財布(札入れ・小銭入れ)は毎日使うものなので、良いものに出合うと嬉しいものです。
通販サイトで探すといろいろありますが、できれば品揃えの豊富なデパートなどで実物を手に取って、使い勝手、大きさや重さ、質感や手触りなどを実際に確かめてみることが重要です。(そのうえで、ネット通販で安い業者を探す…)
多少値段が張っても、長持ちする良いもののほうがお得であることは言うまでもありません。

二つ折り
http://www.amazon.co.jp/dp/B00V30ZTV6

二つ折り
http://www.amazon.co.jp/dp/B006J4TLSS

三つ折り
http://www.amazon.co.jp/dp/B007HZKCR2


小銭入れについては、個人的にはボックス型のコインケースをお奨めしたい。
パカッと全開して中を見渡すことができ、硬貨の出し入れがとても便利です。全開しても深さが充分あるので、硬貨が飛び出す心配もありません。内側にスナップがありますが、出っ張りが気になるほどではないと思います。外側に凹凸がないのが一番。
素材はなるべくしっかりしたもの。コードバン(馬革)が丈夫で長持ちします。

ボックス小銭入れ(牛革)
http://item.rakuten.co.jp/richard/obu-107010/

ボックス小銭入れ(コードバン)
http://www.mic1978.com/fs/micshop/MH1011
http://www.amazon.co.jp/dp/B003Z72GS4


同じデザインの小銭入れと札入れをセットで持つのもよいかと思います。

財布(札入れ・小銭入れ)は毎日使うものなので、良いものに出合うと嬉しいものです。
通販サイトで探すといろいろありますが、できれば品揃えの豊富なデパートなどで実物を手に取って、使い勝手、大きさや重さ、質感や手触りなどを実際に確かめてみることが重要です。(そのうえで、ネット通販で安い業者を探す…)
多少値段が張っても、長持ちする良いもののほうがお得であることは言うまでもありません。

二つ折り
http://www.amazon.co.jp/dp/B00V30ZTV6

二つ折り
http://www.amazon.co.jp/dp/B006J4TLSS

三...続きを読む

Q[Dreamweaver8]テンプレートに外部CSSを適用→HTMLドキュメントにCSSが適用されないのは何故?

Dreamweaver8初心者で、現在勉強中の者です。
Dreamweaverのテンプレート機能を使った、外部CSSの設定方法についてお尋ねします。
ディレクトリは現在、以下のような状態です。

[サイト -SampleWebSiteFolder-]
   |―[Templates]
   |   |―[style.css]
   |    L―[template.dwt]
   |
    L[index.html]

※拡張子の無いものはフォルダを表します。

index.htmlファイルへCSSを適用させたいのですが、適用されないで困っています。
cssは、外部スタイルシートファイルを用意(style.css)し、テンプレート(template.dwt)に対して、CSSスタイルパネルの[スタイルシートを添付]ボタンより設定しています。

結果、テンプレート(template.dwt)に対してはCSSが適用されるのですが、HTMLドキュメント(index.html)にはCSSが適用されていない状態です。

テンプレートを用いて外部スタイルシートにてサイトを管理する場合、上記のケースにおける問題の原因は何でしょうか。

ちなみに、テンプレート[template.dwt]及び、HTMLドキュメント[index.html]の<head></head>内には、以下のソースが記述されています。

<link href="style.css" rel="stylesheet" type="text/css" />

Dreamweaver8初心者で、現在勉強中の者です。
Dreamweaverのテンプレート機能を使った、外部CSSの設定方法についてお尋ねします。
ディレクトリは現在、以下のような状態です。

[サイト -SampleWebSiteFolder-]
   |―[Templates]
   |   |―[style.css]
   |    L―[template.dwt]
   |
    L[index.html]

※拡張子の無いものはフォルダを表します。

index.htmlファイルへCSSを適用させたいのですが、適用されないで困っています。
cssは、外部スタイルシートファイル...続きを読む

Aベストアンサー

style.cssが[Templates]というフォルダ内にあるのに、CSSのアドレスが
<link rel="Templates/style.css" ~以下略
となっていないのでうまく参照出来ないと思われます。
style.cssをTemplatesフォルダから出してindex.htmlと同じ階層に置いてやるか、ソースを上のように書き直して下さい。
(ソースを修正する場合、サーバに転送する時にも[Templates]というディレクトリを作ってそこにCSSファイルを入れてやらなければなりません。

Q革財布について

この間、イルビゾンテの財布を購入しました。とても気に入っているのですが、白色の革なので汚れが心配です。また、初めての革財布なので手入れの仕方や注意点がわかりません。何か気をつけること、長くきれいに使うためのいいアイデアがあったら教えてください。お願いします。

Aベストアンサー

私も革製品(鞄)を一つだけ持っているのですが・・・1つだけですので、hyperco様を同じように初心者です。
土屋鞄さんで購入した革製品です。
下記URLに革の手入れについて書いてありますので、何か参考になるとかと思います。
よくあるQ&A「革の119番といつものお手入れ方法」からどうぞ。(。・_・。)ノ

参考URL:http://www.tsuchiya-kaban.jp/product/kategori-07/m-kategori/mainte/index.html

Qphoto shop,Dream weaver,flash,Fire works,イラストレータ

初めまして、いきなりなのですが、私はphoto shop必修,Dream weaver必修,Flash,Fire works,イラストレータとかがあまりなじみがありません。それほどWEB制作に必要なソフトなのでしょうか!?私の基本スキルはHTMLとCSSの本を一冊ずつ読んだだけです。あと、CSSのうまく組み合わせ方が書いてあるデザインの本を読んでいるところなんです。とにかく、WEB制作の仕事に携りたいのですが、独学でどれから初めて良いのかわかりません。そして自分には何が必要ないのかもわかりません。希望としましては、まずデジカメで写真を撮ってそれをWEB制作の中に組み込んでみたいです。あとできればキャラクターを描いてそれをWEB制作の中に入れたいです(まぁマンガとか絵を描くのは苦手なので、あくまでこちらは理想です。)。とにかく早くWEB制作者として働きたいので、何が良いか教えてください。

Aベストアンサー

WEB製作は10年前でしたらkjfcaoiさんいうようなスキルの範囲内でできましたこともありますが(会社によってですが、、、)

現在のweb環境において独学でやってWeb製作会社で即バリバリってわけには。。

あくまでトータルプロデュースではなく、構成やデザイン(配色等)、イラストレーター的仕事等、マトをしぼって一部から売り込んでいくのもいい手です。

その際には自分のポートフォリオの作成を忘れずに。。。


人気Q&Aランキング

おすすめ情報