20190821のCSSに関する記事は2件です。

改行させたくない時のCSS

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです!

改行防止

サイトを作成しているとPCでのwindowsやmacによって表示が異なるしスマートフォンの対応などレスポンシブ対応が求めて簡単な作業のメモです。
【CSS】レスポンシブ対応の方法や作り方を徹底解説【メリット&デメリット】

改行してないかテスト

デベロッパーツールを使用し以下確認を行いました。
①CSSに不具合がないか確認する為にウィンドウサイズを変更してみる。
②ブラウザのフォントサイズ設定を変更してみる。(ChromeならSettingsで変更可能)
Google Chromeのフォントを変更する方法

改行バグ発見

今回は以下のCSSのコードを追加して修正しました。word-break

word-break: keep-all;

ブラウザ幅を可変にしてもある程度崩れさせたくないならflexboxと単位の相対指定でなんとかなるはず。
Flexbox (フレックスボックス)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

プログラミング初心者の備忘録ーお問い合わせフォーム編

はじめに

未来電子テクノロジーでインターンをしているMaomao Maoです。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

今回は、お問い合わせフォームを作ってみようと思います。

お問い合わせフォームを作る

メールアドレスの入力欄を作る

メールアドレス入力欄は1行入力欄を作ります。
その際、inputを使用します。

お問い合わせ内容入力欄を作る

お問い合わせ内容入力欄には、複数行入力できるようにします。
その際、textareaを使用します。

<form>

<p>メールアドレス</p>
<input>

<p>お問い合わせ内容</p>
<textarea></textarea>

</form>

送信ボタンを作る

送信ボタンにも、inputを使います。

<input type="submit">

ボタンのテキストを変えたい場合は、valueを使います。

<input type="submit" value="保存">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む