イイダリョウのブログ。HTMLタイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。最後に箱組み箱組み(はこぐみ)とはなにか。箱型に文字を組むから箱組み。長い文章(本文)を四角いブロックの中に流し込んで画面にレイアウトすることです。HTMLでいうと段落pタグで囲った文章のことです。この段落pタグと見出しhxタグのセットをsectionタグで囲ってセクショニングします。<p>祇園精舎の鐘の声、諸行無常の響あり。娑羅双樹の花の色、盛者必衰の理を顕す。奢れる人も久しからず。猛き者もつひには滅びぬ、偏に風の前の塵に同じ。「ゆきなが」ではありませんw「ぎょうちょう」と読みます。文字通り「行」の長さですね。1行あたりの文字数で表します。こちらをご覧ください。同じ文章でも行長によって読みやすさが変わりますよね!10文字はせわしく、50文字は長い、と感じませんか?行の折り返しの部分が一呼吸の役割を担っています。あまりに折り返しが多すぎると目が疲れるし、少なすぎると頭が疲れますね。一般的には「35文字〜45文字」ほどが適度な行長と言われています。CSS設定の例でいうと、例えば一文字が15pxサイズ*1の場合は35文字だと段落p要素の幅widthは525pxになります。15px;}スマホの場合はもう少し幅が狭くなりますね。折り返しは20文字ちょっとくらいでしょうか。「ぎょうかん」と読みます。本文の行と行の間隔のことです。こちらをご覧ください。行間の数値にはいくつかの表記の仕方があります。今回は文字サイズに対して1行の長さが何倍かで著します。1.25倍でもまだキツイです。*2一般的には「1.5倍〜2倍」ほどが適度な行間と言われています。2倍を超えるとかなりゆったりした見た目になりますね。余白が多めのデザインのコピーなどに使われます。これはCSSでいうところのline-heightの相対値にあたります。本記事では1.5〜2倍の中間の1.75倍を採用して次に進みます。最後にジャンプ率です。ジャンプ率とは、「本文」と「見出し」のサイズ差のことです。元気のいい名前ですね。こちらをご覧ください。ジャンプ率が100%だと文字サイズの差が等倍で、一見すると見出しとわかりません。フォントの太さを変えているのでかろうじで識別できます。125%でもまだ明確ではない感じがしますね。150%以上になるとわかりやすくなってきますね。一般的なWebページでは「150%〜200%」ほどがよく使われるサイズです。/*ジャンプ率150%*/}ただし、サイトのメインビジュアルやバナー広告などではもっとメリハリをつけてコピーを立たせるために300%以上などもありえます。ジャンプ率」の箇所は400%のジャンプ率です。ジャンプ率」をまとめると...行長:1行あたりの長さ(「35文字〜45文字」ほどが適度)行間:本文の行と行の間の間隔(「1.5倍〜2倍」ほどが適度)ジャンプ率:本文と見出しのサイズ差(「150%〜200%」ほどがよく使われる)ひとまずこの感覚がつかめれば画面上にテキストをレイアウトすることができるかと思います!Webブラウザのフォントはシステムフォントの場合、ゴシック体になります。太さ(font-weight)もnormalかboldの2種類くらいです。最初はとにかくゴシック体のテキストを画面にガンガン配置してみましょう!それではまた。タイポ、色相環、配色)まとめデザインってどうやるの?むずかしそう。自分にできるのかな?...2018-11-27黒い画面だけでWebページを作成-後編:viエディタでコーディング!「前編」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。