formのような横並びのテキストボックスを作りたい場面が時々出てきます。名前の「姓」「名」や、郵便番号の上3桁と下4桁などが2つのテキストボックスに分かれている場合、2行に分けて表示せずに1行で横に並んで欲しいんですよね。試行錯誤したところ、バリデーションエラーをきちんとそれぞれのテキストボックスの下部に表示させつつ、レスポンシブにも対応させるとなると、それなりに記述に工夫が必要だったのでメモしておきます。前提CakePHP2.6.10BoostCakeプラグイン(導入済み)Bootstrap3.3.5以上の環境で制作しています。完成形こんな感じです。「お名前」「フリガナ」「郵便番号」が横並びを実現した箇所になっています。PCでもモバイルでも問題なく表示されるかと思います。画面幅を変えて表示を試してみてください。画面の幅が768px以下の場合、ラベルがテキストボックスの上に移動します。バリデーションエラーがある場合、それぞれのテキストボックスの下に表示されます。CodePen.フォームヘルパーのコード例として「お名前」の部分のフォームヘルパーをハイライト表示しています。?>やっていることとしては、フォームヘルパーによる1つめのテキストボックスの出力内容を一度変数に入れ、2つめのテキストボックスの'before'オプションでそれを手前に出力しています。ラベルは1つめのテキストボックスのものを出力するようにし、2つめのテキストボックスのものは非表示にしています。1つめのテキストボックスの'after'オプションに2つ目のテキストボックスを出力する方が感覚的にはわかりやすいですが、この場合、2つめのテキストボックスでバリデーションエラーが発生した場合、表示されている1つめのテキストボックスのラベルを.form-errorクラスで囲む良い方法が見つかりませんでした。',ですが、これは通常時はクラス指定のないただのdivタグが出力されるだけですが、バリデーションエラーが発生した場合、.form-errorクラスが付与されます。無用な指定ではありません。グリッドオプションテキストボックスの幅の指定にはBootstrapのグリッドシステムを利用しています。非公式日本語版がわかりやすいかと思いますので、もし理解されていない方は一度読んでから取り組むと良いかと思います。(<768px)の3種類について指定しています。数値によってテキストボックスの幅を変えられますので、フォームの内容によって適宜変更してください。col-xs-6',CSS上記の方法で、横並びのテキストボックスを作るだけなら独自のCSSを追加する必要はありませんが、今回の例では入力必須項目のラベルに赤で「必須」の表示を加えるためと、郵便番号の上3桁と下4桁の間にハイフンを表示するためにCSSを追加しました。一応そちらも載せておきます。form内に横並びのテキストボックスを作るという本旨とは関係ありません。Retrying...が繰り返される場合transitionによるCSSアニメーションがChromeでページ読み込み時に動作してしまう問題サーボで自動スイッチAuthors3make@ささきち多摩川沿いに住むフリーのWebデザイナーです。近所のイオンによく行きます。