行間とフォントサイズを CSS で調整して読みやすいデザインにしよう - Naifix
読みやすいブログデザインを目指すなら、余白と配色がポイントです。 以下の記事でブログ記事本文の横幅と左右の余白に関して解説しています。 これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開 本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間、段落ごとの余白ですね。 加えて、余白に深く関わってくる文字のサイズや色をどのようにすれば読みやすくなるのか、サンプルと合わせてご覧ください。 余白が必要な理由 ブログ記事は小説と違い、読者が一字一句逃さないよう読むことはほとんどありません。 よほど文才があってぐいぐい引き込まれる記事、または惚れこんでいるブログなら別ですが、たいていはざっと流し読みしていきます。 そのうえで、自分に必要な情報があると判断したらもう一度読み直したり、あとで読み返すためにブックマークやシェアといった行動に移ってくれます。
誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS - 急がば 急いでまわれ！
2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている
ブログにおすすめのフォントサイズと行間を徹底解説【簡単CSS】 - 急がば 急いでまわれ！
フォントサイズと行間を綺麗に整えることで、グッと文字が読みやすくなります。サイト訪問者が「読みやすいサイト」にするために、CSS初心者の方になるべく簡単に解説していきます。 文字の読みやすさって本当に大事です。面白そうな記事を読みだしても、なんだかゴチャゴチャしているから最後まで読むのを止めちゃうことって経験があると思います。 色々と難しいカスタムしていても、文字の調整を忘れちゃってる方も多いはず。 ということで僕自信も今一度『文字』について見なおしてみました。カスタム方法は最後にまとめて書くので、目を通して見て下さいー！ 段落の余白について テキストを入力していくときは基本＜p＞タグを多用していると思います。＜p＞タグは段落を作るタグなので、ここで言う『余白』とは段落の文字と文字の間の余白のことを言います。 悪い例① メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した
少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ
見出しジェネレーター 外観や色を選んでCSSを生成するジェネレータータイプ。 CSS見出しジェネレーター CSS見出し-ジェネレーター | WEB道 吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。 見出しメーカー 好きな色でCSS見出しが作れます | スタイルシート見出しメーカー 好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。 見出しサンプル集 見出しデザインと、HTML・CSSがセットになったデモサンプル集。 CSS見出しデザインのアイデア9個 H1一つでここまで出来るCSS見出しデザインのアイデア9個 切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。 CSSのみで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
