CSSとjQueryで垂直リズムを維持する

コンテンツ

• タイプのレイアウト
• 垂直リズム
• リズムを指揮する
• 画像の取り扱い
• jQueryの改善
• 結論

• 必要な知識：CSS、基本的なjQuery
• 必要です：jQuery、CSS、HTML
• プロジェクト時間：30分
• ソースファイルをダウンロードする

コンテンツからデザインを行うと仮定すると、デザインに影響を与える最初の決定 持っている タイプに関連すること。でも ない サイトに影響を与える何かをした書体を選択します。タイプは印刷やウェブデザインの中核であり、複雑です。有効に活用される多くの蓄積された用語、慣行、規則、および技法があります。この記事では、タイプの1つの側面を管理するための1つの手法について説明します。これは、オンラインでは困難ですが、印刷では日常的なものです。一貫した垂直リズムを維持することで、プロフェッショナルなレイアウトを実現できます。

タイプのレイアウト

印刷物では、かなりの量のテキストを含むアイテムの場合、デザインの基盤はベースライングリッドである可能性があります。これは、ページに構造をもたらし、コンテンツの垂直方向の流れをガイドするために使用されます。ほとんどすべてがそのベースライングリッドを基準にして配置されます。用語を認識していなくても心配しないでください。ベースラインやベースライングリッドに慣れていない人は誰もいません。あなたはすでにそれらについて知っています。間違いなく罫線入り用紙に書いたときは、学校に戻って考えてください。書いたときに、手紙の下部を用紙の各行にきれいに配置しました。動作中のベースラインおよびベースライングリッド。ベースラインは、文字の下部が揃う架空の線です。ここでこの記事を見ると、実際には線がなくても、ベースラインが「表示」されます。あなたの脳はあなたのためにそれをそこに置きます、それがあなたが文章を読むことができる理由です。罫線入り用紙の線？それらはベースライングリッドです。文章がまっすぐになるようにまっすぐにし、テキストが規則的な垂直リズムになるように一定の間隔で設定します。

垂直リズム

垂直リズムは、ページのどこにテキストが配置されるかを決定します。これは、テキストのブロックをスキャンして読み取る機能に影響を与える1つのコンポーネントであり、感情的な反応を知らせるのに役立ちます。テキストが強い垂直リズムと良い間隔を持っているとき、私たちはそれが専門的で、考慮され、権威があり、そして読みやすいと感じます。テキストのリズムと間隔が悪いと、それはあまり考慮されておらず、専門的でなく、読みにくいことがよくあります。垂直リズムは、使いやすさと美学の一部です。

リズムを指揮する

残念ながら、ウェブは、タイプに関するいくつかの基本的な慣行を制定する能力の点で、依然として印刷のいとこではありません。 Webでは、印刷デザイナー（または学校の子供）と同じようにベースライングリッドを使用することはできません。テキストのベースラインをドキュメントのベースライングリッドに合わせることができません。 CSSにはベースライングリッドの概念がありません。そのため、テキストはベースライングリッドの線上に正確に配置されません。代わりに、線の間のギャップの垂直方向の中央に配置されます。それはウェブができる最高のことです。

サンプルドキュメントを使って実用的にしましょう。まず、ベースライングリッドを表示してビートを設定します。これを行うには、繰り返し背景画像を使用して、22px離れた通常の水平線を描画します。

1. html {背景：#fff url（baseline_22.png）; }

フラ、罫線入り用紙があります！

何も並んでいないことに気付くでしょう。すべてを揃えるには、すべての要素の下端がそれらの線の1つに当たるようにします。これを行う最も簡単な方法は、すべての要素が22の倍数である垂直方向の高さ（マージンを含む）を占めるようにすることです。これを行うCSSをいくつか示します。 REMユニットを使用していますが、REMを理解していないブラウザにEMフォールバックを提供しています。コメントには同等のPXユニットも含めています。 REM / EMをまだ理​​解していない場合は、代わりにpx値を使用できます。これらはすべて同等です。

1. html {/ * font-size：16px、line-height：22px * /
2. フォント：100％/ 1.375 "Helvetica Neue"、Helvetica、Arial、sans-serif;
3. 背景：#fff url（baseline_22.png）; }
5. h1、h2、h3、h4、h5、h6 {/ *マージン-上部と下部は両方とも22px * /
6. / * emフォールバック * /マージン：1.375em 0;
7. マージン：1.375rem 0; }
8. h1 {/ * font-sizeは32px、line-heightは44px * /
9. / * emフォールバック * / font-size：2em;
10. フォントサイズ：2rem;行の高さ：1.375; }
11. h2 {/ * font-sizeは26px、line-heightは44px * /
12. / * emフォールバック * / font-size：1.75em;
13. フォントサイズ：1.75rem;行の高さ：1.5714285714; }
14. h3、h4、h5、h6 {/ *フォントサイズは22px、行高さは22px * /
15. / * emフォールバック * / font-size：1.375em;
16. フォントサイズ：1.375rem;行の高さ：1; }
17. p、ul、blockquote {/ *下マージンは22px、行の高さはhtml（22px）から継承されます * /
18. / * emフォールバック * / margin-top：0;マージンボトム：1.375em;
19. マージントップ：0;マージンボトム：1.375rem; }

それが私たちに何を与えるかを見てみましょう。すべてのテキストがどのようにうまく整列しているかに注意してください。ベースラインにはありませんが、予測可能な垂直リズムがあります。きれいです。

画像の取り扱い

画像は物事をより複雑にします。いくつか含めると、リズムがどうなるか見てみましょう。彼らはレコードのスキップのようにそれを混乱させます–テンポは正しいですが、タイミングはずれています。配置がずれます。これは、画像の高さがベースラインの倍数になる可能性が低いため、下端がベースライングリッドと一致しないためです。

これを修正するには、各画像にマージンを追加して、マージンの下部をグリッドに合わせるだけです。これは、少しのJavaScriptで自動化するのに十分簡単です。基本的な計画は次のとおりです。

1. 各画像の高さを計算します。
2. ベースライン値が現在画像が占める垂直方向のスペースに分割される回数を確認し、残りを取得します。
3. ベースラインから残りを差し引いて、画像に適用する必要のあるオフセットを与えます。
4. 画像の下部にマージンとしてオフセットを適用します。

これで、画像の垂直方向のスペースの下部がベースライングリッドと正しく位置合わせされます。これを行うjQueryの基本的な関数は次のとおりです。

1. $（window）.bind（ ’load’、function（）{
2. $（ "img"）。each（function（）{
3. / *変数 * /
4. var this_img = $（this）;
5. varベースライン= 22;
6. var img_height = this_img.height（）;
7. / *数学を行います * /
8. varresidue = parseFloat（img_height％baseline）;
9. / *いくら追加する必要がありますか？ * /
10. var offset = parseFloat（baseline-remainder）;
11. / *画像にマージンを適用します * /
12. this_img.css（ "margin-bottom"、offset + "px"）;
13. });
14. });

