KDC : Web演習中期第1回

2023年9月6日

フクシママサミチ

Web制作の現場で闘うために必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載します。

中期第1回目はFramework（フレームワーク）の考え方とツール群の紹介します。

Webデザイナーは覚えることがいっぱい

HTML+CSS

jQuery

MySQL

JavaScript

UI Design

Information Architect

Adobe XD、
Illustrator、
Photoshop

Figma、
STUDIO、
Sketch

…etc

HTMLとは？

テキストボックス、文字、表、画像、リンクなど、WEBサイトに必要な部品を配置し、構造を作るためのマークアップ言語です。

豆知識：よく混同されるプログラミング言語とは異なりますので、注意。

マークアップ言語	テキストにタグづけをしてコンピュータに認識させる言語
プログラミング言語	コンピュータにデータ処理の命令をするための言語

より詳しく復習したい人はこちらもチェック

SAMURAI, Inc. – HTMLとは？できることや基本のタグを初心者向けにわかりやすく解説

CSSとは？

CSS（Cascading Style Sheets）は、ウェブページをデザインするためのスタイルシート言語です。HTMLが構造を作るのに対して、CSSはHTMLを拡張し見栄えを良くするための役割を果たします。

HTMLにもデザイン用のタグはあるが、HTMLのみでデザインを指定すると、以下のようなデメリットがある。

コードが長く複雑になる
コンピュータが理解しづらい
デザインの変更が面倒

HTMLとCSSのファイルは分けるのが一般的。スマホやタブレットなどのデバイスに合わせた表示設定も管理しやすい。

より詳しく復習したい人はこちらもチェック

SAMURAI, Inc.- CSSとは？できることや書き方を初心者向けにわかりやすく解説

JavaScriptとは？

動的なWebページを作るためのプログラミング言語。Webページの文字や画像にアニメーションが付けられたり、検索機能など、機能面でもできることが多くあります。

コードを書く時、こんなこと感じませんでしたか？

同じコードを毎回書いてる気がする。。ツラい…

レイアウト、ボタン、ナビゲーションを自分で考えて作るのが大変…

タイトルタグの大きさなど、デザインルールも統一しなきゃ…

スマートフォン時のデザインはどうしよう…

Webサイトを作るために必要な素材（CSS）があらかじめ何パターンか用意されていればいいのに…

そこで登場したのが、

Framework（フレームワーク）

Frameworkとは？

言葉通りであれば、

フレームワーク=枠組み、構造

この授業では、Frameworkは「CSSフレームワーク」の事とし、進めます。

CSSフレームワークについて

“Webページのパーツ集”のようなもの。

何度も使うCSS、毎回同じHTMLコードを何度も書くなんて面倒！
それならば、使い回してリサイクル出来るCSSやHTMLを書けばよいという考え方。

フレームワークによりますが、基本的には、多くのWEBサイトで必要となる「ヘッダー」や「メニュー」、「サイドバー」「ボタン」「入力フォーム」などパーツごとに用意されています。

Webサイト制作の効率化が図れるツール（仕組み）として、Web業界でもよく使われています。

なぜCSSフレームワークを使うのか？

簡単に言えば、フレームワークがデザインに関するあれこれを解決してくれるからです。
具体的には、以下のメリットを得ることができます。

デザインのコーディングをゼロから始める必要がなく、既存のデザインパターンを使用できる
異なるページ間でも、デザイン（スタイル）は一貫性を維持できる
フレームワークを使用して素早く骨組みを用意でき、デザインにかける時間を多く取ることができる

代表的なCSSフレームワーク

Qiita Inc. – 【CSS】あなたが普段使っているCSSフレームワークはなんですか？

UIkit（ユーアイキット）

シンプルかつ軽量で使いやすいCSSフレームワーク。
モジュラー設計を採用しており、必要な機能だけを選んで使用できるため、不要なコードを含めずにプロジェクトを簡潔に保つことができる。

レスポンシブデザインに対応しており、グリッド分けや要素が自動的に調整され、素組でも使いやすいレスポンシブなデザインを作成できる。

コンポーネントが豊富で、ボタン、ナビゲーション、フォーム、モーダル、スライダーなど、多くの一般的な要素を簡単に組み込むことができます。

Adventures Inc. – Bootstrapより良いかも?　CSSフレームワークUIkitとは

UIkitでは、フレームワークとして一貫性を保つために、「uk-」をつけることがルール

HTMLでの記述例

<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href="#"></a>
        <div class="uk-accordion-content"></div>
    </li>
</ul>

https://getuikit.com/docs/accordion

UIkitをダウンロードしてみよう

UIkit

今後使用するツール

UIkit
Dreamweaver（Adobe）
ブラウザ

作業の始め方

PC内に作業用フォルダを新規追加
- 作業フォルダはデスクトップ以外が望ましい
  参考記事）https://enjoy.sso.biglobe.ne.jp/archives/desktop_file/
ダウンロードしてきた「UIkit」のZipファイルを解凍
解凍した中身「css」「js」フォルダを1.の作業用フォルダに移動
Dreamweaverを開いて、「サイト」-「新規サイト」をクリック。
- サイト名に任意の名称を入力し、ローカルサイトフォルダで1.の作業用フォルダを選択。
- 保存ボタンを押すことで、巣作りは完了（Dreamweaverが作業場所を覚えました！）
⌘+Nで新規ドキュメントを作成
- ドキュメント形式はHTML。
- ドキュメントタイプはHTML5。
- ファイル作成後、index.htmlと名前を付けて保存。
  保存先には4.で定義した作業用フォルダを指定。
index.htmlのheadタグ内に必要な記述を書き足す。
- 公式ドキュメント
  - <link rel=”stylesheet” href=”css/uikit.min.css” />
    <script src=”js/uikit.min.js”></script>
    <script src=”js/uikit-icons.min.js”></script>

補足

作業用フォルダの移動は注意

手順4.でDreamweaverに作業場所を覚えてもらった後、フォルダの位置を変えたりしてしまうと、Dreamweaverが混乱してしまうので、注意が必要です。

なぜ、headタグ内に追加記述が必要なのか

headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。ページのタイトルなど、実際にページに表示されることはないものの、ページを定義するために重要なことを記述するタグとなります。

今回でいえば、ダウンロードしてきたUIkitの「css」と「js」を作業用フォルダに移動はしましたが、そのままでは使用できない状態です。（ただそこに存在している状態…）

ですので、手順6.の記述を追記することで、初めてUIkitのフレームワークを使用できる状態にセットアップ完了となります。

他にもheadタグ内に記述が必要な例といえば、

文字のエンコード	`<meta charset="utf-8" />` どの言語で書かれたページなのかを指定するもの。日本語のサイトであれば、上記を指定。
タイトルタグ	`<title>そのページのタイトル</title>` 検索結果やブラウザのタブに表示されるテキスト。
メタディスクリプション	`<meta name="description" content="ページの内容を表す文章" />` 検索結果のタイトル下に表示されるテキスト。ユーザーのクリック率を高めるために重要。ただし、メタデスクリプションを書いたからと言って、検索順位の上昇効果があるわけではない。一般ユーザーの為に書こう。
CSSやJavaScriptファイルの読み込み	`<link rel="stylesheet" href="CSSファイルのURL" />` `<script src="JavaScriptファイルのURL"></script>` 外部のスタイルシート（CSS）やスクリプトを読み込むためのもの。