1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【CSS入門】div要素を改行をさせない方法

【CSS入門】
Pocket

どんな時?

<p>や<div>タグを使用すると、タグの終わりに改行が入ります。これは、タグ内で段落が終わった事を表していますが、どうしても改行したくない場合もあります。

たとえば、<div>タグはJavaScriptを使って中の文字を任意に変更したい場合等によく使用されますが、そこで改行されると嫌な場合があります。

例)JavaScriptを使って<div></div>の中の文字を変更したい場合 等
HTML側

このコードを以下のようにブラウザ上で表示したいですが、

Hello World
こんにちわ、太郎。今日も元気ですね。

実際には以下のようにブラウザ上で表示されます。

Hello World
こんにちわ、
太郎
。今日も元気ですね。

どう対処する?

こういった場合は、CSSを使用します。先ほどのHTMLの<div>タグにプロパティを追加します。

するとブラウザでは

Hello World
こんにちわ、太郎。今日も元気ですね。

こんな風に表示されます。

<div>のstyle属性に「display: inline-block」「_display: inline」を追加しました。
似たようなプロパティが二つありますね。これは、IE系ブラウザ用とMozilla系ブラウザ用になります。
ユーザがどのブラウザを使用するか不明な場合もありますから、2つ追加しました。

CSSファイルに記述する

さて、例の様な短いHTMLならば問題はあまりありませんが、もっと長いコードを書いた場合<div>タグの中にプロパティを書くのはちょっといただけません。邪魔ですし、可読性が悪いですね。CSSファイルに記述してすっきりさせましょう。

ヘッダーに

を記述します。
これだけで、<div>に対して、「style=”display: inline-block; _display: inline;”」というプロパティが追加されました。他にも特定の<div>にだけプロパティを追加したい場合はidを使って記述します。

サンプル

サンプルを用意しました。色々といじって見て、プロパティの効果を確認してみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る