[CSS] フォームの「送信ボタン」を中央揃えに! どの端末で見ても真ん中にする技!! | ヨッセンス
こんにちは! ヨス（プロフィールはこちら）です。 今回は、私が以前、WEBサイトを作っていたときに失敗したことのアウトプットをしたいと思います。それはWEBサイトのお問い合わせフォームとかに出てくる送信するとか内容確認みたいなボタンについてです。 ボタンを真ん中に配置したい! 何に苦戦したかというと、内容確認ボタンを画面の中央に寄せることです。 ちなみにボタンはこんなHTMLを書くと現れます。 <input type="submit" value="内容確認"> ボタンの左に余白を…… 最初、私は<input>タグ自体に、「margin」とかで一生懸命、ボタンの両側に空白を入れようとしていました。 そう。ちょうどこんな感じで、両サイドに空白の自動調整（auto）を入れて、中央揃えをやろうとしていたのですが…… input { margin : 0 auto ; } これが効かない!! 効か
![[CSS] フォームの「送信ボタン」を中央揃えに! どの端末で見ても真ん中にする技!! | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/f426e29e19bbd96112332f038e7e8e4353da620a/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Finput-button-center-250.jpg)
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
基本的なフォーム -- ごく簡単なHTMLの説明
この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、本章の最後で改めて紹介します。 フォームの基本枠組み データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。 HTMLのフォームは、データを入力するための手段（コントロールと呼びます）と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。 form要素の構造 form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属
エレメントで<input type="text">のみスタイルを変える
フォームのエレメントは<input>タグで指定します。しかし、<input>タグで指定できるエレメントは数多くあります。その中で特定の種類のエレメントのみにスタイルを適用するにはinput[type="エレメントの種類"]とします。あとは通常のスタイルを設定します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"><title>Sample</title> <style type="text/css"><!-- input { color: red; } input[type="text"] { color: orange; } --></style> </head> <b
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Java 暗号化拡張機能 JDK5.0
