ここから本文です

HTML,CSSについて、下記の画像のようにタイトルの下に画面全体に帯を広げて、その...

shi********さん

2020/7/200:54:55

HTML,CSSについて、下記の画像のようにタイトルの下に画面全体に帯を広げて、その帯の上にテキストと入力ボックスが表示されるのが理想なんですが、どう実装したらいいのか教えて頂きたいです。

よろしくお願いします。

HTML CSS,入力ボックス,テキスト,帯,画面全体

閲覧数:
21
回答数:
1
お礼:
25枚

違反報告

回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

oishii_mahouさん

2020/7/206:21:13

ふつうに、
タイトルの下にブロックを置いて、
テキストとテキストボックスを入れればいいだけ。

────────────────
<h1>title</h1>
<div id="belt">テキスト<input type="text"></div>
────────────────

#belt の背景を赤くするなり、
text-align:right でテキストとテキストボックスを右揃えにするなり、
好きなように CSS を指定する。

────────────────
#belt {
background: #f00;
text-align: right;
}
────────────────

ただし、
これだけだと
#belt の左右に余白ができてしまう。
これは <body> の margin が原因だから、
余白が出来て困る場合は <body> の margin も 0 にしておけばいい。

────────────────
body { margin: 0px }
────────────────


以上をまとめて全体のコード例

────────────────
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>

<style>
body { margin: 0px }
h1{ text-align: center }
#belt {
background: #f00;
text-align: right;
}
</style>

</head>
<body>

<h1>title</h1>
<div id="belt">テキスト<input type="text"></div>

</body>
</html>
────────────────

  • 質問者

    shi********さん

    2020/7/404:51:33

    凄いです!
    htmlに関して色々サイトを見てたんですが、idを使わないで、出来るだけclassを使え、みたいなサイトをちらほら見たんですが、、、

    html
    <div class="belt">

    css
    .belt{
    }

    この書き方でも同じ結果ですよね?
    idとclassってどう使い分けているんでしょうか、、、

  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる