【HTML】たまに必要になる考慮ポイント(HTML編)

labelのwidthを設定したい

<label style=”width: 100%;”>abc</label>

ってやってもwidthは変わりません。

原因はlabelはインライン要素だからだとか・・・

なので

<label style=”display: block; width: 100%;”>abc</label>

display: blockをつけてあげると良いのです!!!


formタグを設置した際にエンターキー無効

HTMLでページを作った際に必要になる知識。
この考慮が漏れるとテストの時に「あーーーー!!!」ってなってしまう。。。

一旦、参考サイトを・・・
https://qiita.com/mimoe/items/89b317be5e38bfbc44ee

これのjsで制御するパターンを参考にしたら良いかと


コンボボックスを改良

入力+選択ができるエリアが欲しい時に必要。
datalistを使うとソレっぽく作れるが、前方一致になるため、入力されている時に全部のリストを表示することができなくなる。
そのためオリジナルの入力+選択ができるdatalistを作るのが得策!!

まずは、参考サイトを・・・
https://xiyuan.jp/html/334/


アレンジしてみよう

この参考サイトのソース+ちょっとした制御を追加したら良さそうですね。
方向キーでリスト切り替えれるようにしたり、▼をCSSで配置してあげたりして微調整したら!!!

あとで追記しますー


モーダルの閉じるボタン(×)がちゃんとでない

モーダルの閉じるボタンがちゃんと出ず白い四角になったことがあります。
モーダルの作りはjQuery-ui。
他と同じ作りしてるのになんでだーーー!!!!ってなったことがあります。

原因は、jsの読み込み順番。
bootstrapを読み込んだあとにjQuery-uiを読み込まないといけないのに、逆になっていました。

気づいてしまえば簡単ですが、ハマった時はなかなか気づけないものです・・・


アイコンのフォント化

アイコンをフォント化して、CSSだけでアイコンを使用できるようになります。
なので、色の変更も自由にできます。

知らないと可能性すら気づけないので、こんなのあるんだーぐらいには知っておきましょう。

やり方はこちら。

https://www.granfairs.com/blog/staff/howto-create-iconfont