なぜ window.bind ライン？サイズを確実に取得するには、画像が読み込まれるまで待つ必要があるためです。この基本的なコードを実行した例を次に示します。

jQueryの改善

世界が単純なものになることはめったにないので、ここでわかります。かなりの数の実装の詳細を処理する必要があります。私たちが持っている機能の何が問題になっていますか？たっぷり：

• フロートやブロックではなくインラインの画像で厄介な結果を生成します。
• 一部の画像、特にコンテナ内の画像ではバグがあるようです。
• リキッドレイアウトは扱いません。
• あまり再利用できません。

この動作を、例のスマイリーフェイスのようにインラインの画像に適用したくありません。インライン画像は、下端がテキストと同じベースライン上にあるように配置されます（ない ベースライングリッド）。これは、画像が垂直方向にオフセットされていることを意味します。 CSSもJSも、テキスト要素のベースラインがどこにあるかを見つける方法を提供していないため、オフセットがわかりません。インライン画像を無視し、に設定されている画像にのみ修正を適用する必要があります 表示ブロック （幸い、フロートされた画像は自動的に表示ブロックに設定されます）。

画像がコンテナ内にある場合、コンテナのオーバーフロー設定のために、画像に適用されたマージンが非表示になる場合があります。また、画像のマージンではなく、コンテナ要素のマージンが必要な場合もあります。この例では、ボックス内の画像よりも白いボックスに余白を付けて、ボックスに奇妙なギャップが表示されないようにします。

この関数は1回だけ実行されますが、液体のデザインでは、ブラウザーのサイズを変更すると画像の高さが変わります（これを確認するには、例のサイズをかなり狭いものに変更してみてください）。サイズを変更すると、リズムが再び崩れます。ブラウザのサイズが変更された後、およびページが読み込まれた後に実行する関数が必要です。リキッドレイアウトは他の問題も引き起こします。画像の高さは、132.34pxなどの小数ピクセルにすることができます。これにより、端数マージンを適用した場合でも、予期しない結果が生じる可能性があります（興味がある場合は、理由は次のとおりです：trac.webkit.org/wiki/LayoutUnit）。そのため、分数ピクセルによって引き起こされるレイアウトのバグを回避するために、画像をピクセル全体の高さにマッサージする必要があります。

最後に、これをより再利用可能な関数にする必要があります。実際、実際のソリューションは理論的なソリューションよりも複雑であるため、他のプロジェクトで再利用できるプラグインを作成する必要があります。

最後の例では、これらすべてを実現するコードを見つけることができます。プラグインのJavaScriptはコメントが多いので、フォローすることができます。次のように呼び出すことで、プラグインを使用できます。

1. $（window）.bind（ ’load’、function（）{
2. $（ "img"）。baselineAlign（）;
3. });

または、名前付きコンテナがイメージの親として存在する場合は、名前付きコンテナにマージンを適用するようにプラグインに指示できます。

1. $（window）.bind（ ’load’、function（）{
2. $（ "img"）。baselineAlign（{container： ’。popup’}）;
3. });

結論

良好な垂直リズムを維持することは、印刷物で定期的に使用される微妙ですが効果的なデザイン手法です。これで、基本原則を理解し、ベースラインとベースライングリッドの実用的な知識を持ち、CSSテキストレイアウトと印刷の制限のいくつかを理解しました。また、これらの制限を回避し、ドキュメントを好きな垂直リズムに合わせて作成する方法を知っています。また、破壊的な画像コンテンツを処理するのに役立つツールがあります。

CSSが成熟するにつれ、私たちは印刷のいとこに沿ってより多くの機能を取得し続けます。そのため、高品質のWebサイトを作成するには、タイプをよく理解することがより重要になります。タイプ全般について詳しく知りたい場合は、www.thinkingwithtype.comを強くお勧めします（それに合わせて本を購入することもできます）。型の扱いに関するCSSの記事を探している場合は、こことWebの他の場所の両方に多数の記事があります。また、MarkBoultonとElliotJay Stocksの最新情報に追いつくことをお勧めします。どちらも、特にWebデザインに関連するタイプについて頻繁に話します。

楽しむ！