![]()
- コマンドボタンを中央に表示したい
<html> <head> <title>test</title> <style type="text/css"> <!-- div.div_center { margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="div_center"> <button type="button" onclick="window.open('http://www.google.co.jp/','_blank');">google</button> </div> </body> </html> なぜこのコードではコマンドボタンは中央に表示されないのでしょうか？ margin-left: auto; margin-right: auto; これは違いますか？
- フルスライドの画像上に文字を入れたい
すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- tomiko1954
- 回答数1
- 画像を一杯に表示できない
PCでもスマホでも画像を幅一杯に表示させたいです。全画面表示ではありません。できればCSSファイルは別途作成せず、１つのHTMLファイルですませたいです。そこで以下のソースを書きましたが、画像x.jpgのサイズが、画面の大きさを変えても、変わりません <head> <style type="text/css"> img.example1 { width: 100%; height:auto; } </style> </head> <body> <div align="left"> <table width="100%" align="left" bgcolor="#FFFFFF"> <tr> <td width="100%"> <p><img src="x.jpg" alt="x" "class="example1"> </p> </img> </td> どうしたら良いでしょうか？
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- Contact Form7で文字サイズを変更したい
WordPressでホームページを作っています。 プラグインのContact Form7を使ってお問い合わせページを作成していますが、問い合わせフォームの入力する部分の文字サイズを大きくしたいと思います。 どこをどう調整したらいいかよく分からないので、ご存知の方いらっしゃればアドバイスお願いいたします。 htmlとcssは以下になります。 参考に画像も添付いたします。 ■html <table class="table table-bordered table-striped table-contactform7"> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">お名前</span></th> <td>[text* your-name akismet:author watermark"例：山田 太郎"] </td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">メールアドレス</span></th> <td>[email* your-email akismet:author_email watermark"例：×××@×××.com"]</td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">郵便番号</span></th> <td>[text* zip id:zip watermark"例：840-0015"] </td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">都道府県</span></th> <td>[text* pref id:pref watermark"例：佐賀県"]</td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">ご住所</span></th> <td class="address-100">[text* addr id:addr watermark"例：佐賀市木原２丁目２５-１０ UTビル２F東号室"]</td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">お電話番号</span></th> <td>[text* text-17 watermark"例：0952-60-6240"]</td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">ご相談内容</span></th> <td>[radio radio-256 use_label_element "月額3,000円HP" "月額9,800円HP" "ウェブ広告代行" "その他のご相談"]</td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">メッセージ本文</span></th> <td class="message-100">[textarea* your-message watermark"業種・目的・デザインイメージなど"]</td> </tr> </table> <p class="text-xs-center">[submit class:btn class:btn-success class:btn-lg "送信する"]</p> ■css /***** コンタクトフォーム *****/ .table-contactform7{ overflow: hidden; table-layout: fixed; } .required-contactform7{ padding: 5px; background: #DE8686; color: #fff; border-radius: 3px; margin-right: 3px; } .unrequired-contactform7{ padding: 5px; background: #BDBDBD; color: #fff; border-radius: 3px; margin-right: 3px; } .table-contactform7 th{ font-weight:bold; } .table-contactform7 input, .table-contactform7 textarea{ max-width: 90% !important; height: 30px; margin: 5px 10px 10px 5px; } .address-100 input{ max-width: 90% !important; margin: 5px 10px 10px 5px; } .message-100 textarea{ width: 100%; height: 100px; margin: 5px 10px 10px 5px; } @media screen and (min-width: 900px){ .table-contactform7 th{ width:28%; } } @media screen and (max-width: 900px){ .table-contactform7{ display:block; } .table-contactform7 tbody, .table-contactform7 tr{ display: block; width: 100%; } .table-contactform7 th{ width:100%; display:block; margin: 0 auto; border:none; } .table-contactform7 td{ display: list-item; list-style-type:none; margin:0; padding:0; width: 100%; border-top: none !important; } }
- 締切済み
- HTML
- hotrod7020
- 回答数1
- html5でブロックとブロックの間に隙間ができる
下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa（ホムペ） -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; }
- ベストアンサー
- HTML
- noname#227446
- 回答数2
- HPにGoogleアナリティクスを設定したい
お世話になります。 標記HP作成専門業者さん作成のHPに、Googleアナリティクスの設定の仕方をご教示いただきたくよろしい鵜お願いいたします。 ホームページ作成について初心者です。今までホームページをHPB（ホームページビルダー18）のテンプレートを利用して作成しておりましたが、スマホ対応がうまくいかず（私の知識・スキルの少ないせいでしょう）、改めて全体を専門業者に依頼して作成してもらいました。 Googleアナリティクスの設定は別料金で安くなかったのと、自分で何とかなると思って依頼せずに納品してもらってしまいました。 このHPはWordpressで作成されているそうです。 更新ボタンがついており、記載の文字や、検索のキーワード（それぞれ指定された部分）は変えることはできますが、それ以外は変えることができません。専門業者さんからのはこの更新に必要なパスワードだけ頂きました。こちらが用意したドメインサーバーに業者さんよりアップして頂いて納品完了のスタイルです。 googleアナリティクスの設定は、この更新ボタンの対応範囲でないとのこと、また、この設定がサポートの範囲でもないとのことでした。 コストの制限もあり標記のGoogleアナリティクスを自分で設定しなくてはならないのですが、どのようにGoogleのアナリティクス トラッキング コードを埋め込んだらよいかわかりません。 WordpressをPCにインストールするところで躓きました。PCはWordpressをダウンロードして解凍したところで止まっております。 HPBでは自分でコピペにて設定した経験があります。Googleアナリティクスのサイトのレポートのページはできております。 Wordpressの使用経験は全くございません。HPBの知識も初心者レベルだと思います。 そこからなるべく丁寧にご教示いただけますと助かります。 また、もし必要なら専門業者さんに訊くべき情報も教えていただきたく存じます。 質問内容も拙く、ご説明不足の感も免れず恐縮ではございますが、 どうぞよろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- taq0831
- 回答数1
- テーブルの枠線
IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。（画像添付） IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。（IE=edge） IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか？ widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>
- HPの作成を教えてください。
HP作成を見よう見まねで作成しているのですが最初からつまずきました。 作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。 何分初心者なので分かりやすく教えて頂ければ助かります。 body , html { height: 100%; margin: 0; padding: 0; text-align: center; /* 標準文字色 */ font-size : 100%; background-image : url(../imege/bg01.png); background-repeat : repeat-x;background-position : left top; } /* Safari用ハック 文字サイズ調整 */ /*\*/ html:\66irst-child body{ font-size: 90%; } /* end */ } img{ border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; } #container { width: 100%; position: relative; height : 100%; min-height: 100%; background-image : url(../imege/fbg01.png); background-repeat : repeat-x;background-position : left bottom; } #header{ width: 100%; height : 84px; margin-top : 0px; margin-bottom : 0px; text-indent : -9999px; } #contents { padding-top : 84px; padding-bottom: 100px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; margin-left : auto; margin-right : auto; } #header-in{ width : 900px; height : 84px; position : relative; margin-left : auto; margin-right : auto; margin-top : 0px; margin-bottom : 1px; } #contents-in{ margin-left : auto; margin-right : auto; width : 900px; position : relative; margin-top : 0px; margin-bottom : 0px; } #footer-in{ margin-left : auto; margin-right : auto; margin-bottom : 0px; width : 900px; height : 100px; position : relative; margin-top : 0px; } #header-logo{ width : 500px; height : 84px; float : left; z-index: 2; } #header-logo2{ width : 200px; height : 84px; float : left; z-index: 2; } <div id="container"> <div id="header"> <div id="header-in">ヘッダー <div id="header-logo">トップロゴ</div> <div id="header-logo2">お問い合わせ</div> </div> </div> <div id="contents"> <div id="contents-in">コンテンツ</div> </div> <div id="footer"> <div id="footer-in">フッター</div> </div> </div> よろしくお願いいたします。
- HP フレームページを開き、更にページを開きたい
左右に分割されているフレームがあります。 indexページから <A href="illust.html" target="top">フレーム</a> とリンクさせており、フレームページに飛びます。 左フレームに「Ａ」、「Ｂ」、「Ｃ」、「Ｄ」と…リンクが張ってあり、 「Ｂ」をクリックすると、右フレームに「Ｂ」ページが表示されます。 <A href="b.html" target="right" >Ｂ</a> indexページから、フレームにリンクさせたら、フレームページが開かれますが、 さらに「Ｂ」ページを開いた状態にすることは可能でしょうか？ 今の状態だと、フレームページが開かれるだけで、手動で左フレームから「Ｂ」をクリックするのが手間なのですが…。 ビルダー等のソフトは使用しておらず、メモ帳でタグを書いています。
- 検索されやすいようになってしまいますか？
ソースのヘッダーに 検索されないように <meta name="robots" content="noindex"> <meta name="robots" content="nofollow"> 入れているのですが、 ウェブマスターツールを登録した場合 検索されやすいようになってしまいますか？ ウェブマスターツールを登録＝検索されやすくなる と認識していますが あってますか？
- ベストアンサー
- レンタルサーバ・ASP
- ulgnucov
- 回答数1
- ワードプレスのwelcartカートボタン
こんにちは ワードプレスにwelcartを設置しています。 カートボタンをカスタマイズしたいと考えています。 CSSに @charset "utf-8"; /* CSS Document */ .skubutton{ background-image:"http:/画像" background-repeat: no-repeat; width: 443px; height: 108px; padding: 0px; margin: 0px; border:none; cursor:pointer; overflow:hidden; display: block; } を記述しました。 画像のようなカートの状態になっています。 カートのサイズは変更されましたが、画像が表示されません。 画像を表示するにはどのように記述を変更すればよいでしょうか？
- ＨＰの更新の方法をお願いします。
同じような書き込みの内容のＨＰを５０ページほど作ってあります。 タグ打ちです。 ＦＦＦＴＰを使いアップロードしてます。 ５０ページのＨＰの一部分を内容を変更するのに１ページずつ地道に書き換えてＦＦＦＴＰでアップロードして更新してます。 驚くほどの時間を要してます。 これを簡単に一度に５０ページ分の記事の修正が出来るソフトとかってないのでしょうか？ よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- mark2mx40
- 回答数3
- インデックスに登録されたページの総数
ページ内に <meta name="robots" content="noindex"> <meta name="robots" content="nofollow"> を入れてるのですが ウェブマスターツールで インデックス ステータス 昨年のデータを表示 を見たら、 インデックスに登録されたページの総数 308 となっています。 これはどういう事でしょうか？ <meta name="robots" content="noindex"> <meta name="robots" content="nofollow"> はクロールされないためのソースだと思っていたので インデックスに登録されたページの総数は、0になると思っていたのですが。 ちなみにトップページだけではなく 全てのページに <meta name="robots" content="noindex"> <meta name="robots" content="nofollow"> を入れています。
- ベストアンサー
- HTML
- gyueamqivqsvi
- 回答数2
- リンク先ギリギリに移動してしまいます
<a href="#リンク先">クリック</a> <Br><Br><Br><Br><Br><Br><Br><Br><Br><Br> <a name="リンク先">リンク先</a> のようにして、リンクで飛ぶ場合、 リンク先ギリギリに移動してしまいますが、 「リンク先」という文字の1cm上に移動したい場合は どうすればいいでしょうか？
- ベストアンサー
- HTML
- gpqdsecnqjs
- 回答数1
- 列の幅をcssで指定するには？
<table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> というテーブルがあるのですが こういう場合、 左の列（あ、う）は1em、右の列（い、え）は2em、 と、スタイルシートで指定する場合、どうすればいいでしょうか？
- ベストアンサー
- HTML
- CPOHJZHVYSS
- 回答数1
- クローム以外でCSSが読み込まれません。
フリーランスでWEBデザイナーをしています。 ついこの前までどのブラウザでも問題なくCSSが反映されていて その当時と基本同じソースを使用しているのですが、 クローム以外で反応しなくなってしまいました。 制作は基本クロームで行っています。 ネット上で関連した質問などは確認したつもりなのですが解決しません。 ちなみに現在作成途中のものがこちらです http://yuirnco.ciao.jp/card/ （自分のプライベートアドレスにデモをあげています） デザイナーを名乗っているのに、初歩的な質問で申し訳ないのですが クライアントがいるので、どなたかお助け頂けると助かります。 よろしくお願いします。
- 検索エンジン登録の方法。法人です。
今頃ですが、私の会社でホームページを作ることになりました。そこで質問です。googleとyahooの登録はどうすればいいですか？登録しなければどうなりますか？料金はいくらでしょうか？又、msnとか他の登録はどうすればよいですか？ホームページは商用です。宜しくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- poursuite
- 回答数1
- リンクがあるとテーブル幅が広がる
cssで table{ width:345px; } としてるのですが、 テーブルの中身にURL（ハイパーリンク）が含まれると そのハイパーリンクの文字の長さを基にテーブルも広がってしまいます。 これを阻止するにはどうすればいいでしょうか？ 手動でリンクのパスを区切るしかないのですか？
- ベストアンサー
- CSS
- LLQMQRWHCAVQ
- 回答数1
- margin div 中央寄せ
div内の文字ではなく、div事態をページの中央に寄せたいのですが、 なぜか div.test{ margin-top:100px; margin-bottom:100px; vertical-align: middle; } だと中央寄せにならないし、 div.test{ margin-top:100px; margin-bottom:100px; margin: 0 auto; } だと、 margin-top:100px; margin-bottom:100px; が無視されます。 上下の幅を設定し、更にdivを中央に表示するにはどうすればいいですか？
- ベストアンサー
- CSS
- EDTDIRCEAPBQU
- 回答数3