読者です 読者をやめる 読者になる 読者になる

webサイト制作の勉強@迅

webサイト制作の基本やホームページ制作を学ぶ、webサイト制作の勉強@迅。webサイト制作に必要なイラストレーター|フォトショップ|Dreamweaver|HTML5|CSS3|javascript|jQuery|の基本を紹介しています。

.htaccessを使ったレスポンシブ対応

.htaccessを使ったレスポンシブ対応

今回は.htaccessファイルというものを使って、アクセスされたデバイスによって、見せるindex.htmlを切り替える、.htaccess手法をやっていきましょう。

自己流の理解が入っているので、何か問題や間違いがあればご指摘お受けしますのでお気軽にどうぞ。

 

今回はPCサイトのindex.htmlには、

<link rel="alternate" media="only screen and (max-width: 767px)" href="http://○○_pc/○○_sp/">

と、タイトルの下辺りに記述します。

これは、767px以下の画面幅の端末からのアクセス時、href先(スマホ用のindex.html)が代替物としてあるのでよろしくね。と検索エンジンに対して明示します。

 

一方で、SPサイトのindex.htmlには、

<link rel="canonical" href="http://○○_pc/">

と、タイトルの下辺りに記述します。

href先(つまりPCサイトのindex.html)がカノニカル(コピーじゃない方)がちゃんとあるよと検索エンジンに対して明示してあげています。

 

つまり、PCのindex.htmlから、代替物としてのSPページがあることを明示。

SPのindex.htmlから、代替物ではないほうのPCページがあることを明示。

という流れで、検索エンジンに対して重複ファイルとみなされないように設定をしています。さて、これだけでは、端末によってPCページにいかせたり、SPページにいかせたりはまだ出来ないので、いよいよ、.htaccessを作ってそれらを行っていきましょう。

 

.htaccessファイルを作る

.htaccessファイルを作り、PCのindex.htmlと同じトップの階層に配置します。

.htaccessに以下のコードを記述します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ http://○○_pc/○○_sp/ [R,L]

Header set Vary User-Agent
</IfModule>

これにより、iPhone,Android等からアクセスされた場合に、スマホ用のindex.htmlに飛ばす事ができます。RewriteRuleは絶対パスでも相対パスでも大丈夫だそうです。今回は絶対パスを想定して記載しています。個人的にわかりやすいので。

 

参考になったサイト

こちらを参考にしました。.htaccessファイル内の解説も行っていますので、詳しく中身を知りたい方は是非。

 

allabout.co.jp

 

リセットCSS

リセットCSS

そもそもリセットCSSとは、標準的に予め設定されているものをとっぱらって、制作する人が0からCSSを設定するために一旦まっさらな状態に戻すことです。これにより、制作者が、レイアウトを0から設定していくことが出来るため、自分の思い通りにレイアウトしていきやすいメリットがあります。

例えばですが、仮にリセットCSSを行わずにレイアウトを組もうとした時、幅高さをキッチリ指定したタグに、標準的に初めからついているマージンがあるせいで要素がはみ出してレイアウトが崩れたり、その都度そのマージンがどのくらいついているか調べて、そのタグにmargin:0;を指定してあげたりと、非常にめんどくさいです。

ですが、一旦リセットCSSをしていれば、マージンもパディングも0からのスタートでレイアウトしていくことが出来るので、想定外のサイズになったりしないですよね?こういった点からリセットCSSは、レイアウトする際に非常に重宝する考え方と言っていいでしょう。

リセットCSSにやり方は決まっていません。色々調べるとわかりますが、各々やり方やリセットする内容が違いますので、はじめは自分が使うタグからリセットしていくといいでしょう。

リセットCSSについてこちらにも詳しく載っています。

リセットCSSとは? | 独学でWebデザインまとめんばーず |Webクリオンライン

 

では、実際にどんな感じか私が使っているリセットCSSを見ていきましょう。

以下コード

@charset "utf-8";

