- ベストアンサー
どのようなHTML、CSSを書けばいいのか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
この場合は、率直にtableで良いですよ。 ★こういうときこそ、tableを使う 表データだから virtical-alignが使える。 ★タブは＿に置換してあるので戻す。 <body> ＿<div class="header"> ＿＿<form action="http://www.google.co.jp/search"> ＿＿＿<table summary="searchForm" id="search" border="0"> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th>キーワード</th> ＿＿＿＿＿＿<td><input type="text" name="q" size="20" value=""></td> ＿＿＿＿＿＿<td><input type="submit" value="探す?"> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> ＿＿</form> ＿</div> スタイルシートは table#search{ border-collapse:collapse; width:26em;margi:5px 5px 5px auto; line-height:2em; } table#search th{ border: red 1px solid; backgrund-color:rgb(255,160,160); vertical-align:middle; } table#search td{ border:none; vertical-align:middle; padding-left:5px; text-align:right; } table#search td+td{ text-align:left; }
その他の回答 (1)
- Ogre7077
- ベストアンサー率65% (170/258)
このような場合なら <textarea> ではなく <input type=text> ではないかと思いますが、それはともかく // css form strong { border:thin solid darkred; background:pink; padding:1ex; } form * { vertical-align: middle; } // html <form> <strong>キーワード</strong> <textarea></textarea> <button>探す?</button> </form>
関連するQ&A
- HTMLについて
画像の横に画像を置く方法を探しています。 高さ110pxの画像の横に、それぞれ高さ50pxの画像二枚を縦に貼りたいのですが 二枚貼ろうとすると横に一列に表示されてしまい、改行をはさんでもどうしても一枚が改行されてしまい、なかなか縦二列に並んでくれません。 編集がしやすいという理由でFC2ホームページのHTMLメーカーを使っています。 HTMLメーカーを使うぐらいですから本格的なHTMLを打ち込むことすらできないので、CSSも使いこなせません。HTMLだけでできるような方法はあるんでしょうか？ それとも、そんな方法はないのでしょうか？ アドバイス戴けると嬉しいです。
- ベストアンサー
- その他（インターネット・Webサービス）
- HTMLとCSSで、
HTMLとCSSでサイトを作っているのですが、 メニューバーの表示が上手く出来ません。 添付の上の図ようなメニューを作りたいのですが、 下の図のように、メニューがフラッシュで隠れてしまいます。 フラッシュの上にメニューを表示させるにはどうすれば良いですか？ よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- HTMLとCSSでのClass属性がわかりません
画像を挿入し、リンクを埋め込むと、画像の周りに線がついてしまう。 これを避けたいのですが・・・・ 具体的に言いますと・・・各ページに「ＴＯＰページ」へ戻るボタンを埋め込みます 各ページのＨＴＭＬに <div class="icon"> <a href="リンク先"><img src="パス名"></a> </div> ＣＳＳに img.icon{ border-style: none; } と記述しましたが、各ページの画像（「ＴＯＰページ」へ戻るボタン）の周りは線がついたままです ＨＴＭＬの＜img src="パス名" border="0"＞を記述すれば、線を消すことは出来ますが 複数ページに渡っているため、全てにborder=”0”を入力するのは 手間がかかってしまいます なんとかCSSでコントロールしたいのですが・・・ そもそも記述（文法）が間違っているのでしょうか？ Classのとらえ方が間違っているのでしょうか？ 画像も一気に変えたい場合の事も想定し、 現在HTMLで画像挿入しているのを、CSSで埋め込む記述方法があれば 教えてください。 数日前から、HTMLとCSSの勉強をはじめた初心者ですので 見当違いな質問かもしれませんが どうぞ、よろしくお願いします
- ベストアンサー
- CSS
- ネットスケープのＣＳＳエラー
ネットスケープ4.78(win)を使っています。 フォームを設けて、その中で<textarea>を設置したのですが、 <div class="type1"><textarea></textarea></div> というような形でcssをかけたら、フォーム全体 というか、テーブル全体のレイアウトがおかしくなりました。 送信ボタンがテキストエリアの中に入ったり。 <textarea>にかけたcssの中身（クラス）は .type1 {font-size:12px; line-height:14px; color:#000000;} です。 <textarea>にはＣＳＳをかけないほうがいいのでしょうか？ どのようなＣＳＳなら安全でしょうか？ ちなみに <input type="text">には同様のＣＳＳをかけても大丈夫でした。 どなたか、教えてください。
- ベストアンサー
- HTML
- 【HTML/CSS】ボタンの枠が伸びてしまいます
htmlでコーディングをしています。 ボタン作成の部分で、どうしても解決できないことがあり、 投稿させて頂きました。 大変お手数ですが、ご教授頂けたらと思います。 input typeが「submit」のボタンに、画像を重ねて、機能はそのままにうまく配置するところまで できました。 ところが、Iceweaselというブラウザで見るとボタンの枠線は消えているのですが、 IE(バージョン11)で見ると、添付の画像のように、枠線が表示されてしまいます。 問題のボタンのhtml側とcss側の記載は以下の通りです。 ※<br>のタグは見易くするため、以下では省略しています。 *************************************************** 【html側】 <button input type="submit" value="検索"><img src="button_suche.gif" border="0"></button> <button input type="submit" value="決定"><img src="button_bestimmen.gif" border="0" style="width: 75px; height: 30px; margin-right:200px"></button> <button input type="button" value="全選択" onclick="chkAll_form(true)" /><img src="button_allegewaehlt.gif" border="0"></button> <button input type="button" value="全解除" onclick="chkAll_form(false)" /><img src="button_ganzefreilassung.gif" border="0"></button> 【css側】 button{ /*width: 75px;*/ /*height: 30px;*/ width:auto; padding:0; margin:0; background:none; border:none; font-size:0; line-height:0; overflow:visible; cursor:pointer; } *************************************************** なお、Iceweasel側でも、枠線は消えているのですが、 クリックすると、iEで伸びている分(margin-right:200pxの分)も含めた 幅の点線が表示されます。 またIE側は、そういうコーディングはしていないのに、 ボタンのマウスを充てると、まわりの枠が水色に反転します。 ※添付の図の「決定」ボタンの状態です。 どのようにすれば、IE側のこの枠は消えるのでしょうか。
- ベストアンサー
- HTML
- HTML5＋CSS3 でしかできないこと
長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３ が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！
- ベストアンサー
- その他（インターネット・Webサービス）
- phpでcssの記述をデータベースに登録したい
お世話になります php phpで動的にHTMLを生成したくてプログラミング中なのですが、エスケープ処理でつまづいてしまいました フォームのtextareaにcssコードを記述して送信したのですが、phpが止まってしまいます ◉フォーム <textarea name="css"></textarea> ◉入力した内容 /*メモを記述*/ #test {color:#F00;} 上記のような記述をフォームから送信してphpで受け取るにはどうしたら良いのでしょうか？ エスケープシーケンスの理解不足だとは思うのですが、ご教授のほどよろしくお願いいたします
- ベストアンサー
- PHP
- HTML & CSS について質問です。
HTML & CSS について質問です。 外部ファイルのスタイルシートに TABLE.test{ border-collapse:collapse; border-color:#000000; border-style: solid; } HTMLファイルに <TABLE ID="test"> <TR> <TD></TD><TD></TD> </TR> </TABLE> とした場合に外側の線は結合され黒色で表示されるのですが、 内側の線は灰色で表示されてしまいます。 全ての線を細線で表示したいと考えています。 アドバイスよろしくお願いたします。m(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)
- fc2メールフォームのCSSについて
fc2のメールフォームを利用しているのですが、パーツ利用（テンプレはデフォルト1）の際のCSSでコメントフォームのサイズを変更しても内容が反映されません。 CSSテンプレート作成用のファイルをダウンロードして確認したところ、フォーム表示用のソースが <div id="fc2form"> <div class="comment"><textarea></textarea></div> </div> ※不要部分は省略 となっていたため、CSSも #fc2form .comment{ width: 200px;} の数値のみを200から300へ変更したのですが、コメントフォームの横サイズは変更されず、メールフォーム全体を囲う外枠（<div id="fc2form">部分）の横サイズのみ変更されてしまいました。 CSSではなく管理メニューの「定型フォーム・テキストフォームの設定」から該当部分のサイズ変更をしても反映されません。 コメントフォームの縦横サイズを変更するにはCSSのどこを変更すればいいでしょうか？
- ベストアンサー
- レンタルサーバ・ASP
- 同じHTMLに、違うCSSを適用させているリンクについて
こんにちは。 同じHTMLに、違うCSSを適用させている aタグについて教えてください。 具体的には「イオブログ」というサイトのブログテンプレート一覧が表示されているページがあるのですが、 http://blog.eonet.jp/tmpparts/index.html 一覧の画像のリンクが http://blog.eonet.jp/tmpparts/sample.html?style=eoblog/az/theme.css 上記のような.cssでおわるリンクになっていました。 http://blog.eonet.jp/tmpparts/sample.htmlというHTMLファイルに、 違うCSSを適用させているようなのですが、どんな仕組みで表示されているのか（例えばCGIとか）よくわかりません。 もしおわかりのかたがいらっしゃったら、よろしくおねがいいたします。
- 締切済み
- デザイナー・クリエイティブ職
