Hamster Frameworkを使用したレスポンシブでレスポンシブなタイポグラフィ。 手術や痛みを伴わないHeの治療

現代のインターネットは途方もないペースで発展しており、ユーザーの数は毎日増加しています。 わずか10年前に平均的なユーザーがほぼ「同じ」で、一部のパラメーターがわずかに異なっていた場合、この違いはより顕著で顕著になります。 この違いは、デバイスと画面サイズの違いで特に顕著です。 毎日のトラフィックには、最小から最大までさまざまな画面解像度を持つ非常に多くのユーザーがいます。 最適化が不十分なサイトでは、ユーザーがサイトで費やす時間が少なくなります。 したがって、あらゆるデバイスと解像度でサイトを快適に認識できるようにサイトを最適化することは非常に重要です。 実践が示すように、ほとんどのサイトはさまざまなデバイスに非常に不十分に適応しており、多くの典型的な問題があります。 これらの問題はすべて、いくつかの大規模なサイトの例に関する記事の冒頭で検討されます。 そして、例としてハムスターフレームワークのドキュメントを使用して、適応性のあるレスポンシブなタイポグラフィの練習とページの作成を開始します。

このトピックに興味があるなら、猫へようこそ。

考慮される問題は著者の意見であり、この意見はこれらのサイトのユーザーまたは作成者と異なる場合があります。 著者は、これらのサイトの評判を傷つけたり、名誉、尊厳、ビジネスの評判を傷つけたりすることを目指していません。 これらの例は、開発者がサイトを改善し、エンドユーザーにより近づけて、視聴者を拡大できるようにするために提供されています。 また、著者によると、最適化のヒントとサイトの例は、不十分に最適化されていません。 客観性のために、最小限の交差点を持つさまざまな被験者のサイトの例を選択しました。

以下は、当社が協力するサイトのスクリーンショットです。 最初の2つのスクリーンショットは4kモニターで撮影されました。

サイトのデスクトップバージョン

画面1

画面2

画面3

サイトのモバイル版

画面4

問題

• ご覧のように、多くのサイトは一般に高画面解像度向けに最適化されておらず、通常、最適化は1920ピクセルの上限で終了します。 メインコンテンツとは別に存在するブロックは黄色で強調表示されます。

  
  
• 画面スペースの合理的な使用ではない-ボイドが多すぎる。 青で強調表示されます。 4kの解像度で表示されるだけでなく、低い解像度でも表示されますが、程度は低くなります。

ヒント：サイトのプロトタイプを作成する場合、画面を4つの等しい部分に分割し、メインコンテンツ用に中央の2つまたは3つの部分を選択する必要があります。 サイトのメインコンテンツが記事の場合、中央ブロックは画面の2/4-3/4を占める必要があります。 記事の各行には、45〜70文字のテキストを含める必要があります。さらに収まる場合は、特定の画面サイズのフォントサイズを増やす必要があります。 テキストが2次ブロックにある場合、最適な文字数は35〜55です。 これらの値は天井から取られたものではなく、長時間にわたるタイポグラフィの開発と改善の結果として経験的に発見された値です。 基礎は、これが、頭を回したり、読書時に不快感を生じさせることなく、画面を走り回ることができる目の最適な距離であるということでした。 下の写真で最も重い目の動きを視覚的に示しました。 対角線が大きいほど、目を次の行に移動するのが難しくなります。 これについては、専門文献で詳しく説明されています。

• スクリーンの端への付着。 メインコンテンツは、左右ではなく、ちょうど中央にある必要があります。 端ではなく中央で読むのが便利です。 辺りを読むと不快感が生じ、コンテンツの読み取り時間が長くなります。 レスポンシブデザインのサイトでは非常に一般的な問題-彼らはそれを完了しませんでした。

  
  