/* resetCSS@zin */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  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;
}
 article, aside, dialog, figure, footer, header,
 main, menu, nav, section {

  display: block;

}

 

自分の使用するブロックレベルのタグのリセット

htmlにも、bodyにも、ul,olといったリストにもmargin,paddingがついていますので、それらを0にしています。さらに、line-heightといった、行間も同様に1.0として、上下に発生する隙間をなくしています。そして、フォントファミリーで使用するフォントの最適化を行っています。フォントの最適化に関しては、以下の記事を参考にしています。

web-design.hatenadiary.jp

ul,olのlist-style:none

list-styleをnoneにすることで、黒点やolの数字を消します。

imgにborder:0;を指定する理由

これもレイアウト上ボーダーがつく可能性があるためです。たとえば、アンカータグで囲まれると青いボーダーが入り、img自体の幅がそのボーダー分伸びる事になります。なので、0にしておこうということです。

imgにvertical-align:bottomを指定する理由

gとかjとかを表示させるために、下側がそもそもインラインレベルのものは空いています。画像も特殊なインラインレベルのタグ(ただし、例外的に幅や高さを指定できる)になりますので、vertical-alignがベースラインに合わさってしまい、ボトムとベースラインの隙間があいたまま画像が配置されてしまいます。なので、その隙間を埋めるために画像のvertical-alignをbottomに指定しています。inputも同様です。グリッドデザインのような配置をする時に結構ハマるポイントです。画像の下になんか隙間ができちゃうんだよねーという時はvertical-alignを確認してみるといいかもしれません。

こちらにも分かりやすく解説されています。

画像の下にできる隙間 - Webtech Walker

HTML5の新要素をブロック化している理由

IE8等のブラウザではインライン要素として見られてしまうので、その対策です。

こちらに詳しく記載がありましたので、紹介致します。

新要素をブロック要素としてブラウザに読み込ませる|HTML5速攻マスター

本日の振り返り

 皆さんお疲れ様です。是非リセットCSSお試しあれ、ではまた次回:D

headにさらに情報を

ファビコンとタッチアイコン

ファビコンとは?.icoとは?という方はこちらの記事にすごくわかりやすく載っています。

yachin29.hatenablog.com

  • favicon.icoはジェネレーターにて生成すると楽。ジェネレーターは色々あるみたいですが、上記のブログと合わせてこちらのジェネレーターを使用しています。

    http://ico.bradleygill.com/index.php←Browseを押してファビコン化させたい画像を選ぶだけで.icoファイルを生成してくれます。

  • ファビコンとタッチアイコンを各ページに設定したい場合は、ファビコンとタッチアイコンの設定を各ページのヘッダに記載する。
  • favicon.icoとtouch-icon.pngはサイトトップのインデックスと同じ階層に配置する。
  • 今回はtouch-icon.pngのサイズは192x192とします。これは自動縮小されるので、タッチアイコンの中で一番大きいサイズのようです。(※2015年データ)

ファビコンの設定

サイトトップのindex.htmlからファビコンを設定する際の記述。※もちろんサイトトップのindex.html以外から読み込みたい場合はhrefのパスを読み込みたい場所からのパスに直す必要があります。

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico">

タッチアイコンの設定

サイトトップのindex.htmlからタッチアイコンを設定する際の記述。※もちろんサイトトップのindex.html以外から読み込みたい場合はhrefのパスを読み込みたい場所からのパスに直す必要があります。

<link rel="apple-touch-icon" href="touch-icon.png">

ビューポート設定(主にスマホサイト用)

スマホなどの他デバイスに対応させるために必要な記述。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

フォーマットディテクション設定(主にスマホサイト用)

iOSAndroidには、元々080-xxxx-xxxxといった電話番号やxxxxx@gmail.comのような記述をhtmlで行うとタッチしただけでそこに電話がかかってしまったり、自動リンクされてしまう機能が備わっているので、その機能を切っています。

※detection=検出

