webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

Google Fonts の使い方

f:id:yachin29:20180313131112p:plain



Webフォントとは?


元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォントのメリット
ユーザーの環境に依存せず、意図したデザインで表示できる。
フォントデータはベクター形式の為、様々な解像度に対応出来る。
テキストデータの為、Googleクローラーが認識しやすくなる。
などが上げられます。


Webフォントのデメリット
読み込みに時間がかかる。特に日本語の場合は注意が必要。
Webフォントには主に2種類の使い方がある
GoogleFontsのようなネット上にあるWebフォントサービスを使う方法と、自身の持っているフォントデータをhtmlファイル等と一緒にアップロードし、表示させる方法があります。

Google Fonts


fonts.google.com



GoogleFontsの使い方は非常に簡単で
1、まずは使いたいFontを選び、「Quick Use」ボタンを押す。
2、使用したいFont-weightやFont-styleにチェックを入れる

3、出力されたソースをHTMLに挿入する

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>


複数のフォントを使用する場合、フォント名とフォント名の間に|を入れましょう。

<link href='https://fonts.googleapis.com/css?family=Bangers|Ubuntu' rel='stylesheet'>

4、WebFontを使用したいタグにCSSで「font-family」を指定する。

font-family: 'Open Sans', sans-serif;


日本語のGoogle Fonts もありますが、まだテスト段階なので、使用するには注意が必要です。

googlefonts.github.io

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain






最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
http://racines-park.com/



ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2017年1月現在)
f:id:yachin29:20170512100245p:plain

画面のアスペクト比も、以前の「4 : 3」のスクエア型から「16:9」と「16:10」といったワイド型が大半を占めているのが解ります。
f:id:yachin29:20170512112150p:plain




さらにフルスクリーンのように大きなサイズの画像をwebで使う時は必ず下記のようなサービスを使ってデータを軽くし、ユーザビリティーの向上に努めましょう。
tinypng.com




background-sizeプロパティの指定方法

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。


「contain」

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

「cover」

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する


background-sizeプロパティは、スマホサイト制作でよく使用されるプロパティなので、各値の違いをしっかり覚えて使えるようにしていきましょう。

フロートを使ったレイアウト

f:id:yachin29:20160930111042j:plain


divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。
f:id:yachin29:20160211021709j:plain


しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。
f:id:yachin29:20160211021723j:plain


floatを使う事でHTML内の文章構造を変える事なく比較的自由なレイアウトが作れるようになります。
なのでfloatの特性をしっかり理解し、文章構造を変える事なく色々なレイアウトを作ってみましょう。

floatの注意点

floatは非常に便利な反面、しっかりと特性を理解しないとレイアウトの崩れの原因にもなります。
floatを指定した要素は浮き上がるので、その下の要素に影響が出てしまいます。なので、それを予防する為の方法もしっかりと覚えましょう。また、floatしたもの同士はマージンの相殺が起きず加算されてしまうので、そこも注意が必要です。

floatを使う際に注意するべき2点
  • 下の要素に影響が出ないように回り込みを解除する(overflow、もしくはclear)
  • floatしたもの同士はマージンの相殺が起きず加算されてしまう

2カラムレイアウト

2カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。

隠し文字の設定

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。

ここで絶対にやってはいけなのが画像の文字を見せる為にliに記述している文字を消すという行為です。表示的にはダブっている文字が消えて綺麗に見えますが、文章構造上liの中身が空という事になってしまうので、絶対にNG


文章構造上liの中身は必須なので、CSSの方で文字を見えなくさせる記述をします。
方法はいくつかあります。以前は「text-indent: -999em;」と指定し、ものすごく左の方に文字を移動させる、という方法もありましたが、
現在最も使われている方法は、文字を右にずらし見えなくさせるという方法です。

右にずらす方法

#nav li a {
  display: block;
  width: ボタン幅;
  height: ボタン高さ;
  background: url(背景画像のパス) no-repeat;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
「 nowrap」はソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、ボックスの大きさが指定されている場合にも、自動的に改行されません。