WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

3カラムレイアウト

3カラムレイアウトを作る場合も基本的には2カラムレイアウトと考え方は一緒です。
まずは大きいカラムと小さいカラムを左右にフロートさせ、大きなカラムの中にさらに2つの箱を左右にフロートさせていく、という考え方です。

f:id:yachin29:20161008210041p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3カラムレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">#header</div>
<div id="wrapper">
<div id="content">
<div id="main">#main</div>
<div id="sub">#sub</div>
</div>
<div id="third">#third</div>
</div>
<div id="footer">#footer</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body {
  margin:0;
  padding:0;
}

/*レイアウト部分*/
#container {
  width:800px;
  margin:0 auto;
}
#header {
  width:800px;
  height:300px;
  background:#069;
}
#wrapper {
  overflow:hidden;
}
#content {
  width:600px;
  float:left;
  overflow:hidden;
}
#main {
  width:400px;
  height:400px;
  float:right;
  background:#C66;
}
#sub {
  width:200px;
  height:400px;
  float:left;
  background:#999;
}
#third {
  width:200px;
  height:400px;
  float:right;
  background:#99FF99;
}
#footer {
  width:800px;
  height:50px;
  background: #F93;
}

ナビゲーションボタンの作成

今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。

home.png
f:id:yachin29:20161007210802p:plain


home_h.png
f:id:yachin29:20161007210752p:plain


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションの作成</title>
<style>
html,body,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
a {
text-decoration:none;
color:#FFFFFF;
}
ul {
list-style:none;
}

/*レイアウト部分*/

ul {
width:800px;
height:50px;
overflow:hidden;
}
li {
width:200px;
height:50px;
float:left;

}
li a {
display:block;
text-align:center;
line-height:50px;
background: #06F;
border-right: 1px solid #000;
text-indent:100%; /*要素の外の右隣に移動させる*/
white-space:nowrap; /*改行を無効にする*/
overflow:hidden; /*はみ出した文字を隠す*/
}
li#home a {
background:url(img/home.png) no-repeat;
} 
li#food a {
background:url(img/food.png) no-repeat;
} 
li#access a {
background:url(img/access.png) no-repeat;
} 
li#info a {
background:url(img/info.png) no-repeat;
} 

li#home a:hover {
background:url(img/home_h.png) no-repeat;
} 
li#food a:hover {
background:url(img/food_h.png) no-repeat;
} 
li#access a:hover {
background:url(img/access_h.png) no-repeat;
} 
li#info a:hover {
background:url(img/info_h.png) no-repeat;
} 

li:last-child a {
border-right:none;
}

li a:hover {
background:#000033;
color:#EEE;
}
</style>
</head>

<body>
<ul>
<li id="home"><a href="#">home</a></li>
<li id="food"><a href="#">food</a></li>
<li id="access"><a href="#">access</a></li>
<li id="info"><a href="#">info</a></li>
</ul>
</body>
</html>

隠し文字

ナビゲーションを画像にする場合、気をつけたいのが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つの半角スペースとして表示し、ボックスの大きさが指定されている場合にも、自動的に改行されません。

Facebookページのフィード情報を取得する(JSON形式)

以前はFacebookが発信しているRSS/XML形式のfeed情報を取得し、比較的簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事が出来ましたが、Facebookのfeed配信の機能が2015年6月に仕様変更してしまい、現在はJSONJavaScript Object Notation)形式のフィード情報をGraph APIを使いデータを取得するという非常にややこしい仕様になってしまいました。
もちろん、Facebook側が用意している「Page Plugin」を使えば簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事は出来ますが、「Page Plugin」を使わずに今回のようにフィード情報を使うことで、

  • テキストデータで出力される為、Googleクローラーが認識しやすくなる。
  • テキストデータなのでCSSで自由に修飾が出来る。
  • 「Page Plugin」を使わない事でページの表示を早くする事が出来る。

等のメリットがあります。



JSONとは?

JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。



GraphAPIを使ってFacebookページの情報を取得

AppIDの取得

まずはhttps://developers.facebook.com/の「My Apps」から新しいアプリの登録をしてAppID等を取得します。
f:id:yachin29:20151015042235j:plain


トークンの取得

次にhttps://developers.facebook.com/tools/accesstoken/でトークンの取得を行います。
たんに投稿データを取得し、自身のサイトの表示させる場合はApp Tokenのみで大丈夫ですが、リンクや他の機能も使いたい場合はUser Tokenを使い「Access Token」を取得する必要があります。
「App Token」の場合、特に有効期限は有りませんが、「Access Token」の場合は最大でも有効期限が2ヶ月なので注意が必要です。


Access Token」の取得

次にGraph API Explorerhttps://developers.facebook.com/tools/explorer/
にアクセスして、Access Token」を取得します。
用途によって、先ほど取得したApp TokenもしくはUser TokenAccess Token」の枠の中に挿入し、その下の「/v2.3/」以降にページ名を入力してsubmitをクリックするとFacebookページの情報がJSONで表示されます。ここで表示されたJSONデータの中の「FacebookページID」が後ほど必要になります。

f:id:yachin29:20151021030715p:plain

HTMLで出力

今までの工程で取得した「Access Token」もしくは「App Token」と「FacebookページID」をURLに当てはめ、アクセスするとフィードがJSON形式で参照できます。