<meta name="format-detection" content="telephone=no,email=no">

詳しくはこちらに。

https://iwb.jp/format-detection-telephone-email-address-no/

外部cssファイルの読み込み

<link rel="stylesheet" href="css/style.css">

CSSファルダ内のstyle.cssを読み込んでスタイルシートを適用させます。

jQuery本体と外部jsファイルの読み込み

<script src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

jQueryのコードを書いた外部jsファイルを読み込みたい場合は、先にjQuery本体を読み込んでから出ないと外部ファイルに書かれているコードをjQueryのコードとして読んでくれないので注意です。

 

外部jsファイルの読み込み(jQueryを使わない場合)

<script type="text/javascript" src="js/script.js"></script>

だけでOKです。jsフォルダにあるscript.jsというjavascript言語でかかれたプログラムファイルを読みに行きます。

 

本日のまとめ各コードの記述位置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="概要文">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico">

<!-- touch-icon -->
<link rel="apple-touch-icon" href="touch-icon.png">

</head>

<body>

</body>

</html>

 

※色で記載項目を分けてみました。

必須の記述

スマホ用の設定

外部ファイルの読み込み

ファビコンとタッチアイコンの設定

ヘッダは色々書くことができて大変ですよね。

もちろん、PC向けのサイトを制作するのであれば、スマホ用の設定はいらないですし、ファビコンとタッチアイコンも必要ないなら書かなくても大丈夫です。ですが、必要になった時にあれ?どうやって書いたっけ?となってしまうかもしれないのでその時はこのページをみてコピペってくれればいいなとの思いで掲載しました。

ではまた次回:D

HTML5基本の型

HTML5基本の型

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>各ページタイトル</title>
<meta name="description" content="ページ概要文">

</head>

<body>

<header></header><!-- /header -->

<nav></nav><!-- /nav -->

<div id="container"></div><!-- /container -->

<footer></footer><!-- /footer -->

</body>

</html>

 

自分用ですが、上から簡単に解説していきます。

 

DOCTYPE宣言

<!DOCTYPE html>は、ドックタイプ宣言と呼ばれるもので、簡単に言うとHTML5のルールに従ってコードを書いていくことを宣言するものです。

htmlタグで文書全体を囲む

<html lang="ja"></html>はHTML文書の開始と終了を表します。lang属性によって日本語を使用していることをブラウザや検索エンジンに対して明示します。

headとbody

htmlタグの中に入れ子構造で、<head></head>と<body></body>を記述します。

ここまでは、決まりきったお約束だと思って頂いて大丈夫です。

 

文字化け防止

<meta charset="utf-8">は、文字化けを防ぐためにutf-8という文字コードを指定しています。その直下にタイトルタグを書きます。

 

ページ概要文

<meta name="description" content="ページ概要文">は、ディスクリプション設定といいます。SEO対策及び検索エンジン対策に非常に大切なものの一つです。content属性の中にそのページの概要文を記述します。

 

body内のタグについて

・<header>や<footer>,<nav>といったタグは、HTML5から追加されたタグです。ウェブサイトを制作する人達は、従来(HTML5が出現する前)、<div id="header">や<div id="footer">といったヘッダーやフッターを呼ばれるものを自分で作って、レイアウトを調整したり、そこがヘッダーやフッターの部分だと明示したりしていたのですが、それがHTML5では標準化され、一つのタグとして使えるようになったものです。(つまりわざわざdivにid名を付けて自分で作らなくてもよくなったということです。)

・<div id="container">はdivタグに、container(※container = コンテンツ全体を囲む空要素に対してよく使われるid名)というid名を付けたdiv要素になります。この中に、ヘッダーとフッター以外のページの主要なコンテンツ(文章や図等)を入れていきます。これも今はまだ分からなくて大丈夫です。よく使われる主要なタグを覚えて、divの使い方を本格的にやり始めてからでも全然大丈夫ですので慌てず、今は全体の形をある程度把握できるようにしましょう。

