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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

Photoshop 基礎

Photoshopの基本的な使い方

Photoshopで行う作業は大きく別けると以下の3つ

  • 画像を作る。
  • 画像を補正する。
  • 画像を加工する。

Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき[Ctrl]+[Alt]+[Shift]を押したままに。
Adobe Photoshop設定ファイルを削除しますか?」とダイアログがでる。

  • カラー設定は「Web・インターネット用 - 日本」
  • 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
  • ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。


・選択範囲を取る

  • 選択ツール
  • 自動選択ツール
  • マグネット選択ツール

などで選択範囲を取る。
微調整はクイックマスクモードで作業する。




・画像間の移動
別のファイルに選択範囲を切り取って移動

  1. 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
  2. 「ダッキー.psd」の中から選択範囲を決める。
  3. 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
  4. ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。




ビネット効果



f:id:yachin29:20180910202130p:plain


素材
http://felica29.starfree.jp/Web_Photoshop.zip

adobe brackets|オープンソースの高機能テキストエディタ

adobe bracketsとは?

HTMLやCSSJavaScriptのコーディングに特化したOSSテキストエディターとして、2011年12月から開発をスタートし、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。

Adobe SystemsBracketsを「HTML/CSS/JavaScript用のコードエディター」と称しているが、PHPRubyPythonなど多くのシンタックスハイライトを用意している。だが、後述する機能を俯瞰(ふかん)すると、やはりWeb開発の利便性を向上させるテキストエディターと評すべきだろう。

Brackets最大の特徴となるのが、ライブプレビュー機能だ。編集中のHTMLファイルやindex.htmlファイルを含むCSSファイルに対して実行すると、Webブラウザーでリアルタイム表示するというもの。現バージョンはGoogle Chromeが必要となるが、<ファイル>メニュー→<試験ライブプレビューを有効にする>を選択するか、brackets.jsonの「"livedev.multibrowser": true」にすることで、Microsoft Edgeなども使用可能だ。


f:id:yachin29:20170724120419p:plain



Brackets - A modern, open source code editor that understands web design.



nelog.jp


adobe bracketsの特徴

  • リアルタイム表示(ライブプレビュー)
  • 高度な拡張性

授業では

  • Brackets File Icons
  • Highlight Multibyte Symbols


というプラグインを入れてみましょう。



他にも色々と便利なプラグインがあるので自宅のPCに入れてみましょう。

qiita.com


デフォルトではインデントの設定がonになっているので、インデントの機能をoffにしたい場合は以下の設定を行います。

"smartIndent": false,



bracketsはデフォルトで、閉じカッコを打つと、終了タグが自動で挿入される仕様なので、
デバッグ」→「環境設定ファイルを開く」→「brackets.json」の記述を下記の内容に変更

{
    "smartIndent": false,
    "fonts.fontSize": "9px",
    "fonts.fontFamily": "'SourceCodePro-Medium', MS ゴシック, 'MS Gothic', monospace",
    "denniskehrig.ShowWhitespace.checked": true,
    "closeBrackets": false,
    "in3tween.ShowWhitespaceJA.checked": true,
    "in3tween.ShowWhitespaceJA.colors": {
        "light": {
            "empty": "#FFD3FF",
            "leading": "#ccc",
            "trailing": "#ff0000",
            "whitespace": "#ccc"
        },
        "dark": {
            "empty": "#FFD3FF",
            "leading": "#686963",
            "trailing": "#ff0000",
            "whitespace": "#686963"
        }
    },
    "custom.work.useIconsOfCustomWork": true,
    "custom.work.moveToolbarToSidebar": true,
    "custom.work.toggle.sidebar": true,
    "custom.work.autoHideTheTabmenu": true,
    "livedev.multibrowser": true,
    "closeTags": {
        "dontCloseTags": [],
        "indentTags": [],
        "whenClosing": true,
        "whenOpening": false
    }
}

マークアップとは?

マークアップ とは、機械が文書の構造を認識出来るように、文書の各要素に目印を与えて行く事です。 見出しや段落などと言った紙の文書では当り前にある要素だけでなく、ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、マークアップに依り認識が可能になります。