• メインコンテンツの小さいフォントサイズ。 （同じ問題は、2番目のコンテンツのフォントサイズが大きい（3番目のスクリーンショットで黄色で強調表示されている）が、メインのコンテンツは小さいことに起因する可能性があります。） たとえば、13pxタイプのフォントサイズを見つけることができます。 たとえば、このようなテキストは、デスクトップモニターでは1920ピクセル、タブレットでは800ピクセルの画面幅で読むのに特に快適ではありません。 また、サイドバーでは、コンテンツのサイズがメインコンテンツのブロックよりも大きいことがわかります。

ヒント：サイトの対象ユーザーをハイライトします。 ユーザーが使用するメインコンテンツを決定します。さまざまな分析ツールがこれに役立ちます（たとえば、検索エンジンからのユーザーからの一般的なクエリ）。 メインコンテンツは緑色で強調表示されています。 ルールは1つだけです。メインコンテンツのブロックとフォントサイズは大きく、セカンダリコンテンツのサイズはメインコンテンツのサイズ以下です。 場所に太字のテキストを追加できます。 （コンテンツを重視する方法は2つしかありません：大きいサイズ、イタリック体（デザインのデザイン）、太字（インターフェイスの場合はマスサイズ）、ハイライト）

ヒント2：理想的には、適切なフォントサイズを見つけるには異なるデバイスが必要です。 ただし、Firefoxではctrl + mキーボードショートカットを使用できます。 クロムでは、 ctrl + shift + i 、次にctrl + mです。 ブラウザは、サイトの適応性を確認するためのツールキットを開きます。 画面のサイズをゆっくりと変更し、サイトで発生する変更を観察します。 サイトのデスクトップバージョンの場合、画面からの最適な距離は〜75cm、タブレットの場合は伸ばした腕の距離、スマートフォンの場合は距離は伸ばした腕の約半分です。 この距離で、フォントサイズが選択されます！ サイズは、この距離でサイトのすべての表示コンテンツを読みやすいように選択する必要があります。

• サイトのモバイルバージョン（4つのスクリーンショット）には、副次的なコンテンツを含むサイドバーがあります。 サイドバーは、デスクトップバージョンのサイトの3番目のスクリーンショットにも表示されます。

小さなフォントサイズでより多くのブロックを詰め込もうとしないでください。 設計は、明確で理解可能な構造を備えたシンプルなものでなければなりません。 問題は明るい赤で強調表示されます。
この場合、赤いブロックを水平方向に再配置し、あるブロックの後に挿入する必要があります。 サイトのモバイル版では、サイドバーを削除することをお勧めします。 また、緑色で強調表示されているメインコンテンツについては、フォントサイズを大きくする必要があります。 4番目のサイトでは、モバイルバージョンのサイトのフォントは画面幅800ピクセルに対して非常に小さくなっています。 このサイズは、多くのサイトの中で最小です。 私の意見では、このサイズは320〜480ピクセルの画面幅に最適です。

比較的最適化されたサイト：

• https://www.smashingmagazine.com/
• https://css-tricks.com/ （右端への貼り付けに問題があります）
• https://russian.rt.com/

RTでは、サイトのモバイルバージョンに注目する価値があります。これは最高の1つです。 残念ながら、これらのサイトはまだ4k解像度にあまり適していません。 覚えておくべき主なことは、特に視力が低下する日の終わりに、サイトはどんなデバイスでも快適に読むことができるということです。

読者は次のように言うことができます。-「それだけです。問題はわかっています。すぐに修正します。」 急いではいけないと答えることができます。 そして、以下では、知覚の心理的特徴の1つを説明します。 私は彼女を悪い習慣と呼びます。

悪い癖