※ちなみにcontainerというid名も、任意で好きなid名を付けられますが、今回メインとなるコンテンツ全体を囲むものとしてよく採用されるcontainerという名前を使用しただけです。絶対この名前じゃないとだめというわけではありません。

更に詳しく知りたい方へ

メタタグについて参考になるサイト

<meta>-HTML5タグリファレンス

 

ドックタイプ宣言について参考になるサイト

HTMLのDOCTYPE宣言って何なの?使い方は?書き方は?

 

web制作向けillustratorの作業設定

web制作向けillustratorの作業設定

f:id:zinnteitan:20161016194643j:plain

web制作においてイラストレーターといえば、ロゴを作ったり、バナーを作ったり、webサイト用の部品素材を作ったりと何かと重宝するillustratorですが、イラストレーターでそれらの制作を行う際に、注意しなければならない点がいくつかありますので、それらを簡単に解説しながら今日は進めていきたいと思います。

 

新規オブジェクトをピクセルグリッドに整合のチェックを外す

ピクセルグリッドに整合とは、オブジェクトをピクセルグリッドと呼ばれるものによって自動的にピクセルに合うように自動整形してくれる機能です。つまり作ったオブジェクトが自動で大きさを微妙に調整されて1px増えてたりなんてことがある機能です。なので、便利な反面、自分の意図しない動きをすることが多々有りますので、個人的にはこの機能に初めから頼らないで、自分できっちりと把握しながら幅や高さを設定していくというほうがいいと感じます。こいつをONにしておくと勝手に幅や高さが1px増えてたりといったことが結構ありまして、大変な思い出でいっぱいです。1pxのずれは命取りの世界ですからね。(大げさに聞こえるかもしれませんが本当です。)

f:id:zinnteitan:20161016181417j:plain

 

環境設定

web向けの作業ではピクセル単位での作業を行いたいので、単位を全てピクセルに直しておくとピクセルベースで作業ができるので、環境設定の単位もすべてピクセルを指定しましょう。

メニューの編集から環境設定を選択し、単位を選びます。一般、線、文字、日本語オプション、これらの4項目を全てピクセルにしておきましょう。

f:id:zinnteitan:20161016182250j:plain

 

ピクセルプレビューにチェックを入れる

メニューから、表示→ピクセルプレビューにチェックを入れます。これにより、1pxのマス目を表示させることが出来ます。みえないよーって方は拡大してみると見えてきますヨ。

さらに3つチェックを入れる

  1. スマートガイドにチェックを入れる。
  2. ピクセルにスナップにチェックを入れる。
  3. ポイントにスナップにチェックを入れる。

※こちらもメニューの表示からいけます。スマートガイドとポイントにスナップは前に紹介しましたので、そちらを参考にしてみて下さい。

webdesignzin.hateblo.jp

 

作成したオブジェクトの線を内側に指定する

指定した幅、高さの内側に線がつきますので、こちらも自分が設定した幅、高さ通りにするという点で非常に重要なポイントです。これが外側だと指定した幅、高さよりも外側に線がついちゃう状態になります。f:id:zinnteitan:20161016185105j:plain

f:id:zinnteitan:20161016185530j:plain

 

 

画像を配置する時はリンクのチェックを外しましょう