要はコンピュータが解るように文章を構造化する事です。マークアップしなくてもブラウザーに文字は表示は出来ますが、その状態では意味や構造を持つ事が出来ません。マークアップする事で構造や意味を明確にしましょう。
HTMLの文章構造には厳密なルールがあり、そのルールに沿ったマークアップを心がけましょう。


では実際にマークアップをしてみましょう。

新規ファイルを作る

ファイルを新規作成する場合は、[ファイル]メニュー →[新規作成]を選択します。

ファイルの保存

まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、[ファイル]メニュー →[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。この時必ず[ファイルの種類]はHTMLファイルを選択します。

上書き保存

ファイルを上書き保存する場合は、[ファイル]メニュー →[上書き保存]を選択(または、[上書き保存]ボタンをクリック)します。しかし、いちいちメニューからコマンドを選んでいると作業効率が悪いので、授業ではショートカットを積極的に使っていきます。保存のショートカットは「Ctrl」+「S」なので必ず覚えておきましょう。


マークアップのルール

  • 開始タグ 「<」と「>」の間に「要素」を書く。
  • 終了タグ「」の間に「要素」を書く。

<h1>一番重要な見出し</h1>


HTMLの基本形

  • 「html」~「/html」 は、そのルールで記述するための「箱」
  • 「head」~「/head」ブラウザに内容のルールを伝える(ブラウザでは不過視、コンピューターに向けた情報)
  • 「body」~「/body」 閲覧者に内容の意味を伝える(ブラウザでは可視、人間に向けた情報)
<html>
<head>

</head>
<body>

</body>
</html>

この時大事なのは上から順に書いて行くのではなく、構造と意味を理解し、各タグ毎に記述していきます。


タイトルを追加する
<html>
<head>
<title>はじめてのHTML入力練習</title>
</head>
<body>

</body>
</html>

今回覚えるタグ(要素)

  • h1~h6 見出し(h1,h2,h3,h4…と、数が大きくなるほど見出しは小さくなります)
  • 段落(文章)
  • ul(unordered list) 順不同リスト
  • ol(ordered list) 順序が決まっているリスト
  • li リストタグ (ul もしくは ol と一緒に使います)

画像の挿入とリンク

画像を挿入されるには「img」タグを使用します。

<img src="画像の置いてある場所"  alt="代替え文字">

img = image
src = source

ハイパーリンク

リンクの無いWebサイトはこの世界に存在しません。リンク=webと言っても良いので、しっかりと理解し覚えておきましょう。

テキストリンク
<a href="移動先の住所(パス)">テキストリンク</a>

a:anchor
href:hyper reference


画像リンク
<a href="移動先の住所(パス)"><img src="画像の置いてある場所" alt="代替え文字"></a>
メールリンク
<a href="mailto:メールアドレス">お問い合わせ</a>

相対パス絶対パス

パスには相対パス絶対パスの2つがあります。この2つの違いをしっかりと理解する事がWeb初学者とって1番大事な事です。

相対パス

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。上位フォルダを「..」であらわす。
ひとつ上の階層を表すには「../」を使います。


絶対パス

絶対パスとは、http://から始まるアドレス(URL)を使ってファイルの場所を指定することです。この絶対パスは、おもに他のサイトにリンクしたりする場合に使います。

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。

もちろんこのブログもHTMLファイルで出来ています。マークアップ言語と言葉でいっても解りずらいと思うので実際に見てみましょう。
ホームページ上で右クリックでコンテキストメニューを開き、「ページのソースを表示する」で確認してみます。
f:id:yachin29:20160713011517j:plain

ハイパーテキスト

ハイパーテキスト (hypertext) とは、複数の文書(テキスト)を相互に関連付け、結び付ける仕組みである。「 テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられた。 テキスト間を結びつける参照のことをハイパーリンクと言う。

f:id:yachin29:20160713011956g:plain


平たく言うと、ハイパーテキストとは辞書である語句の意味を調べている時に、その語句の説明文のなかに解らない語句が出て来てしまい、説明文のなかの解らない語句をまた調べ直す、という堂々巡りを改善・効率化させたシステムです。ウィキペディアをイメージしてみると解りやすいかもしれません。
そんな、ハイパーなテキストをあるルールに沿って、マークアップ(目印・タグを付ける)した言語がHTMLです。


www.internetacademy.jp

道具の使い方を覚える

PCの使い方

物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。
今までのようにユーザーとしての使い方では無く、制作者としての使い方を覚えていきましょう。


ブラウザーの使い方

ブラウザーとは?

ウェブブラウザ(インターネットブラウザ、web browser)とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ(ブラウザー)と呼んだ場合、多くはウェブブラウザのことを指す。

授業ではFirefoxGoogle Chromeの2つのブラウザーを主に使用していきます。

Mozilla Firefox

非営利団体である「Mozilla Foundation」が開発したブラウザー
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。

www.mozilla.org


Google Chrome

Googleが開発しているブラウザーGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー。最新のHTML5とCSS3による表示が可能。

www.google.co.jp


Web制作におけるIE(Internet Explorer)

日本では長年ダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
最近は事情も変わって場合によってはIE未対応でOKの場合も出て来ています。


japanese.engadget.com

「2009年1月から2018年8月まで」デスクトップでのブラウザーのシェア推移

f:id:yachin29:20190318111309p:plain


2019年1月現在の日本国内のブラウザーシェア
f:id:yachin29:20190318110103p:plain


◆ 2019/01期の国内シェアランキング

1位 Chrome 58.46%  2位 IE 15.19%  3位 Firefox 9.47%  4位 Safari 8.3%  5位 Edge 6.69%  6位 Opera 0.84%  7位 Vivaldi 0.19%  8位 QQ Browser 0.16%  9位 Sleipnir 0.16%  10位 その他 0.54%  




gs.statcounter.com







検索の仕方を覚える

検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。

「AND」検索

例(池袋 カフェ)
一番使われている方法で2つ以上のキーワードを入力して検索精度を上げることができます。
キーワード間に一文字分のスペース (半角、全角どちらでも可) を入れる。

「OR」検索

例(マイケル・ジャクソン OR Michael Jackson
たとえばマイケル・ジャクソンを調べるときに日本語で「マイケル・ジャクソン」と表記したサイトと英語で「Michael Jackson」と表記した2種類があり場合に、そのどちらも検索結果に出したい場合などに使うのが「OR」検索です。
キーワードを半角大文字「OR」、もしくはパイプ「|」で区切り、その前後には半角スペースを入れます。

「マイナス」検索

「キーワード1」で検索したいが「キーワード2」の情報は除きたい場合、「-」の後ろに書いたキーワードを除外して検索することができます。
例:英会話 -教室



関連サイト検索

そのWebサイトと似たようなサイト(類似性の高いサイト)を見つけたい場合、related:を使ってみましょう。
同業種の競合サイトを見つけたい、類似サイトを探して参考にしたい時などに役立ちます。

例:related:http://toyota.jp/(※トヨタ自動車の公式HPです)
結果:日産、ホンダ、マツダ、スズキ等の公式HPがヒット

タイトル検索

タイトル名をキーワードで検索したい場合は「intitle:」「allintitle:」がおすすめです。 「intitle:」は単一のキーワードを、「allintitle:」は複数のキーワードを検索する時に使用します。

例:intitle:Web制作
結果:ページタイトルに「Web制作」を含むページがヒット

例:allintitle:Web制作 おすすめ
結果:ページタイトルに「Web制作」「おすすめ」を含むページがヒット



実際に検索をしてみましょう
  • 3年前の今日の最高気温
  • ゴルフで使用するカップの直径とその理由
画像検索
  • 写真の人物は誰でしょう

f:id:yachin29:20190318113124j:plain





Gメールアカウントを作る

Googleアカウントはweb制作者にとって、もはや必須の物といえます。
また授業内でのデータのやり取りなどでもGメールを使う事が多いので、必ず取得しておきましょう。

www.google.co.jp

www.google.com