コピペでCSS！は、
深い意味まで考えず、CSSコードを自分仕様にアレンジして使おうぜ！という内容です。
お好きな空白サイズやディスプレイサイズに変更し、必要があればクラス名も変えてご使用ください。
コードはどこに書くの？という方、うまく反映されないなぁという方は、以下をどうぞ。
 |
どういうもののこと？ |
|---|---|
 |
どんな時に発生しているのか、 |
相変わらず浅く解説しておりますので、よければ参考にしてください。
超便利な…
-
- 空白も作れる段落とは
- 上にスペースを作る
- 下にスペースを作る
- 上下にスペースを作る
- 字下げする
超便利な…
空白も作れる段落とは？
記事を書いていると、ギュッと詰まり過ぎて読み辛いなと思う時がありますよね。
そういう時はある程度の間隔で空白を作れば見やすくなるのですが……
あれ？改行を2つ重ねても空白が出来ない…
空白って連続しちゃダメなの？
と、単なる空白（余白）を作るのに苦労する方も多いはずです。
何もしない場所＝空白。
しかし何もしなければ、本当に何もなかったように扱われて空白すら無視されてしまう…！
そういう時はCSSで空白を作りましょう。
囲み枠などで周囲に余白を作るのと同じ感覚で、指定箇所の上下に空白を設けるという考えです。
なお、以下のコードは数字の部分を変えることで空白幅を調節できます。
指定箇所の上に一行分の空白を作ります。
上に空白を作りたい箇所に、<p class=～></p>でCSSを適用させてください。
＜表示例＞
※差別化するため背景色をつけています
Anything’s Possible＝なんでもやれば出来る
面倒くさがりのネガティブ人間が作ったサイトとは思えない名前です。
＜投稿(HTML)入力例＞
当サイト名は非常にポジティブ！
<p class=”ue1″>Anything’s Possible＝なんでもやれば出来る
面倒くさがりのネガティブ人間が作ったサイトとは思えない名前です。</p>
指定箇所の下に一行分の空白を作ります。
下に空白を作りたい箇所に、<p class=～></p>でCSSを適用させてください。
＜表示例＞
※差別化するため背景色をつけています
…というのも、自分のしたいことには熱血派。
面倒くさいと言いながらも、地味に形になるまで取り組みます。
あくまで“地味に”かつ“形になるまで”ですが…。
＜投稿(HTML)入力例＞
面倒くさいと言いながらも、形になるまで徹底的に調べて取り組みます。</p>
あくまでも“形になるまで”ですが…。
指定箇所の上下に一行分の空白を作ります。
上下に空白を作りたい箇所に、<p class=～></p>でCSSを適用させてください。
＜表示例＞
※差別化するため背景色をつけています
そのせいか、突然活発に動くと、
「どうした！？事件か！？何かあったのか！？」
と周囲がザワつきます。
シナリオライターになると言った時も、ボイスドラマを作ると決めた時も…。
＜投稿(HTML)入力例＞
そのせいか、突然活発に動くと…
<p class=”us1″>「どうした！？事件か！？何かあったのか！？」</p>
と周囲がザワつきます。
シナリオライターになると言った時も、ボイスドラマを作ると決めた時も…
指定箇所を字下げします。
字下げしたい箇所の上のテキストから、<p class=～></p>でCSSを適用させてください。
＜表示例＞
※差別化するため背景色をつけています
それでも、
「あれをやっておけばよかった」
「あんなことがしてみたかったのに」
と言い訳することがないよう、出来ることはしていきたいと考える自由奔放な人間です。
＜投稿(HTML)入力例＞
<p class=”zisage1″>それでも、
「あれをやっておけばよかった」
「あんなことがしてみたかったのに」</p>
と言い訳することがないよう、出来ることはしていきたいと考える自由奔放な人間です。
この余白付き改行はかなり役に立ちますよ！ぜひご活用ください。
これまた便利な…
PCかスマホのどちらかだけで改行する
自分が入力した文章をスマホで見た時、「ここで改行すると読みやすいはず！」と思って改行させてみると、PCから見た時に「バランス悪っ…」なんて経験はありませんか？
そのような場合、スマホ閲覧時だけ改行できれば万事解決ですよね。
ならばスマホ閲覧時だけ改行させちゃいましょう！
逆にPC閲覧時だけ改行するコードもご紹介しますよ。
なお、以下のコードに記述しているディスプレイサイズはお好みのサイズに変更してください。
上記コードで、PCだけ改行・スマホだけ改行の両方が適応されます。
改行させたい箇所に記述してください。
記述した箇所では普段のような改行をせず、ダラダラと文章を書き続けてください。
スマホと書いていますが、640px以下のディスプレイサイズの時に改行させるようにしています。それ以上のサイズの時は改行なしでダラダラ表示しますので、お好きな数値で反映してください。
＜投稿(HTML)入力例＞
こんな言い方をすると、すごくポジティブに見えますよね。<br class=”smap” />でも根はネガティブなんですよ…、根は。
＜スマホ表示例＞
※差別化するため背景色をつけています
※iPhone7サイズのスクリーンショットのため画像が小さいです。…ボヤけてる…。
PCと書いておりますが、640px以上のディスプレイサイズの時に改行させます。それ以下のサイズの時は改行なしでダラダラ表示しますので、お好きな数値で反映してください。
＜投稿(HTML)入力例＞
こんな言い方をすると、すごくポジティブに見えますよね。<br class=”pc” />でも根はネガティブなんですよ…、根は。
＜PC表示例＞
※差別化するため背景色をつけています。
スマホから閲覧されている方は改行されていない表示となります。
でも根はネガティブなんですよ…、根は。
以上です。
文章の圧迫感を軽減させるためにも、使いまくり必死の段落と改行でした。
次回は、CSSコードを扱う時に知っておくと便利な小ネタをご紹介します！
囲み枠2
CSSの
小ネタ集
ご覧いただきありがとうございました！