[https://graph.facebook.com/v2.3/【FacebookページID】/feed?access_token=【Access TokenもしくはApp Token】]


JSONJavaScriptベースで設計されてはいますが、PHPなど他の言語でもデータの引き渡しが出来るのが特徴です。
今回はjQuery「.getJSON」メソッドを使い必要なデータを引っ張って来て、liタグなどに生成し、CSSで適当に読みやすくすれば完了。

HTMLサンプルソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Facebookページのフィード情報を取得する(JSON形式)</title>
<style>
li {
  list-style: none;
  margin-bottom: 20px;
  width: 500px;
}
span {
  margin-right: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
 $.ajax({
 type: "GET",
 url: "https://graph.facebook.com/【FacebookページID】/feed?access_token=【Access TokenもしくはApp Token】",
 dataType: "json",
 success: function(json){
 json = json.data;
 var num = json.length;
 var Feed = "<ul>\n";
 for(var i=0; i<=4; i++){
 var time = parseISO8601(json[i].created_time);
 var text = json[i].message;
 var fblink = json[i].link;
 var fbphoto = json[i].picture;
 Feed += '<li><span>' + time + '</span>' +'<br>' + '<a href="' + fblink + '">' +text+ '</a>' +  '<p><img src="' +fbphoto+ '"></p>' + '</li>\n';
 }
 Feed += "</ul>\n";
 $("#topics").append(Feed);
 }
 });
});
function parseISO8601(str) {
 var date = str.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
 return date = date[1] + "年"+ date[2] + "月" + date[3] + "日";
}
</script>
</head>
<body>
<h1>Facebookページ フィード 表示</h1>
<div id="topics"></div>
</body>
</html>


今回のサンプルのように記事データと画像データを表示させる場合は「Access Token」が必要になります。上でも書いたように「Access Token」は有効期限が最大2ヶ月で、有効期限が過ぎるとフィード情報が表示されなくなってしまうので、最低でも2ヶ月に1度はサイトのメンテナンスが必要です。
それが無理な場合は「App Token」を使ってテキストデータのみを表示させるか、素直にFacebookが用意している「Page Plugin」を使いましょう。






参考サイト

nxpg.net


www.otwo.jp


news.7zz.jp

クリッピングマスクとレイヤーマスク

画像のマスク処理

f:id:yachin29:20151002001709j:plain
マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。



Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。


クリッピングマスク

f:id:yachin29:20151002002549j:plain

クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。

  • 切り抜きたいレイヤーが上
  • 切り抜きたい形が下のレイヤー

レイヤーマスク

選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。


f:id:yachin29:20151002010808p:plain



liginc.co.jp

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。

margin

marginとは要素の外側に出来る隙間の事です。

padding

paddingとは要素の内側に出来る隙間です。

言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。


marginとpaddingは共に4つの方向別に指定する事が出来ます。

margin-top
margin-bottom
margin-left
margin-right

padding-top
padding-bottom
padding-left
padding-right

また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。


border ・・・ ボーダーのスタイル・太さ・色を指定する

borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
borderは指定出来る事が多く、一度にすべてを覚えるのは大変です。最初はよく使用する物に限定して覚えて行きましょう。

borderの種類

solid=1本線で表示されます。
dashed=破線で表示されます。
dotted=点線で表示されます。

borderの幅

pxで指定

borderの色

文字色や背景色と同様、カラーコードやカラーネームで指定します。


borderもmarginとpadding同様ショートハンドでの指定が一般的なので、ショートハンドでの指定を覚えておきましょう。

h1 {
  border:solid 3px #FF0000;
}

f:id:yachin29:20160720132056g:plain


http://yachin29.com/photoshop2.zip

リセットCSSの概念

各ブラウザ(IEFireFoxChromesafariなど)は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。
元々持っているブラウザーのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザー間の表示誤差(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始める、という考え方です。


リセットCSSの記述

リセットCSSの記述方法は色々あり、絶対的な物があるわけでありません。ネット上から既存のリセットCSSをダウンロードして、使用する場合もありますが、まずは1個づつ意味をしっかりと理解し、慣れてきたら徐々に複雑な物を使用して行きましょう。


/* reset */
HTMLで使用しているセレクター名 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

ブラウザーのデフォルトスタイルではol、ul にそれぞれ黒丸と番号が付いてしまいます。
それらを消す場合は以下の記述をリセットCSSに追加しましょう。

ul, ol {
  list-style: none; /* マーカーを消す */
}

さらに以下の記述も追加しましょう。

a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img, input {
  vertical-align: bottom;
}

リセットCSSの例

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

font-familyの指定

f:id:yachin29:20160726001758p:plain


font-familyとは表示される文字フォントの指定です。
基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。
注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味したフォント指定を行いましょう。

游書体

f:id:yachin29:20160726002331g:plain


游書体はWindows 8.1以降のWindowsおよび、OS X Mavericks以降のMacにバンドルされている、比較的新しいフォントです。

ただ、実際に指定してみると、Macでは綺麗なのに、Windowsでは文字がかすれたように見えて非常に読みづらくなってしまいます。
Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」(「中」は、Windows10から搭載)。
そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまいます。
なので敢えて、「font-weight: 500;」の指定が必要になります。


ゴシック体での指定
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
明朝体での指定
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;


最新のブラウザーでは英語のみのフォント指定で大丈夫ですが、古いfirefoxでは英語での指定がNGなので日本語での指定も含めています。