outbrave の回答履歴

全670件中81~100件表示
  • webデザインcss <p>タグ内の長文について

    初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、<p>要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1) <p>要素で記述した文章の折り返し地点は、<br>を使用しない限り<p>要素に指定したwidth幅によってきまるのでしょうか? (2) その場合、背景画像を<p>に指定したら自動的にその背景画像も同じwidthになるのでしょうか? 添付画像の上の図のように、<p>要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。 以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } (リセットcssでmargin.padding.borderはそれぞれ0にしてあります。) <p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか? 出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。 どなたか初心者にもわかりやすくご教授いただけないでしょうか?? どうかよろしくお願い致します!

    • ベストアンサー
    • lovesms
    • CSS
    • 回答数3
  • HTML CSSを、教えてください。

    お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }

  • ボタンフォームに対するマウスオーバー効果追加

    簡単に実現できれば、程度の要望なのですが、以下のHTMLでボタン上にマウスカーソルが乗ったら (1) この人に投票する! が赤字になる (2) kao.pngが、nikoniko.png に変わる (3) マウスを離すと(1) (2) が既定に戻る と動作させることはできますか? なお、(1) については、inputタグに onmouseover="this.color='red'" onmouseout="this.color='blue'" を仕込んでみましたがダメでした。 <html> <head> <style type="text/css"> .btn { background-repeat: no-repeat; color: blue; background-position: left; padding-left: 25px; background-image: url(./kao.png); /* 22px x 22px */ } --> </style> </head> <body> <input type='button' name='vote' value='この人に投票する!' class='btn'/> </body> </html>

    • ベストアンサー
    • litton101
    • CSS
    • 回答数1
  • CSSでのフォントサイズ指定におけるジレンマ

    以下の例文では、   * {font-size: 10pt;} があるゆえに、赤太字で示された   .ddd {color: #ff0000;font-weight: bold;} のフォントサイズがばらばらになってしまいます。 各所の指定フォントサイズを遵守させ、かつ赤太字を有効化するにはどのようにればよいでしょうか。   * {font-size: 10pt;}は事情あってやめられません。 「.ddd」に、font-size: middleを入れたりしてもだめでした。 !importantとか、何か簡単な「おまじない」の追記で解決できるといいのですが。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- * { font-size: 10pt; } dd { font-size: x-small; } dt { margin-left: 30px; } .eee { border: 1px solid #000; font-size: small; } .ccc { font-size: xx-large; } .aaa { font-size: medium; } .bbb { font-size: small; } .ddd { color: #ff0000; font-weight: bold; } --> </style> </head> <body> <h2>&nbsp;&nbsp;<a href="./a.htm" style="font-size: large;">2014年の<span class="ddd">雪</span>景色</a></h2> <a href="./index.php" class="eee"><span class="ddd">雪</span>下くんの感想</a> &nbsp;&nbsp;1月には何度も降雪、周りは<span class="ddd">雪</span>、<span class="ddd">雪</span>、<span class="ddd">雪</span>… <dl> <dt class="Tab"><span class="ccc">首都圏では不慣れな<span class="ddd">雪</span>かきなどに追われた</span></dt> <dt><span class="aaa"><span class="ddd">雪</span>下大介</span>&nbsp;&nbsp;<span class="bbb">大阪府立降<span class="ddd">雪</span>下小学校3年</span></dt> <dd>大阪ではひさしぶりに<span class="ddd">雪</span>が降りました。この時期での降<span class="ddd">雪</span>は珍しい。</dd> </dl> </body> </html>

    • ベストアンサー
    • litton101
    • CSS
    • 回答数1
  • ウェブマスターツール メリットは?

    サイトを運営するにおいてウェブマスターツールに登録したほうが良いと聞きますが 登録することによってどんなメリットがあるのでしょうか? 検索されやすくなるのでしょうか?

  • Wordpressのサイドバーの変更方法について

    お世話になります。Wordpressの初心者です。 現在ダウンロードしたWordpressのテーマを編集しているのですが、添付させていただきました画像のように#sidebar-primaryのwidthを300pxから200pxに編集したのですが画像のようにAの部分は変わらずにBの部分だけが変わっています。 そのあとに#contentのwidthを600pxから700に編集すると横の幅の罫線だけが延びてしまってAの範囲にまで出てしまうようになってしまいました。 画像のAの部分が変更できなくて困っています。ここの長さを400pxから300pxに変更するにはどうしたらいいのでしょうか?

  • ワードプレスのCSSを移動させる

    私の使っているテーマのCSSが全部で6つあります。 1つはPHPやHTMLと同じ場所にあるのですが、その中にCSSというフォルダがありそのフォルダの中に5個のCSSがあります。なので、ワードプレス上からいじれず、いちいちFTPからダウンロードしていじらなくてはならなく面倒です。 テーマ編集で表示される階層にあるCSSに @import url(css/html5reset-1.6.1.css); @import url(css/layout.css); @import url(css/common.css); @import url(css/nav.css); @import url(css/content.css); @import url(css/top.css); このような記述があり、これがCSSフォルダに送っているのだと思い、 CSSフォルダの中のCSSを正しい階層にもってきて、上記の部分を @import url(html5reset-1.6.1.css); @import url(layout.css); @import url(common.css); @import url(nav.css); @import url(content.css); @import url(top.css); このように書けば大丈夫だろうとおもったのですが、HPからCSSで指定されていたH1の淵の画像などがすべて消し飛びました。 なんとか、5つのCSSの階層を上にあげたいのですが、どのようにすればよいのでしょうか? ちなみに、使っているテーマは、 http://pacific.prime-strategy.co.jp/ これです。

  • IE11で表の罫線に影をつけて立体的に表示させたい

    ホームページビルダー17を使っています。 以前のIEでは表の罫線に影が付き立体的に表示されていたのが、最近のIE11とかだと 罫線が2重の実線で見えてしまい、影が付いたように見えません。 例えば、下記URLだとIE11の設定で互換表示で表示するとページ下の方の ■中身が空のセル という項目の票が正しく表示されるのに、 互換表示無しでは罫線に影が付きません。 http://www.tohoho-web.com/html/table.htm これはどのようなHTMLに書き直したら良いのか教えてください。よろしくお願いします。

  • ジオシティーズ 文字化けはガセ?

    ヤフージオシティーズは文字化けするからホームページ作りはやめたほうがよい、と知り合いから聞いたのですが、ジオシティーズでサイトを作ってみたのですが、特に文字化けしません。 IEを使ってみていますが、他のブラウザなら文字化けするのでしょうか? 文字コードの設定のソースは書いていません。

  • CSS3について

    CSS3について初歩的というか、本当にお恥ずかしい質問を何点かさせてください。 自分で調べてみても初歩的すぎて(常識すぎて)わかりませんでした。 1、自分はHTML4.01とCSS2.1しか使ったことがないのですが、CSS3はHTML4.01にも使えるのでしょうか??(よく「HTML5&CSS3」という名目で本が並んでいるので、、、)CSS3とHTML4.01の組み合わせは一般的でなかったりするのでしょうか? 2、CSSファイルの頭に記述する文字コード?の「@charset "UTF-8";」、また、拡張子は「.css 」のままですか?もしそうなら、CSS3の文法さえ守っていさえすればCSS3ということでしょうか? 3、htmlに外部ファイルとしてリンクさせる場合の記述もCSS2.1と同じなのでしょうか? 質問がまとまってなくてすいません。どなたか教えていただけないでしょうか?? 宜しくお願いいたします!

    • ベストアンサー
    • lovesms
    • CSS
    • 回答数2
  • IEでのテーブル表示について

    こんにちは。 web作成初心者です。 今回ホームページ作成することになり,一から(テンプレートを使わずに)必死にもがいております。 いろいろ新たに知ることは多く,CSSの初期化は理解し実装しております。 そこで,今回ドロップダウンメニュー(CSS)の下に左に画像,右に文書を入れたいと思い, tableを入れてみたのですが…firefoxではきれいに表示されるのですが, IEでは表示されません(文字のみ表示)。 いろいろ調べてみても原因が不明です。 tdの中の border-width : 1px; を外せば枠線は表示されますが色が反映しません。 いろいろご教授よろしくお願いいたします。 [HTML] <table class="top" border="1"> <tbody><tr> <td>aaa</td> <td>bbb</td> </tr></tbody></table> [CSS] .top{ position : absolute; top : 122px; width : 792px; height: 200px; z-index : 1; } .top td { border-color : red; border-width : 1px; }

    • ベストアンサー
    • 1ypsilon1
    • CSS
    • 回答数1
  • Shadowboxを使い方が分からない

    下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js (floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img (表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************

    • ベストアンサー
    • imamuu0
    • HTML
    • 回答数5
  • Shadowboxを使い方が分からない

    下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js (floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img (表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************

    • ベストアンサー
    • imamuu0
    • HTML
    • 回答数5
  • Shadowboxを使い方が分からない

    下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js (floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img (表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************

    • ベストアンサー
    • imamuu0
    • HTML
    • 回答数5
  • Shadowboxを使い方が分からない

    下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js (floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img (表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************

    • ベストアンサー
    • imamuu0
    • HTML
    • 回答数5
  • IEでだけレイアウトが縦になる

    わけあってソースをお見せできないた為、正確なアドバイスをいただけない事を 十分承知で質問させていただきます。 あるWEBサイトのページで、IE(5~10)でだけレイアウトが縦になってしまいます。 表示させたい二つの塊は、いずれもdivで囲われています。 その他のブラウザでは問題なく左右に表示されるのに、 なぜIEでだけこのような現象が起こるのでしょうか。 こうじゃないか?といった憶測でもいいのでご協力くださる方、 どうかご回答お願いいたします。

  • レスポンシブデザイン スマホで非表示にしたい

    レスポンシブデザインのサイトを制作していて質問です。 今現在PC表示でページを下にスクロールするとページトップへ戻るボタンが右下に出現するように制作しております。 このボタンをスマートフォンやタブレットで表示した際に出現しないようにする方法はありませんでしょうか? html------------------------- <p id="page-top"><a href="#wrap"><img src="" alt="" height="" width=""></a></p> css-------------------------- #page-top { position: fixed; bottom: 20px; right: 20px; } script------------------------ $(function() { var topBtn = $('#page-top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); 上記のように制作しています。 よろしくお願いします。

  • 色の指定

    CSS初心者です . 質問1 色を指定する時、大文字のほうがいいのでしょうか?小文字だと楽なんですが・・・ #C33 #c33 質問2 色を指定する時は省略系のほうがブラウザの処理が早いですか? #c36 #cc3366 よろしくお願いします

    • ベストアンサー
    • flash0
    • CSS
    • 回答数2
  • <div>と<div>の隙間を無くす方法

    ヘッダーの<div>を作って、その下に横長(ヘッダーと同じ長さです)ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20pxほどの隙間が空いてしまいます。なぜでしょうか?マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか? また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか? とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header">     <div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa-->     <div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;

    • ベストアンサー
    • mahalo1114
    • CSS
    • 回答数2
  • lightboxでNEXTをクリックしても同じ画像

    lightboxのキットをネットからDLして利用しています。 変更するソースはHTMLの表示させる画像の箇所辺りで、jsやcssはいじっていません。 実装して、動作もうまくいっているのですが、 NEXTボタンをクリックしても同じ画像を表示してしまいます。 再度クリックすると次へ移動するのですが、どこを修正したいいのでしょうか? 因みに8枚の画像をimagesフォルダへ入れていますが、表示されるimage○of○には、 1of16と倍になってしまっています。