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

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【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

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

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

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

あわせて読みたい

関連記事

おすすめスクール

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

システムアーキテクチュアナレッジ システムアーキテクチュアナレッジでは、ITスクールとしては珍しく正規雇用かつ現役のエンジニアが講師を務めています。「責任を持ったIT教育」をテーマに、未経験者をプロフェッショナルに育てます。
ページ上部へ戻る