質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1653閲覧

formのスタイル調整について

satoudayo

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/05/07 14:20

編集2018/05/07 14:21

※初心者なので意味の分からないことや訳の分からないことよく書きます。初歩的な勘違いとかもよくあります。ごめんなさい;;

下記のようにコードを書くと画像のような結果になります。
テキストエリアとボタンが横並びではなく、ボタンは下がっている状態なので見栄えが悪いのです。buttonのmarginを0にしてみたんですが、結果は変わりませんでした。
テキストエリアやボタン要素の大きさを変えずに、アンダーラインを統一したい場合どのようにすればよいのでしょうか?(適当な言葉が分からないので、アンダーラインと表現しました。ボタン要素を上に少し上げて、横の並びを直線にしたいって言えば伝わるでしょうか;;)

<form> <textarea></textarea> <input type="button" value="スタート"> <input type="button" value="ストップ"> </form>

![イメージ説明説明]

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

まずhtmlの各要素に対する認識を学習しましょう。
大きく分けて"ブロック要素"、"インライン要素"、"置換要素"というものがあります。

・参考サイト
http://www6.plala.or.jp/go_west/nextcss/ref/article/el_clsfy.htm

インライン要素は簡単に言えば「横並びに要素を羅列する」ものであるので、
ブロック要素と大きく機能が別れます。

単純に質問の内容に答えるならば

css

1form{ 2 display:flex; 3 align-items:baseline; 4} 5

などでも実現できるかもしれませんが、
上記の概念を理解しないと結局つまづきます。

逆に上記の概念を理解しておくと、
自ずとそれぞれの要素に対して有効なCSSプロパティや
設定しても意味のないCSSプロパティを理解できると思います。

可能であればそれぞれのhtml要素が持つ本来の意味合いなども
含めながら覚えていくと後々まで役に立つのでおすすめですが、
取り急ぎはブロック要素とインライン要素の差について学習しておくと良いでしょう。

投稿2018/05/07 14:34

stampdoor

総合スコア483

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satoudayo

2018/05/08 14:11

あ、そういうの頭の片隅にあるだけで意識してませんでした...;; インライン要素や置換要素は上下のマージンが指定出来ないので、自分のやっていたことは的外れすぎるということですよね...?。?
stampdoor

2018/05/09 03:28

的外れというか、今回の場合はmarginによって要素が下揃えになっていないということではない、というほうが正しいかと思います。 この場合はvertical-alignという、直訳すると垂直方向の揃え位置がmiddle(中央)になっているため、bottomにしてあげれば解決しますが上記のようにdisplay:flexにして内包するすべての要素をbaselineに揃える方法でも可能です。 いずれにせよ使用している要素がどの属性のものであるかを理解することがそののちまでも役に立つ、むしろ必須とも言えることなので学んでおいたほうが良いと思いますよ。
guest

0

CSS

1form > * { 2 vertical-align: bottom; 3}

vertical-align
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

投稿2018/05/08 01:20

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問