iPad検証シリーズ「ipadでホームページが制作できるか」3回目。
最後は「コーディング」の検証をしました。簡単に前回のおさらいからはじめますが、詳細は以下を参照願います。
この記事の内容
前回までのおさらい
検証のための計画を立て、デザインカンプの作成まで行いました。
-
- 制作期間は「30時間」(ブログ更新の時間は含まない)
- 検証条件は「アプリがあるものはアプリを利用」
- 作成するページは「TOPページであるHOMEから4つのページを表示」
① HOME
② ABOUT US
③ SCHEDULE
④ ACCESS
⑤ CONTACT
デザインカンプ完成
最終的にこのような感じに仕上がりました。
コーディング
なぜTextasticを選んだか？
サイトマップはCanveで作成しました。理由は以下の7点です。
- ① コードの自動補完に対応
- ② ピンチイン・ピンチアウトの機能がある
- ③ FTP機能がある
- ④ ローカルかiCloudに保存できる
- ⑤ プレビュー機能がある
- ⑥ テーマとフォントが変更可能
- ⑦ 有償ではあるが買い切り
Textasticの一番のデメリットといえば有償版のみというとこでしょうか。
もしコーディングがはじめての方や、あくまで検証で利用できれば良いということであれば、LiquidLogicという有無償アプリもあります。機能はTextasticとにておりますが無償版は同時に開けるファイル数に上限があり、1MBを超えるファイルは扱えません。また有償版はサブスク契約になります。コード初心者はまずTextasticから利用するのもアリかと思います。
Textasticの簡単な操作説明
操作は6ステップになります。
- ① LocalかiCloud
- ② ファイルを開く
- ③ コードを書く
- ④ プレビュー
- ⑤ 保存
- ⑥ FTP
コーディング
ここからはそれぞれの言語の解説をしますが、それぞれの言語ごとで1コンテンツでは足りないくらいのボリュームですので、ここでは超基本のみの説明をさせて頂きます。もし今回のブログの評価が高ければ、より詳細な解説ページを紹介するかもしれません。
HTML
HTMLとは「Hyper Text Markup Language」の略で、Webページの土台になるファイルを作成する言語です。
ここではこれだけ知っていればWebが作成できる超超基本を紹介します。
①HTMLの文法
HTMLでは「<」と「>」を利用したタグを利用するのが特徴です。
HTMLはタグ、属性、要素の3つで構成されております。
タグにはこんなものがあります。
- <h>：タイトルに使います。
- <p>：文章に使います。
- <img>：画像の挿入に使います。
- <br>：改行します。
<!-- -->： コメントアウト（HTMLに反映されません）
それ以外にもタグはたくさんありますが、必要に応じてこちらのページで検索できます。
②HTMLの全体像
全体がHTMLタグで囲われて、その中にheadタグとbodyタグがあります。
③HTMLの基本コード
④ためしに書いてみよう！
タイトルである<h1>タグ、本文の<p>タグと画像挿入の<img>の3つを利用してコードを書いてみました。右側がブラウザで表示した時の画面になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"z>
<link>
<link href="CSS/style2.css">
</head>
<body>
<h4>こんにちは</h1>
<p>今日は天気が良いので写真を撮りました！</p>
<img src="images/small_sample_01.PNG">
</body>
</html>
こんにちは
CSS
CSSとは「Cascading Style Sheets」の略で、文章の見た目を装飾する言語です。
①CSSの文法
CSSはセレクター、プロパティー、値の3つで構成されております。
- セレクター： どの部分を装飾するか
- プロパティー： 何を変えるのか
- 値： 見た目をどの様に変えるのか
②CSSの基本コード
まず、CSSを作成する際にはHTMLと別ファイルで作成するのが一般的で、HTMLファイルのheadタグに以下のコードを記載します。
<link rel=”stylesheet” href=”CSSファイルの格納先”>
基本的なコードは以下の通りです
- font-size：文字のサイズを指定します。
- line-height：行間を設定します。
- text-align：文章を揃えます。（左右中央揃え）
- color：文字に色をつける
- height：高さを調節
- wight：幅を調節
- /* */ コメントアウト（CSSに反映されません）
③ためしに書いてみよう！
先ほど書いたコードをCSSで装飾します。装飾した場所は本文の<p>タグ内の文章を赤文字に変更し、画像サイズを変更しました。右側がブラウザで表示した時の画面になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"z>
<link rel="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="CSS/style2.css">
</head>
<body><div class=”wrapper”>
<p>今日は天気が良いので写真を撮りました！</p>
<img src=”images/small_sample_01.PNG”>
</div>
</body>
</html>@charset "UTF-8";
p {
color:#f30100;
}
.wrapper img {
height:auto;
width:38vw;
}
こんにちは
今日は天気が良いので写真を撮りました！
レスポンシブ対応
レスポンシブデザインとはモバイルデバイス向けの表記のことです
HTMLファイル内で
HTMLファイルのhead内に<meta name=“viewport”>と記載することで対応します。
viewportは様々なデバイスにおける表示領域のことで、設定しない場合はモバイルデバイスでする際にデスクトップの横幅に合わせて表示されるので、文字が小さくなり見づらくなります。
以下のファイルをそのままコピペでOKです！
CSSファイル内で
CSSファイル内で、@mediaと指定することで、レスポンシブの際の調整ができます
@media (max-width: 600px) { }
ブラウザ開発ツール
PCを利用する場合にはGoogleやSafariなどのブラウザ開発ツールがあり、レスポンシブデザインの確認できます。しかしiPadの場合対応していませんが、以下のアプリにて確認ができます。
PHP
動的にWebページを生成することができるプログラミング言語で以下の特徴があります。
- HTMLで記述したファイルの中に埋め込んで使える
- PHPの処理はWebサーバー側で行われる
①PHPの文法
PHPのファイルを作成し、<?php ?>の間にPHPのコードを記述します。
②PHPの基本コード
③ためしに書いてみよう！
先ほどのコードにPHPで「明日も天気は良いらしいので別の場所の写真を送ります！」を追加してみます。使用したのはprint文です。
ちなみに今回のポートフォリオでPHPを利用したのはアンケートページで入力した項目をSQLへ送る部分のみです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"z>
<link>
<link href="CSS/style2.css">
</head>
<body>
<h4>こんにちは</h1>
<p>今日は天気が良いので写真を撮りました！</p>print ‘明日も天気は良いらしいので別の場所の写真を送ります！’;
?>
<img src="images/small_sample_01.PNG"></body>
</html>
こんにちは
今日は天気が良いので写真を撮りました！
完成・感じたこと/Textastic
最終的にこの様な形に仕上がりました！
Textasticsのアプリでサイトを作成することはできましたが、気になることが3点あったので、ご参考まで。
- lang=”ja”を入力しないと文字化けする
- 画像の拡張子の大文字・小文字注意
- まれにフリーズする
まとめ
今回は「コーディング」の制作を紹介しました。Textasticはちょっと問題ありましたが、何とか制作はできました。総作業時間は計29時間、結構ギリギリです。
[所用時間]
- サイト計画：2時間
- サイトマップ作成：1時間
- デザインカンプ作成：5時間
- コーディング：20時間 ← 今回作業
- WEBに公開：1時間 ← 今回作業
総作業時間：29時間
今回初めてコーディングを体験して見て、本を読むのも重要ですが、簡単なコードで良いのでまずは書いてみて画面に出力できた喜びを実感するなのが何より重要かと思います。
今後も検証シリーズは掲載していきたいと思います！
コメント