WEBデザインの歴史や知識
ホームページが閲覧されるようになったのは、1994-1995年から。
当時は「スキューモフィズム」という手法だった。
ボタンやデザインに影、重なり、質感効果を適用して身の回りにあるものに
なるべく似せて作るデザイン。
2010年～からは「フラットデザイン」の手法。
立体的な表現をなくして、べた塗りを基調にシンプルなタイポグラフィーを合わせる。
タッチ端末と相性が良い。
HTMLのver
最新のHTMLはHTML5
昔はW3CとWHATWGという団体が各々公開していたものが併用されていた。
2019年にWHATWGが策定するリビングスタンダードがHTMLとDOMの唯一の標準となった。
解像度(ppi)=1インチ(2.54cm)あたりにいくつのピクセルを並べるのかを示すもの。
「画像種と用途」
JPEG 非可逆圧縮 色数:16,777,216色 透明:× 適した用途:写真,色の豊富なもの
デメリット:元の画像に戻せない,透過を扱えない
PNG-8 可逆圧縮 色数: 256色 透過:〇 適した用途:色数の少ない物(ロゴ,アイコン等)
透過が必要なもの
デメリット:扱える色数が限られる
PNG-8 可逆圧縮 色数:16,777,216色 透過:〇 適した用途:色数が豊富透過が必要な物
画質を落としたくないもの
デメリット:容量が重くなりがち
GIF 可逆圧縮 色数:256色 透過:背景透過 適した用途:色数の少ない物
GIFアニメーション
デメリット:扱える色数が限られる,カラープロファイルを埋め込めない
SVG=拡大縮小しても画質が粗くならない。
Webページのレイアウトパターン
シングルカラムレイアウト
マルチカラムレイアウト
グリッドレイアウト(カードレイアウト)
フルスクリーンレイアウト
・シングルカラムレイアウト
ヘッダー/ナビゲーション/コンテンツ/フッターなどの領域を縦に並べるレイアウト
PC・モバイルの対応分けがし易い
・マルチカラムレイアウト
コンテンツ部分を段組みするレイアウト。
メインコンテンツとサブコンテンツを横並びにしたり
メインコンテンツの横にサイドバーを設置したりする形。
多くの情報を整理した形でレイアウトできる
・グリッドレイアウト
コンテンツをタイル状に並べるレイアウト。カードレイアウトともいう。
コンパクトにまとめられ、かつ視覚的にわかりやすい
・フルスクリーンレイアウト
Webブラウザの画面いっぱいに写真や動画の背景を配置して、コンテンツを見せるレイアウト。質の高い写真や動画を使用してブランドイメージを高める効果があったり、
インパクトの強いレイアウト。
レイアウトの表現手法と流行の返還
1990年代後半～2000年代初頭
HTMLのtable要素を使ってコンテンツを配置してた。
2000年～2010年半ばほど
CSSのfloatプロパティによる配置
回り込みの解除の際のレイアウト崩れが起こる場合などがあり、記述が複雑になる面もあった。
2015年頃～
Flexboxによる配置
CSS3で実装
親要素にdisplay: flex; で適用し、子要素を配置する
現在の主流
gridレイアウト
CSS3の機能
display: gridl; にて適用。縦横の格子状に配置できる。
JavaScriptとは
Webページで動的表現を実装する為の定番技術
カルーセル表示=スライドショー,スライダーの意味
モーダルウィンドウ=ウィンドウの内側に子ウィンドウが開き、子ウィンドウの操作を修了させないと親ウィンドウの操作に戻れない物
「実装方法」
直接定義=HTMLファイル内に< script >を使用して記述する方法
外部定義=HTMLファイルとは別にJavaScriptを記述したファイル(.js)を作って
HTML内でリンクさせる方法
「ライブラリ」と「フレームワーク」
・ライブラリ
汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。
・フレームワーク
汎用的で再利用可能なクラスやライブラリ、モジュール、APIなどとソフトウェアの主要部分の雛型としてそのまま利用できるもの。
データのバージョン管理の基本,作業を効率化させるシステム
データは日々更新していくもの。
時には、更新したことによって不具合が発生することもある。
そういったときは、正常に動作していたところまで戻り、作業を再開することになる。
そのため、日々の実務の場合は
その日、１日の作業分のデータをフォルダ名に日付や名前などを記述して格納して管理していく。
データの「バージョン管理システム」
作成しているそれぞれのファイルに加えられていく変更の履歴を自動で記録・管理するもの。
代表的なものが、
Subversion
Git
がある
Gitが機能性、使い勝手がよく広く利用されている。
またGitを使用する開発者を支援するGithubというWebサービスもある
CSSのコーディングを効率化させる「Sass」
Ruby製のCSSメタ言語。
導入するには、Rubyをインストールするなどの環境構築が必要。
SASS記法とSCSS記法がある。SCSS記法の方が通常のCSSの記法に近くて便利。
Sassで記述したものは通常のCSSの記述に変換して読み込ませる必要があるが、
その作業を「コンパイル」という。
繰り返しのタスクを自動化する「タスクライナー」
繰り返し行う作業を自動化する。
主にできる繰り返し作業
・cssのプロパティを並べ替える
・cssにプレフィックスをつける
・Sassをコンパイルする
・画像、css、Javascriptを圧縮する
代表的なタスクライナー
・gulp
・grunt