人がトウモロコシをこすって不快感を引き起こす靴を2年間履いた場合、人は習慣を身に付けます。 今、あなたが彼に快適で良い靴を与えたら、彼は単に答えます：-「どんなひどい、不快な靴を私にくれましたか？私に返してください!!!」。 これは、彼らがこの習慣に非常に執着しているという事実のためであり、彼らがこの習慣を繰り返す機会を急激に奪われた場合、彼らは自分自身の一部を失ったかのように不快に感じます。 たとえば、特定の問題を迅速に解決する方法はありますが、この理由から、心理療法は特にいくつかのセッションで作業を伸ばします。 特に才能がある私は、この痛みを取り戻し、より良い生活を完全に放棄するためにあらゆる努力をすることができます。 同じ理由で、サイトの新しいバージョンを展開するすべての試みは、多くの場合、不満を持つユーザーによって満たされます。サイトが非常に大きい場合、まだ誇大広告があります。 そしてこの時点で、「新しいサイトのデザインが好きですか？」という種類のアンケートを行うべきではありません。 答えは単なる指標ではありません。 そして、ユーザーの不満のために、間違いを犯しやすくなります-古いバージョンのサイトを返すことです。

ユーザーが新しいデザインに徐々に慣れていくように、すべての変更をゆっくり行うことをお勧めします。

さて、理論で私たちは完了し、最も甘いもの-練習を始めることができます。

実用部

ページのレイアウト： Hamster framework documentation

また、ドキュメントには、慣れるのに役立つ追加の理論的な資料があります。 また、記事で何かが明確でない場合は、ドキュメントで多くのことが説明されています。

ここで利用可能なソースコード： Github

ハムスターフレームワークの動作を説明するだけの場合、これはマクロと関数の言語であり、後で簡単にcssコードと任意の測定単位に変換できます。 そして、プリプロセッサと比較して最も重要なプラスは、CSSの可読性が最大であり、どのプロパティを使用するか、そしてコンパクトでシンプルな構文を知っていることです。

まず、node.jsがインストールされていない場合は、 https： //nodejs.org/en/からダウンロードしてインストールする必要があります。

プロジェクトの作業ディレクトリを作成します。 コンソールを起動し、次のコマンドを使用して作業ディレクトリに移動します。

cd  

新しいプロジェクトを作成します。

 npm init 

必要なnpm拡張機能をインストールします。

 npm install gulp gulp-sourcemaps gulp-postcss@6.4.0 precss postcss-hamster --save-dev 

gulp-postcss@6.4.0-このバージョンをインストールする必要があります。公開時に最新バージョンにバグがあり、 インポートが正しく機能しなかったためです。

ディレクトリにgulpfile.jsを作成します-これはプロジェクトで実行するメインファイルです。

 var gulp = require("gulp"), sourcemaps = require("gulp-sourcemaps"), postcssgulp = require("gulp-postcss"), precss = require("precss"), hamster = require("postcss-hamster"); gulp.task("css", function () { var processors = [precss({ "lookup": false }), hamster]; return gulp.src("./src/style.css") .pipe(sourcemaps.init()) .pipe(postcssgulp(processors)) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("./css")); }); gulp.task("default", ["css"]); 

