Web ページのスタイルをすばやく試す

たとえば、Web サイト上の製品、ポートフォリオ、または単なるインスピレーションを共有したいとします。オンラインに投稿する前に、魅力的でプロフェッショナルに見えるか、少なくともそう見えるようにする必要があります。それで、次に何をしますか?

当たり前のことのように思えるかもしれませんが、コンテンツは Web サイトの主要な要素であり、公開後に後から調整するべきではありません。

あなたが今読んでいる記事のような、書かれたコンテンツがウェブページの 90% 以上を占めます。このテキスト コンテンツにスタイルを追加すると、非常に効果的です。

公開したいコンテンツが完成し、空の style.css ファイルを作成したと仮定します。

中央揃え

長いテキストは解析が難しく、したがって読みにくくなります。 1 行あたりの文字数制限を設定すると、大量のテキストの読みやすさと魅力が大幅に向上します。

body {
  margin: 0 auto;
  max-width: 50em;
}

テキストコンテナにスタイルを追加した後、テキスト自体にスタイルを追加してみてはいかがでしょうか?

フォント

ブラウザのフォントはTimes は、魅力的に見えない可能性があります (主に「スタイルのない」フォントであるため)。 Helvetica や Arial などのサンセリフ フォントに切り替えると、Web ページの読みやすさが大幅に向上します。

body {
  font-family: "Helvetica", "Arial", sans-serif;
}

どうしてもセリフ フォントを使いたい場合は、Georgia を試してみてください。

テキストをより魅力的にするときは、それをより読みやすくする必要もあります。ユーザーがページが壊れていると感じる場合、それは通常、スペースの問題です。テキストの周囲およびテキスト内に適切なスペースを設けることで、ページの魅力を高めることができます。

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

これまでレイアウトは大幅に改善されましたが、さらに詳細をいくつか追加してみましょう。

色とコントラスト

白の背景に黒の文字は、より目を引くように見えます。ページを読みやすくするために、テキストには柔らかい黒を選択してください。

body {
  color: #555;
}

良好なコントラストを維持するために、重要なテキストには暗い色合いを選択しましょう。

h1,
h2,
strong {
  color: #333;
}

ページの大部分は視覚的に改善されましたが、コード スニペットなど、一部の要素はまだ場違いに見えます。

バランス

ページのバランスを整えるには、いくつかの追加調整が必要です:

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

ページをスタンドにしたいより個人的なものにするために。ほとんどのブランドには、視覚的なトーンとして機能するメインカラーがあります。 Web ページでは、この主要な色を使用して、リンクなどのインタラクティブな要素を強調できます。

a {
  color: #e81c4f;
}

しかし、バランス/調整を維持するには、追加の色も必要です。

二次色

メインカラーは、境界線、背景、さらには本文に使用される、より微妙な色合いで補完できます。

body {
  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

色調も変えたし、形やフォントも変えてみてはいかがでしょうか...

　　自定义字体

　　由于文本是网页的主要内容，使用自定义字体能使页面更加引人注目。

　　当你可以嵌入自己的网页字体或使用类似Typekit的在线服务时，让我们使用免费谷歌字体Roboto：

　　@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

　　在通过自定义字体凸显你的个性后，增加一千个单词又怎么办呢?

　　图形和图标既可用来作为支持你的内容的装饰品，还可以在你想要传达的信息中担当积极部分。

　　让我们从Unsplash挑选一张漂亮的背景图片来美化header。

  header {
  background-color: #263d36;
  background-image: url("header.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 10vw 2em;
  text-align: center;
}

　　添加logo

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

　　让我们借这个机会，来提高文本风格。

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 300;
}

header a {
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: white;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
}

header a:hover {
  background:  #e81c4f;
  color: white;
}

　　按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。只剩下最后一件事啦...

以上がWeb ページのスタイルをすばやく試すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。