ホームページ > 記事 > ウェブフロントエンド > Web ページのスタイルをすばやく試す
たとえば、Web サイト上の製品、ポートフォリオ、または単なるインスピレーションを共有したいとします。オンラインに投稿する前に、魅力的でプロフェッショナルに見えるか、少なくともそう見えるようにする必要があります。それで、次に何をしますか? 当たり前のことのように思えるかもしれませんが、コンテンツは Web サイトの主要な要素であり、公開後に後から調整するべきではありません。
長いテキストは解析が難しく、したがって読みにくくなります。 1 行あたりの文字数制限を設定すると、大量のテキストの読みやすさと魅力が大幅に向上します。 body { margin: 0 auto; max-width: 50em; } テキストコンテナにスタイルを追加した後、テキスト自体にスタイルを追加してみてはいかがでしょうか?
ブラウザのフォントはTimes は、魅力的に見えない可能性があります (主に「スタイルのない」フォントであるため)。 Helvetica や Arial などのサンセリフ フォントに切り替えると、Web ページの読みやすさが大幅に向上します。 テキストをより魅力的にするときは、それをより読みやすくする必要もあります。ユーザーがページが壊れていると感じる場合、それは通常、スペースの問題です。テキストの周囲およびテキスト内に適切なスペースを設けることで、ページの魅力を高めることができます。 body { line-height: 1.5; padding: 4em 1em; } h2 { margin-top: 1em; padding-top: 1em; } これまでレイアウトは大幅に改善されましたが、さらに詳細をいくつか追加してみましょう。
色とコントラスト 白の背景に黒の文字は、より目を引くように見えます。ページを読みやすくするために、テキストには柔らかい黒を選択してください。
バランス ページのバランスを整えるには、いくつかの追加調整が必要です: 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 サイトの他の関連記事を参照してください。