サイトを効率よく制作するために外部ツールを使うことがあります。今回は、個人的によく使用するツールの使い方を紹介していきます。
教材
github からダウンロードしてください。
今回は各ツールごとの HTML/CSS をベースに制作してください。
参考データは sample.html として用意しています。
Web font
デザイン要素として、色にならんで重要視されるのが文字フォントです。
適切なフォントを選んで、サイトのイメージにあわせましょう。
その際に問題となるのが、表示する端末ごとに搭載されているフォントに違いがあるという点です。
font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;このように複数指定して対応する方法が一般的です。
Google Fonts
見栄えを統一する方法として、CSS3 よりフォントデータを Web から閲覧できるようになりました。
ここでは例として Google Fonts を使ってみましょう。
Web Font だけでなく、これまで同様にデバイスフォントの指定も忘れずに！
利用したいフォントを選んでみましょう。
+ ボタンで追加します。
右上の「View selected families」ボタンをクリックします。
HTML に Web font のコード読み込みをコピペします。
コードは CSS の読み込みより前にペーストします。(index.html)
スタイルシートにフォント指定をコピペします。
body タグのスタイルに適用してみましょう。(sytle.css)
body {
[Google Fonts の指定をコピペ]
}HTML に何かタグを指定して、フォントが適用されるか確認してみましょう。(index.html)
Noto Sans, Noto Serif をよく使っている印象です。
Web Font はダウンロードに時間がかかるため、複数同時に読み込まないようにしましょう。(特に日本語フォント)
Font Awesome
アイコンフォントを配布している Web サービスです。
SNS のアイコンなどサイト制作でよく使うものが用意されています。
どのようなアイコンフォントが使用できるか探してみましょう。
会員登録して利用しても良いですし、今回は手続きを省略して CDN を利用します。(無料版も商用利用可能)
読み込み用のコードをコピーして、<head> タグ内に追記します。(index.html)
使いたいアイコンの HTML をコピペします。
アイコンが表示されるか確認してみましょう。(index.html)
フォントとして読み込まれているので、スタイル指定が可能です。
先ほどのフォントにサイズやカラーなどのスタイルを指定してみましょう。(適宜アイコンをタグで囲んでください)
IcoMoon
font awesome だとたくさんのアイコンを読み込んでしまうので、必要なものだけ使いたいときに便利なサービスです。
「Generate Font」ボタンを押し、その後ダウンロードします。
ダウンロードしたデータの中にある fonts フォルダを自分の環境にコピーします。
style.css もそのまま使用しても良いですし、自分のスタイルートに内容をコピーしても構いません。
(コピーする場合は、fonts へのパスを通してください)
HTML にはダウンロードしたフォント名と対応したクラス名を指定します。
<span class="icon-chrome"></span>
<span class="icon-safari"></span>
<span class="icon-firefox"></span>
<span class="icon-edge"></span>好きなアイコンを選んで表示できるか確認してみましょう。こらもフォントとしてスタイル指定が可能です。
オリジナルの SVG も使えるので、時間があるときにでも試してみてください！
CSS Gradient
CSS Gradient を利用して直感的にグラデーションをつくってみましょう。
Drag & Drop でグラデーションをつくります。
自分のスタイルシートにコードをコピペします。
試しに <body> タグの背景色として指定してみましょう。
body {
// ここに実際のコードをコピペします
}グラデーションの角度も指定できるので、試してみましょう。
Patternify
画像にテキストを載せる場合、色が干渉してみにくくなる場合があります。黒背景を敷いて半透明にすることが多いですが、Patternify を使ってドットパターンを使用することがあります。
どんなサイトにも使えるというものではありませんので、参考までに。
例としてメインビジュアルにタイトルを載せるようなレイアウトを想定します。(index.html)
<header>
<div class="background">
<img src="image/background.jpg">
</div>
<h1>タイトル</h1>
</header>
<main>
<p>
本文
</p>
</main>まずは背景画像にタイトルを載せるだけの CSS を記述します。(今回は本筋ではないので index.css に記述済みです)
body {
margin: 0;
}
header {
height: 40vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
header .background {
background-image: url(../image/background.jpg);
width: 100%;
position: absolute;
}
header h1 {
position: absolute;
color: #FFF;
}
main {
padding: 1.5rem 2.4rem;
}
base64 code をコピーして、背景画像として設定します。
header {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAABlJREFUGFdjZGBg+M+ABTBiEwSJgSRorQMAIZIDBL2ldyAAAAAASUVORK5CYII=) repeat;
background-color: #BBB;
}背景色もグレーで指定して、白くなりすぎないようにします
メインビジュアルの opacity を調整することで、指定した背景のパターンが透けて見えるようになります。
header .background {
opacity: 0.5;
}ちょっとマイナーなツールもありましたが、いずれも仕事で使ったことがあるものを紹介してみました。これからも新しいサービスが次々と出てくると思うので、便利そうなものは取り入れてみてください。