STUDY Coding
Required HTML 基礎編
■ 1時間目 / このサイトについて
このサイトは HTML スイスイ〜 のサブ・テキストとして作られた 「STUDY Coding」 Step_001 ページです.
最初に [Download Files] の▼"Step_001_Download" から"説明.PDF" をダウンロードしてください. このPDFファイルにサイトの使い方が書かれています.
このレッスンで使用するブラウザは Google Chrome / Safari / Firefox / Opera Browser などです.
下のようなボックス ↓ では, 記述されているテキストを |■Copy■| ボタンを押すことでコピーできます. また, カーソルがこのエリアをホバーすると赤色のプレビュー・ボタンが現れるので, このボタンを押してソースの結果を見ることができます. さらに, 結果ページの下にも |■Copy■| ボタンが現れるので, 結果内容の文字列をコピーすることもできます (＊注:Google Chrome は不可).
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル(基本HTML)</title>
<meta name="description"content="ディスクリプション">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<link rel="stylesheet"href="カスケーディング・スタイル・シート のリンク.css">
<script src="ジャバスクリプトのリンク.js"></script>
</head>
<body>
<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<article>
<h1>ヘディング - 1(heading / タイトル)</h1>
<section>
<h2>見出し２</h2>
<p>コンテンツの説明</p>
</section>
</article>
<!-- コメント・アウト -->
<footer>フッター</footer>
</body>
</html>
下のボックス ↓ は「Result-V Coder」(リザルト-V コーダー) です. Result ボタンを押すとソースの結果が右に表示されます. また, Download ボタンを押すと, 記述してあるソースをテキストとしてダウンロードすることができます. ダウンロードしたファイルの文字コードは utf-8 になっていますから, 自分の HTML 書類として使用できます.
下のボックス ↓ は「Result-X Coder」(リザルト-X コーダー) です. Result ボタンを押すとソースの結果が右に表示されます. また, Download ボタンを押すと, 記述してあるソースをテキストとしてダウンロードすることができます. Result-V Coder と同様に, ダウンロードしたファイルの文字コードは utf-8 になっています. Result-V Coder と Result-X Coder はセットで "Sample_Coding_A" → "Application" → "▶︎ 007_Result_Coder_VX" からダウンロードすることができます. インターネットが off-line のときに使用してください.
■ 2時間目 / Illustrator Today
Figma_LOGO を描いてみよう
1 : Do_It_Figma_01.ai というイラストレーターの書類を作成する. 2 : 直系 40mm の円を作る ( カラーは#aaffaa). 3 : 円をコピーして合計5つ作る. 4 : ツールを取り替えて, 幅 20mm / 高さ 40mm の長方形を作る. 5 : 長方形を円に重ねてパスファインダーで合体させる. 6 : 幅 20mm / 高さ 20mm の正方形を作る. 7 : 正方形を左下の円に重ねて合体させる. 8 : オブジェクトのカラーを任意に設定する. 9 : メニュー → [オブジェクト] → "アートボード" を開いて, アート・ボードの大きさを変更する. 10 : SVGファイルとして書き出す.
■ 3時間目 / 本日のPhotoshop
この素材に含まれているカラーをすべて, RGB形式で書き出してみましょう.
背景色: RGB color code #ffffff / RGB(255, 255, 255) / カラー 1: RGB color code # / RGB(255, 255, 255) カラー 2: RGB color code # カラー 3: RGB color code # カラー 4: RGB color code # カラー 5: RGB color code #
それぞれのカラーを部品として分割し,
別々のレイヤーに置き換えてみましょう.
LE_00.png からではなく, Figma_LOGO.svg をイラストレーターで開いて部品を一つひとつ分けて取り込むと上手く出来ます.
レイヤー 5: レイヤー 4: レイヤー 3: レイヤー 2: レイヤー 1: 背景:白
Photoshop のメニュー [ファイル] → 生成 → "画像アセット" を利用して, 5種類の ○○○.jpg ファイルを作成しましょう.
■ 4時間目 / Let's Coding
UTF-8 フォーマットのテキスト・ファイルを用意する
ダウンロード →▷▶︎ 001_Coding
HTMLファイルのファイル名は 001_Coding.html とする.
5枚の jpgファイル を配置する html code を記述.
CSSファイルのファイル名は 001_Coding.css とする.
5枚の jpgファイル を配置する css code を記述.
■ 5時間目 / 仕上がりの確認
001_Coding_folder を作成する
001_Coding_folder の階層
001_Coding_folder ├001_Coding.html ├001_Coding.css └001_Coding_img_folder ├○○○.jpg ├○○○.jpg ├○○○.jpg ├○○○.jpg └○○○.jpg
Particle を入れる (Canvas ベースの plug-in / 印象的なアニメーション効果) Figma ロゴの背景に合うもの Snippet を使用する (英語の断片: CSS / JavaScript でソース・コードを作成できる) ボタンとして使用
Wireframe(ワイヤーフレーム)とは, コーディング作業の前段階としてレイアウトを決定するために作成されるラフ・デザインのことです. コンテンツの配置や動きを組み立てる設計図として使用します.
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<style>
html{max-width:999px;
margin:0 auto;
color:#456789;}
hr{height:120px;background-color:#f8f8f8;}
h1{font-size:20px;
margin:10px;
text-align:center;}
h2{font-size:16px;
margin:0 10px;}
p{font-size:14px;
margin:10px;}
footer{text-align:center;}
.トップ{margin-top:0 auto;}
.イメージ{width:100%;}
@media screen and (min-width:800px)
{.カラム{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.ボックス{padding:0;
margin:8px;
width:calc(33.3% - 20px);
border:solid 1px #456789;}}
@media screen and (min-width:500px) and (max-width:799px)
{.カラム{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.ボックス{padding:0;
margin:8px;
width:calc(50% - 20px);
border:solid 1px #456789;}}
@media screen and (max-width:499px)
{.カラム{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.ボックス{padding:0;
margin:8px;
width:calc(100% - 20px);
border:solid 1px #456789;}}
</style>
<div class="トップ"><img class="イメージ"src="00_top.jpg"></div>
<h1>■□□□□ <h1> ■□□□□</h1>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!--------A--------><div class="カラム">
<!----B----><div class="ボックス">
<img class="イメージ"src="01.png">
<h2>●○○○○ <h2> ●○○○○</h2>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!----/B----></div>
<!----C----><div class="ボックス">
<img class="イメージ"src="02.png">
<h2>●○○○○ <h2> ●○○○○</h2>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!----/C----></div>
<!----D----><div class="ボックス">
<img class="イメージ"src="03.png">
<h2>●○○○○ <h2> ●○○○○</h2>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!----/D----></div>
<!----E----><div class="ボックス">
<img class="イメージ"src="04.png">
<h2>●○○○○ <h2> ●○○○○</h2>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!----/E----></div>
<!----F----><div class="ボックス">
<img class="イメージ"src="05.png">
<h2>●○○○○ <h2> ●○○○○</h2>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!----/F----></div>
<!----G----><div class="ボックス">
<img class="イメージ"src="06.png">
<h2>●○○○○ <h2> ●○○○○</h2>
<p>文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝文字＝＝＝＝＝＝＝＝</p>
<!----/G----></div>
<!--------/A--------></div>
<hr>
<footer style="margin-top:-74;margin-bottom:200;"><small>Copyright © アップロードハウス 2000</small></footer>
</html>