次に、srcディレクトリにbase.cssファイルを作成します

 /*@normalize;*/ @reset; @box-sizing-reset; nav { user-select:none; } body { font-family: @font-family; color: @font-color; background-color: #dee6ea; font-weight: @font-weight; height: 100%; position: relative; } @ruler; 

@reset -Eric Meyerの「Reset CSS」2.0を作成します
@ normalize-ノーマライズを書き込みます。
好きなものを選択してください。

@ box-sizing-reset-ボックスサイズのリセットを行います。 それが何であり、なぜそれが必要なのかわからない場合は、次のリンクをご覧ください ： https : //css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

@ruler-垂直リズムをデバッグするためのグリッドを追加します。

@で始まる残りのキーワードは定数であり、varibales.cssファイルで定義します。 また、ハムスターフレームワークの基本設定も含まれています。 すべてのハムスターフレームワーク設定は、 @ hamster {}ブロックに含まれています-これらはグローバル設定です。 @ihamster {}はローカル設定です。 @hamster end; ローカル設定をリセットし、グローバルを返します。 必要なものについては、ドキュメントを読むことができます。 また、ドキュメントではすべてのパラメーターについて説明しています。

私たちにとって最も重要なのは：

font-size-基本フォントサイズ。通常は、デフォルトでp要素と多くの小文字要素に設定されます。
line-height-行間隔-垂直リズム。
font- ratio-モジュラースケールの係数。

フォントサイズのモジュラースケールに基づいて生成されたアルファベットのエイリアスを使用します。

 @hamster { /* Base Font settings */ --font-size: 16px; /* line height in pixels like 24px or relative value like 1.5 without em, rem! */ --line-height: 1.35; --font-ratio: 1.2; --remove-comments: true; /* Vertical Rhythm settings */ --unit: rem; --px-fallback: true; --rem-fallback: false; --properties: extend; --ruler-style: switch ruler-debug; --ruler-color: rgba(2, 179, 228, .7); --ruler-icon-colors: #fff #02b3e4; --ruler-icon-position: "position:fixed;top: spacing(1.125);left: spacing(.625);"; --ruler-icon-size: spacing(.75); --ruler-pattern: 1 0 0 0; --ruler-scale: 4; --ruler-thickness: 1; --round-to-nearest-half-line: false; --min-line-padding: 1px; /* Custom Typography constants */ --font-weight: 400; --font-color: #304458; --header-color: #02b3e4; --sheader-color: #DA083D; --background-color: #f5f5f5; --block-color: #F2FBFF; --hover-color: #1bba13; --footer-color: #1C2733; --wrapper-background: #fff; --code-color: #faf9fa; --font-family: Roboto, "Open Sans", "PT Sans", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Arial, sans-serif; } 

次に、typography.cssファイルを作成します。これは、テキスト要素のメインスタイルが保存されるメインファイルです。 fs xxlは、xxlという名前のテキストエイリアスの代わりにフォントサイズを書き込みます。 ハムスターフレームワークのドキュメントで説明されているように、独自のエイリアスを作成できます。

定義済みのエイリアス。 数値が大きいほど、フォントサイズが大きくなります。

 Alias Short Alias Size tiny t -2 small s -1 base b 0 medium m 1 large l 2 xlarge xl 3 xxlarge xxl 4 xxxlarge xxxl 5 

スペース（）関数は、パラメーターで渡された数値に行の高さを乗算し、受信したサイズを返します。 すべての測定単位について、計算は自動的に行われます。 ハムスターフレームワークには、計算用の関数がいくつかありますが、これが最も一般的です。 このリンクで機能の完全なリストを見つけることができます。

adjust-font-size ：-フォントサイズについては、font-sizeプロパティを記述し、行間隔を計算します。 サイズは、px、em、remで設定できます。

 %strong { font-weight: 500; } %hlight { color: @sheader-color; } h1 { text-align: center; font-weight: 600; adjust-font-size: fs xxl; color: #fff; margin-top: spacing(1); margin-bottom: spacing(1); } h2 { @extend %strong; color: @header-color; adjust-font-size: fs xl; margin-top: spacing(2); margin-bottom: spacing(1); padding-left: spacing(1); padding-right: spacing(1); border-left: spacing(.2) solid @header-color; background: @code-color; } h3 { @extend %hlight; adjust-font-size: fs l; margin-top: spacing(2); margin-bottom: spacing(1); } h4 { @extend %hlight; adjust-font-size: fs m; margin-top: spacing(1); } h5 { @extend %hlight; adjust-font-size: fs b; margin-top: spacing(1); } h6 { @extend %hlight; adjust-font-size: fs s; margin-top: spacing(1); } strong { @extend %strong; } p { adjust-font-size: fs b; @hyphens; margin-bottom: spacing(1); } a { color: @header-color; &:hover { color: @font-color; } } ul, ol { adjust-font-size: fs b; list-style-position: inside; margin-bottom: spacing(1); } ul { list-style: disc inside; } ol { list-style: decimal inside; } ul a, ol a { text-decoration: none; } code, pre { font-family: "Roboto Mono", Inconsolata, monospace; margin: 0; padding: 0; text-align: left; tab-size: 4; hyphens: none; @forcewrap; } 

メインのstyle.cssファイルを作成し、残りのファイルをその中に含めます。

 @import "variables.css"; @import "base.css"; @import "typography.css"; 

これで、コンソールに安全に入力できます。

 gulp 

cssディレクトリの出力で、スタイルを含むstyle.cssファイルを取得します。 （単位は任意です。私たちはrem設定で選択しました。）

 h1 { text-align: center; font-weight: 600; font-size: 2.0736rem; line-height: 2.7rem; color: #fff; margin-top: 1.35rem; margin-bottom: 1.35rem; } h2 { color: #02b3e4; font-size: 1.728rem; line-height: 2.7rem; margin-top: 2.7rem; margin-bottom: 1.35rem; padding-left: 1.35rem; padding-right: 1.35rem; border-left: 0.27rem solid #02b3e4; background: #faf9fa; } h3 { font-size: 1.44rem; line-height: 2.7rem; margin-top: 2.7rem; margin-bottom: 1.35rem; } ... 

しかし、1つは大きな迷惑ではありません-すべてのスタイルは16pxの基本サイズ用に生成されました。 そして、私たちのCSSは適応性も応答性もまったくありません。 メディアクエリを介してこの状況を修正し、画面サイズごとに異なるサイズを生成します。 複製するCSSコードは、 @ copyマクロを使用して「full」という名前の変数にコピーされます。任意の変数名を指定できます。 次に、パラメーターで変数名を指定し、 @ pasteマクロを使用してこのCSSコードを挿入します。 開始するには、ブラウザがメディアクエリをサポートしていない場合、16個のフォントサイズのフォールバックのように挿入します。 メディアクエリは、すべてのブラウザの約98％をサポートしています。 そして、style.cssファイルのcssは以下のようになります。

 @import "variables.css"; @import "base.css"; @copy full { @import "typography.css"; } @paste full; @media screen and (max-width: 479px) { @ihamster { --font-size: 14px; --line-height: 1.25; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 480px) and (max-width: 599px) { @ihamster { --font-size: 15px; --line-height: 1.3; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 800px) and (max-width: 1279px) { @ihamster { --font-size: 18px; --line-height: 1.4; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 1280px) and (max-width: 1599px) { @ihamster { --font-size: 19px; --line-height: 1.5; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 1600px) and (max-width: 1919px){ @ihamster { --font-size: 20px; --line-height: 1.55; } @baseline html; @ruler; @paste full; @hamster end; } 

以下を開始します。

 gulp 

出力では、さまざまな画面サイズに合わせて文字体裁を調整します。 本当にそんなに単純じゃないですか？ これらの操作中に心配しないでください、サイズのすべての割合が保存されます！ すべてのサイズは、基本サイズを基準として計算されます！ たとえば、adjust-font-size：1.5remと書くと、フレームワーク自体が、設定で単位として指定された目的の測定単位のサイズを計算します。

実験的に手動で寸法を選択するのは少し不便です。 しかし、私はさらに進んで、ブラウザの表示領域のサイズに基づいて垂直リズムを自動的に計算する世界初の機器を作りました。

これがどのように機能するかは、 記事に記載されています 。

ここで、style.cssは次の形式を取ります。

 @import "variables.css"; @import "base.css"; @copy full { @import "typography.css"; } @paste full; @media screen and (max-width: 799px) { @ihamster { --font-size: 14px; --line-height: 1.25; --to-font-size: 18px; --to-line-height: 1.4; --viewport: 320px 800px; --unit: vw; } @ruler; @paste full; @hamster end; } @media screen and (min-width: 800px) and (max-width: 1919px){ @ihamster { --font-size: 18px; --line-height: 1.4; --to-font-size: 21px; --to-line-height: 1.5; --viewport: 800px 1920px; --unit: vw; } @ruler; @paste full; @hamster end; } @media screen and (min-width: 1920px){ @ihamster { --font-size: 21px; --line-height: 1.5; --to-font-size: 42px; --to-line-height: 1.6; --viewport: 1920px 3840px; --unit: vw; } @ruler; @paste full; @hamster end; } 

 --font-size: 21px; //   ,     1920px --line-height: 1.5; //   ,     1920px --to-font-size: 42px; //   ,     3840px --to-line-height: 1.6; //   ,     3840px --viewport: 1920px 3840px; //      ,        . --unit: vw; //    vw +    calc 

以下を開始します。

 gulp 

ご覧のとおり、cssコードによりメディアクエリの数が減り、出力ファイルのサイズが小さくなりました。

 @media screen and (max-width: 799px) { h1 { text-align: center; font-weight: 600; font-size: calc(1.728vw + 23.5008px); line-height: calc(3.2083vw + 24.7333px); color: #fff; margin-top: calc(1.6042vw + 12.3667px); margin-bottom: calc(1.6042vw + 12.3667px); } h2 { color: #02b3e4; font-size: calc(1.44vw + 19.584px); line-height: calc(3.2083vw + 24.7333px); margin-top: calc(3.2083vw + 24.7333px); margin-bottom: calc(1.6042vw + 12.3667px); padding-left: calc(1.6042vw + 12.3667px); padding-right: calc(1.6042vw + 12.3667px); border-left: calc(0.3208vw + 2.4733px) solid #02b3e4; background: #faf9fa; } h3 { font-size: calc(1.2vw + 16.32px); line-height: calc(3.2083vw + 24.7333px); margin-top: calc(3.2083vw + 24.7333px); margin-bottom: calc(1.6042vw + 12.3667px); } ... } @media screen and (min-width: 800px) and (max-width: 1919px){ h1 { text-align: center; font-weight: 600; font-size: calc(0.5554vw + 32.8814px); line-height: calc(1.125vw + 41.4px); color: #fff; margin-top: calc(0.5625vw + 20.7px); margin-bottom: calc(0.5625vw + 20.7px); } h2 { color: #02b3e4; font-size: calc(0.4629vw + 27.4011px); line-height: calc(1.125vw + 41.4px); margin-top: calc(1.125vw + 41.4px); margin-bottom: calc(0.5625vw + 20.7px); padding-left: calc(0.5625vw + 20.7px); padding-right: calc(0.5625vw + 20.7px); border-left: calc(0.1125vw + 4.14px) solid #02b3e4; background: #faf9fa; } h3 { font-size: calc(0.3857vw + 22.8343px); line-height: calc(1.125vw + 41.4px); margin-top: calc(1.125vw + 41.4px); margin-bottom: calc(0.5625vw + 20.7px); } .... } ... 

残念ながら、 vw + calcはブラウザの〜94％のみをサポートし、さらにブラウザの計算にオーバーヘッドがあります。 しかし、これを超えて、現代のブラウザの将来はvwで安全にサイジングできます。

PS。 一部の画面サイズでは、ドキュメントサイトのコンテンツが垂直リズムグリッドに対してわずかに変動することに気づいたかもしれません。これは、サブピクセルレンダリングテクノロジーとすべてのブラウザーが異なる方法で実装し、値を異なる方法で丸めているためです。 これは、calcの値で特に顕著です。 https://johnresig.com/blog/sub-pixel-problems-in-css/

プロジェクトアセンブリを200ミリ秒まで高速化する場合は、cssnext postcssモジュールを無効にして（プロジェクトに接続する場合）、autoprefixerを個別に接続することをお勧めします。 cssnextの実践が示しているように、プロジェクトのビルド速度が少なくとも5倍向上します。

まとめると。 ご覧のとおり、すべてが非常に簡単でシンプルであり、最小限のコストで大量の類似したcssコードを生成できます。 機能はタイポグラフィの生成に限定されません。 ボタン、サイドバーのサイズなど、さまざまな要素の適応サイズを生成できます。 ここに例を見つけることができます。

あなたはすべての申し出と願いをギターで表現できます。 また、プロジェクトの開発と開発に参加することもできます。

サポート/トーク： Gitter
ドキュメント： RU

誰にとっても簡単なレイアウトと成功したプロジェクト！

よろしく、ハムスターフレームワーク開発者