WEBサイト制作の勉強

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

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

HTMLの復習

ホテルフェリカ


池袋駅東口より徒歩3分と絶好のロケーション。世界のトップアーティストが数々の公演を繰り広げる「東京芸術劇場」など新しく生まれかわった文化の街池袋、東京の城北地区唯一のグランドホテルです。


シングル・スタンダードルーム
最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。

ツイン・スタンダードルーム
上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。

間取り図

シングルルーム

ツインルーム


共通室内設備

Wi-Fi
加湿空気清浄機
液晶テレビ
冷蔵庫

テーブル

table要素を使うことで、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。
caption要素は、表のキャプション(タイトルや説明)を表します。

table要素=表全体を示す要素です。表の大きさや罫線などは、この要素に設定。
tr要素=表の行を示す要素。例えば3行の表を作成する場合はこの要素を3つ配置する。
th要素=見出し用のセルを示す要素です。
td要素=表のセル(データセル)を示す要素。例えば横に3つのセルを並べたい場合は、各tr要素の中にこの要素を3つ配置。
caption要素=表のキャプション(タイトルや説明)を表します。


<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
</table>
セルの結合


宿泊料金表
部屋タイプ ツイン シングル
グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ
平日 15,800円 20,800円 58,000円 9,800円 14,800円
休前日 19,800円 25,800円 12,800円 17,800円

Webサイトを見る、知る、そして作る

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。

Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。


既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

stock.pulpxstyle.com



choooodoii.com




bm.s5-style.com


81-web.com


www.ikesai.com



muuuuu.org





良いと思ったサイトをまとめる

bntncayo05.starfree.jp


shibaco.wp.xdomain.jp





既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。






stylebread.com


www.lumine.co.jp

HTMLのバージョン



www.mitsue.co.jp

Photoshop基礎

Photoshopの基本的な使い方

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

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

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

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


・選択範囲を取る

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

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




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

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




ビネット効果


素材
https://yachin29.jp/school/Web_Photoshop.zip

summary要素の黒い三角形を消す

iOSでsummary要素の黒い三角形を消すには以下のコードを使っていましたが、それでは消えない場合があるので、下のコードに差し替えて下さい。


summary::-webkit-details-marker {
 display: none; 
}

details summary::-webkit-details-marker, details summary::marker {
 display: none; 
}

Figmaについて

Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。

Figma の特徴

ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。
リアルタイムコラボレーション: 複数人で同時に同じファイル編集できます。
豊富な機能: ベクターグラフィック編集、プロトタイピング、デザインシステム構築など、幅広い機能が搭載されています。




www.figma.com


Figmaの仕様について

Figmaの構造は、大きく分けるとTeamとDraftsの2つのスペースに分かれています。

Team

Teamの中には「Project」さらにProjectの中に「File」が入っている仕組みです。Team内であれば複数人で共有することが出来ます。無料プランの場合、1つの「Project」、3つの「File」までという制限がついています。
Team自体は用途に応じて複数作成する事が可能です。

Drafts

Teamが複数のメンバーで利用できるスペースであるのに対して、Draftは自分だけが編集できる作業スペースです。Draftとは「下書き」という意味を持つ言葉である通り、作成したデザインを下書きとして保存できます。下書きを共同で編集したい場合には、Projectに移動させることで、共同編集できるようになります。


Figmaの料金プラン

Figmaには4つの料金プランが用意されています。
まずは無料の「スタータープラン」で充分です。



www.youtube.com


www.youtube.com



プラグインの追加

豊富なプラグインがあるのもFigmaのメリットの1つです。その中でもよく使うプラグインを実際に入れてみましょう。

  • 画像フリー素材集

www.figma.com

  • アイコン素材

www.figma.com

  • 日本語フォント管理

www.figma.com



一部有料
  • 画像の背景を自動で切り取る

www.remove.bg

  • 1クリックでWebページをFigmaに変換

https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed?hl=ja

Cookie(クッキー)を使ってアクセス済みか判別する

Cookie(クッキー)とは?

Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したときに ユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。

似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー側に保存されてるため機密性の高いデータを扱う場合はSessionを使った方が良いでしょう。


Cookie(クッキー)とキャッシュの違い

キャッシュとは、ブラウザで一度表示したページのデータ(HTMLや画像)を一時的に保存しておく機能になります。何度も頻繁に訪れるページなどは、キャッシュが保存されているおかげで素早く表示することが可能です。
ただ、一時的に保存されているページのデータが最新のものとは限らないので、アップロードの作業時には注意が必要です。特にWordpressはブラウザのキャッシュが強力で、更新前の古いデータが読み込まれて表示される事が多いので、そういった場合はキャッシュの消去を行って下さい。

・IDやパスワードなどの個人情報やサイトの閲覧情報を保存。
・削除するとログインする時に再入力する必要がある。
・IDやパスワードなどの個人情報が漏洩する危険性がある。

キャッシュ

・サイトのHTMLや画像データを保存。
・データはスマホやPC内に保存される。
・キャッシュのデータが増えることでメモリの空き容量がなくなり動作不良の原因になる。




jquery-cookie.jsを使ってみる

github.com

if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('#curtain').hide();
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('#curtain').delay(4000).fadeOut(400);
}

$.cookie('access',$('body').addClass('access'),{
 expires: 1 //指定しない場合は現在のセッションのみ保持される(ブラウザを閉じると消える)。
});

});