スペース/タブ/改行(word-break, overflow-wrap)

white-space word-break overflow-wrap(word-wrap) を利用すると、スペース/タブ/改行を制御できます。多少ややこしく、デザインが崩れやすい原因の1つです。CODEPENの例とともに動作確認していきます。

空白文字の制御

white-space

white-spaceは、要素内の空白文字(スペース、タブ、改行)を制御します。

設定値 連続する空白とタブ文字 改行 折り返し
normal 1文字にする 詰める 折り返す
nowrap 1文字にする 詰める 折り返さない
pre そのまま そのまま 折り返さない
pre-wrap そのまま そのまま 折り返す
pre-line そのまま 詰める 折り返す

個人的に、 pre-wrap をよく利用します。

折り返しの制御

デフォルトですと、ボックスから文字がはみ出てしまいます。
はみでないようするには、word-break: break-all または、 overflow-wrap: break-word を利用します。

各classごとに設定すると対応漏れが発生しやすいので、 base.css など大元となるCSSで設定してしまうことをお勧めします。

word-break: break-all

ボックスからはみ出る位置で折り返します。
なので、英単語の途中でも折り返されてしまいます。

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

overflow-wrap: break-word

英単語の途中で折り返しません。
ただ、他に改行できるポイントが無い場合には、単語途中でも改行してくれます。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

overflow-wrapとword-warp
CSS3の仕様案で word-wrap から overflow-wrap へ改称されました。ただ、IEなどでは、word-wrap のみ対応しています。
【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。