コピペでCSS!
文章中の余白とサイズ別改行編

にいどめ

コピペでCSS!は、
深い意味まで考えず、CSSコードを自分仕様にアレンジして使おうぜ!という内容です。

お好きな空白サイズやディスプレイサイズに変更し、必要があればクラス名も変えてご使用ください。

コードはどこに書くの?という方、うまく反映されないなぁという方は、以下をどうぞ。

CSSをマイルドにお伝え!

どういうもののこと?
書き方やクラス名って?…etc

反映されない原因は何?

どんな時に発生しているのか、
経験した原因を6つご紹介

相変わらず浅く解説しておりますので、よければ参考にしてください。




超便利な…

空白も作れる段落とは?

記事を書いていると、ギュッと詰まり過ぎて読み辛いなと思う時がありますよね。
そういう時はある程度の間隔で空白を作れば見やすくなるのですが……

リス

あれ?改行を2つ重ねても空白が出来ない…

カエル

空白って連続しちゃダメなの?

と、単なる空白(余白)を作るのに苦労する方も多いはずです。

何もしない場所=空白。
しかし何もしなければ、本当に何もなかったように扱われて空白すら無視されてしまう…!

そういう時はCSSで空白を作りましょう。
囲み枠などで周囲に余白を作るのと同じ感覚で、指定箇所の上下に空白を設けるという考えです。

なお、以下のコードは数字の部分を変えることで空白幅を調節できます。

上にスペースを作る

指定箇所の上に一行分の空白を作ります。

上に空白を作りたい箇所に、<p class=~></p>でCSSを適用させてください。

<表示例>
※差別化するため背景色をつけています

当サイト名は非常にポジティブ!

Anything’s Possible=なんでもやれば出来る
面倒くさがりのネガティブ人間が作ったサイトとは思えない名前です。

<投稿(HTML)入力例>

当サイト名は非常にポジティブ!
<p class=”ue1″>Anything’s Possible=なんでもやれば出来る
面倒くさがりのネガティブ人間が作ったサイトとは思えない名前です。</p>

下にスペースを作る

指定箇所の下に一行分の空白を作ります。

下に空白を作りたい箇所に、<p class=~></p>でCSSを適用させてください。

<表示例>
※差別化するため背景色をつけています

…というのも、自分のしたいことには熱血派。
面倒くさいと言いながらも、形になるまで徹底的に調べて取り組みます。

あくまで“形になるまで”ですが…。

<投稿(HTML)入力例>

<p class=”shita1″>…というのも、自分のしたいことには熱血派。
面倒くさいと言いながらも、形になるまで徹底的に調べて取り組みます。</p>
あくまでも“形になるまで”ですが…。

上下にスペースを作る

指定箇所の上下に一行分の空白を作ります。

上下に空白を作りたい箇所に、<p class=~></p>でCSSを適用させてください。

<表示例>
※差別化するため背景色をつけています

なぜか常に眠く、基本が怠け者です。
そのせいか、突然活発に動くと、

どうした!?何かあったのか!?

と周囲が異様にザワつきます。
シナリオライターになると言った時、ボイスドラマを作ると決めた時もザワつきました。

<投稿(HTML)入力例>

なぜか常に眠く、基本が怠け者です。
そのせいか、突然活発に動くと…
<p class=”us1″>どうした!?何かあったのか!?</p>
と周囲が異様にザワつきます。
シナリオライターになると言った時、ボイスドラマを作ると決めた時もザワつきました。

字下げする

指定箇所を字下げします。

字下げしたい箇所の上のテキストから、<p class=~></p>でCSSを適用させてください。

<表示例>
※差別化するため背景色をつけています

いつまでも少し斜めに歩いているので、色々と心配される日々です。

それでも、
「あれをやっておけばよかった」
「あんなことがしてみたかったのに」

と言い訳することがないよう、出来ることはしたいと思っています。

<投稿(HTML)入力例>

いつまでも少し斜めに歩いているので、色々と心配される日々です。
<p class=”zisage1″>それでも、
「あれをやっておけばよかった」
「あんなことがしてみたかったのに」</p>
と言い訳することがないよう、出来ることはしたいと思っています。

この余白付き改行はかなり役に立ちますよ!ぜひご活用ください。

これまた便利な…

PCかスマホのどちらかだけで改行する

自分が入力した文章をスマホで見た時、「ここで改行すると読みやすいはず!」と思って改行させてみると、PCから見た時に「バランス悪っ…」なんて経験はありませんか?

そのような場合、スマホ閲覧時だけ改行できれば万事解決ですよね。

ならばスマホ閲覧時だけ改行させちゃいましょう!
逆にPC閲覧時だけ改行するコードもご紹介しますよ。

なお、以下のコードに記述しているディスプレイサイズはお好みのサイズに変更してください。

CSSコード

上記コードで、PCだけ改行・スマホだけ改行の両方が適応されます。

使い方

改行させたい箇所に記述してください。
記述した箇所では普段のような改行をせず、ダラダラと文章を書き続けてください。

スマホ閲覧時だけ改行

スマホと書いていますが、640px以下のディスプレイサイズの時に改行させるようにしています。それ以上のサイズの時は改行なしでダラダラ表示しますので、お好きな数値で反映してください。

<投稿(HTML)入力例>

こんな言い方をすると、すごくポジティブに見えますよね。<br class=”smap” />でも根はネガティブなんですよ…、根は。

<スマホ表示例>

※差別化するため背景色をつけています
※iPhone7サイズのスクリーンショットのため画像が小さいです

PC閲覧時だけ改行

PCと書いておりますが、640px以上のディスプレイサイズの時に改行させます。それ以下のサイズの時は改行なしでダラダラ表示しますので、お好きな数値で反映してください。

<投稿(HTML)入力例>

こんな言い方をすると、すごくポジティブに見えますよね。<br class=”pc” />でも根はネガティブなんですよ…、根は。

<PC表示例>
※差別化するため背景色をつけています。
スマホから閲覧されている方は改行されていない表示となります。

こんな言い方をすると、すごくポジティブに見えますよね。
でも根はネガティブなんですよ…、根は。

以上です。
文章の圧迫感を軽減させるためにも、使いまくり必死の段落と改行でした。

次回は、CSSコードを扱う時に知っておくと便利な小ネタをご紹介します!


CSSの
小ネタ集

ご覧いただきありがとうございました!