これもかなりトラウマがありまして(´・ω・`) もし知らなかったらみなさんも注意です。これは今回のテーマとはちょっと毛色が違うお話なのですが、ついでにということで紹介致します。メニューからファイル→配置を選び画像を配置する時、リンクにチェックが入ったまま画像を配置すると、インスタンスとして画像が配置された状態となります。この時イラストレーターはこの画像へのパスをたどって画像を読み込んで表示している状態となっていますので、画像へのパスが変わると、当然イラストレーターの中ではこの画像は埋め込まれていない状態なので、存在しない状態になってしまいます(配置されたときのパスと現在のパスが異なるため)。ですので、画像をオブジェクトとして、読み込むにはリンクのチェックを外すことを推奨します。ドラッグアンドドロップイラストレーターの中に画像を配置した時もリンクの状態になっているので、画像を配置する時は、ファイルメニューから行うようにしましょう。

 

web向けイラストレーターの制作方針はこちらも参考になりますよ!

www.dtp-transit.jp

 

本日の振り返り

1pxにこだわって作業する上で本日の内容が皆様のお役に立てる日が来ることを願っています。ではまた次回:D

illustratorの基本操作13 クリッピングマスクと複合パス

クリッピングマスクと複合パス

f:id:zinnteitan:20161017134821j:plain

みなさんこんにちは、迅犬です:D

今回はクリッピングマスクと、クリッピングマスクとよくセットで使われる複合パスについてやっていきましょう。

クリッピングマスクとは?

クリッピングマスクとは、上のオブジェクトの形で下の画像を切り出す。と思っていただいて大丈夫です。厳密に言うと切り出すというよりは、上のオブジェクトの範囲内を下の画像の表示領域とするという具合です。

 

photoshopの場合 ]

※ただし、Photoshopの場合は、上の画像を下のオブジェクトの形で切り出します。

[ SAIの場合 ]

※SAIの場合は、下のレイヤーに描画されている領域上にのみ描画を適用させる。

 

SAIのクリッピングマスクを知っている人はおそらく最初混乱すると思います(笑)

クリッピングマスク適用前の状態

f:id:zinnteitan:20161015210420j:plain

クリッピングマスク適用後の状態

f:id:zinnteitan:20161015210550j:plain

このように、上のオブジェクトの形に、下の画像を切り出す。というようなことができます。

クリッピングマスクさせる方法

クリッピングマスクを適用させたいオブジェクトと下の画像を選択してから、Ctrl+7

メニューからは、オブジェクト→クリッピングマスク→クリッピングマスクの作成

クリッピングマスクを解除する方法

クリッピングマスク状態のオブジェクトを選択してから、Ctrl+Alt+7

メニューからは、オブジェクト→クリッピングマスク→クリッピングマスクの解除

※ただし、クリッピングマスクの解除をすると、オブジェクトの塗りがもとにもどらないので、やっぱやり直したいという場合は、Ctrl+zで作業状態を戻すといったやり方が安全です。

 

複合パスとは?

複合パスとは、複数のオブジェクトを一筆書扱いされたパスを持つ1つのオブジェクトとして扱うようにすることです。特徴として、複合パスが適用されたオブジェクトグループは、重なり合った塗りの部分が透明になるのと、グループ化されているので、個別にオブジェクトを操作したい場合はダイレクト選択ツールで操作します。

ただし、グループ化したように見えますが、グループ化とは違い、グループ化の解除(Ctrl+shift+g)は出来ません。

f:id:zinnteitan:20161015204006j:plain

複合パス化させる方法

複合パス化させたいオブジェクトを選択した状態で、Ctrl+8

又は、メニューから、オブジェクト→複合パス→複合パスの作成

複合パスを解除する方法

Ctrl+Alt+8

又は、メニューから、オブジェクト→複合パス→複合パスの解除

複数のオブジェクトをクリッピングマスクさせたい時

複数のオブジェクトにクリッピングマスクを適用させたい場合、グループ化では出来ません。(重要)

ではどうやるのか?ここで登場するのが、複合パスです。

実際にやってみましょう。

複数のオブジェクトを複合パス化させて、クリッピングマスク

上の二段の白い角丸長方形12個は複合パス化(Ctrl+8)されたグループです。

下の二段の白い角丸長方形12個は普通に(Ctrl+g)でグループ化されたグループです。

この2つのグループにそれぞれ、下の背景画像とクリッピングマスクさせて、その違いを見ていきましょう。

f:id:zinnteitan:20161015211124j:plain

まずは、下の二段と背景画像をクリッピングしてみました。

普通にグループ化されたオブジェクトのグループはクリッピングマスクさせても白く

なってしまい、失敗しています。

f:id:zinnteitan:20161015211430j:plain

では、次に、複合パス化されたグループと背景画像をクリッピングマスクしてみましょう。どうでしょう。きちんと下の画像を上の複合パスのオブジェクトの形でクリッピングされていますね。

f:id:zinnteitan:20161015211354j:plain

このように、複数のオブジェクトをクリッピングマスクを適用させたいときは、複数オブジェクトをグループ化ではなく、複合パス化させてあげないといけないということがわかると思います。細かい理由は正直わからないのですが、クリッピングマスクと複合パスは相性がイイとおぼえておいて損は無いはずです。

以上になります。ではまた次回:D

illustratorの基本操作12 パスファインダー

イラストレーターのパスファインダー

f:id:zinnteitan:20161015151818j:plain

皆さんお元気ですか?迅犬です:D

今回はパスファインダーをやっていきましょう。複数の図形オブジェクトを組み合わせて新しいカタチを生み出す時にとても便利な機能になりますので、是非この機会に習得してしまいましょう。

パスファインダーとは?

簡単に言うと、複数のオブジェクトを組み合わせて、新しい形を生み出す機能です。

具体的には、形状モードで合体させたり、パスファインダーで図形を分割したりできます。

こちらすごい参考にさせていただきました。

Illustrator実践講座-パス

パスファインダーパネルを開こう

ウィンドゥからパスファインダーを選び、パスファインダーパネルを出しましょう。

f:id:zinnteitan:20161015141350j:plain

今回は主に使用頻度の高い形状モード4つをやっていきましょう。

 

各形状モードの違いと特徴

形状モード:合体

f:id:zinnteitan:20161015142111j:plain

 

形状モード:前面オブジェクトで型抜き

f:id:zinnteitan:20161015142134j:plain

 

形状モード:交差

f:id:zinnteitan:20161015154441j:plain

 

形状モード:中マド

f:id:zinnteitan:20161015142318j:plain

 

複合シェイプ

形状モードの合体等をAlt押下状態で行うと複合シェイプとして合体等が適用されます。複合シェイプでは各オブジェクトのパスが残ってます。違いとかはこちらを参照していただくとわかると思いますが、結構複雑なので、初心者の方が無理して覚える必要はないと思います。(個人的にですが)。

 

複合パス

名前が似ている複合パスもちょろっとやっておきましょう。ショートカットキーの割当はCtrl+8です。解除するときはCtrl+Alt+8です。メニューからは、オブジェクト→複合パスから操作可能です。

複合パスについてはこちらを参照するとわかりやすいです。

 

複合パスとよくセットで使うクリッピングパス

例えば、複数のオブジェクトをグループ化して下の画像に対してクリッピングマスクを適用させようとすると出来ません。しかし、これが複合パスとして扱うだけで下の画像に対してクリッピングマスクをすることが出来ます。これ、正直理由を説明できないんですよね。どなたかご教授をっ(汗)。

と、まぁ、雑記で申し訳ないのですが、グループ化ではできないことが出来る利点があり、クリッピングマスクと組み合わせてよく使用される場面が多いということを知っておけば良いのでしょうか?自信が無い。。。

いつかこの疑問が解ける日が来るといいなぁ(´・・`)

複合パスに関しては、次回のクリッピングマスクで少し実践的なものをやっていきましょう!(投げやり)

 

本日の振り返り

パスファインダーの形状モードを4つやって終わるはずが、複合シェイプやら複合パスやらが出てきてしまってグダグダになってしまって申し訳ありません。勉強しておきます。ですが、パスファインダーの形状モードを使用すれば、図形を組み合わせてロゴの作成等もできそうではありませんか?今回は少し疑問を投げかける形で終わりたいと思います。私事ですが、ブログを書いていると、自分の分からない点が明白にわかるので、便利ですね。ではまた次回:D