月: 2025年10月

学科 サーバーサイドプログラム基礎【オンライン】

-本日のアジェンダ-

1限目
学科 サーバーサイドプログラム基礎
PHP について

2限目
学科 サーバーサイドプログラム基礎
WordPressのPHPでの役割について

3限目
学科 サーバーサイドプログラム基礎
FTPについて

4限目
学科 サーバーサイドプログラム基礎
課題作成

5限目
学科 サーバーサイドプログラム基礎
課題作成

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：サーバアップする方法
内容1：サーバーサイドプログラムについて(WordPressの説明)
内容2：FTPについて
内容3：
課題：なし

【注釈】
・サーバーサイドプログラムやレンタルサーバーの概要を説明します。
・サーバーサイドプログラムは、難易度が高いですが、WordPressのテーマを作成する仕事をする場合には必要になる旨を説明してください。

本日のテーマ

WordPressはphpで出来ています。

【資料】

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「WordPress活用法の教科書⑤.pdf」　
「WordPress活用法の教科書⑥.pdf」

【動画】「WordPress活用法の教科書⑤.pdf」　

【動画】「WordPress活用法の教科書⑥.pdf」

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（PC側）で動くものがあります。違いについて理解しましょう。

参考サイト

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

ワンポイントアドバイス

PHPはHTMLの延長と考えて、WordPressの利用でよく見かける技術として今後に備えておきましょう。まずは、しっかりとHTML・CSSを理解しましょう。
PHPのファイルにHTMLを記述できるわけですから 必要性と使いどころをまずは理解して、一つ一つ理解してい くのが良いでしょう。

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 HTML/CSS基礎⑥

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑥
FTPについて

2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

3限目
学科 HTML/CSS基礎⑥
Webページ制作実践

4限目
学科 HTML/CSS基礎⑥
Webページ制作実践

5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・FTPの説明を実施してパスワード収集を行ってください。
・実際のFTP訓練は「実技 WEBページ制作実習①」で実施予定です。
・収集したパスワードは、サーバー管理者に連絡してパスワード設定を実施してもらってください。
・学科 HTML/CSS基礎⑤で学んだ内容を実践します。
・トレーニング-3とトレーニング-4がありますが、実践するのは、どちらか一方でも大丈夫です。各自で状況をみながら判断してもらってください。
・本日でPC版のWebページ作成のスキル習得を完了させる予定で進めてください。

本日のテーマ

CSSの記述をしましょう

FTPについて

FTP（File Transfer Protocol）とは、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つです。

WEBサイトを公開するためには、作成したデータ（HTMLファイルやCSSファイル、画像など）をWEBサーバーに転送する必要があります。FTPソフトを使ってFTPサーバに接続することでファイルを転送することができます。

FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。

【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。

【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。

【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。

訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。

パスワードは個人のものを設定します。以下のルールでパスワードを設定してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。

Webページ制作実践③-1

マージン、パディング、バックグランド、レイアウト系のそれぞれのプロパティを使い、レイアウトを調整しながらhtmlの親と子（入れ子）の関係を理解しましょう。

①htmlとcssファイルの準備

<!doctype html>
<html>
    <head>
　　　　　<meta>〜〜〜
　　　　　<meta>〜〜〜
　　　　　<title>〜〜〜</title>
　　　　　<link href="reset.css" rel="stylesheet">
　　　　　<link href="style.css" rel="stylesheet">
    </head>
    <body>
　　　　<div class="oya_a">
　　　　　　<div class="kodomo_a1"></div>
          <div class="kodomo_a2"></div>
　　　　</div>
　　　　<div class="oya_b">
　　　　　　<div class="kodomo_b"></div>
　　　　</div>
　　　　<div class="oya_c">
　　　　　　<div class="kodomo_c"></div>
　　　　</div>
    </body>
</html>

②親子（入れ子）の関係をブラウザで確認する

.oya_a {
    width: 800px;
    height: 800px;
    background: red;
}

.kodomo_a1 {
    width: 300px;
    height: 300px;
    background: blue;
}

.kodomo_a2 {
    width: 400px;
    height: 400px;
    background: green;
}

このようにbackgroundプロパティで背景に仮色を入れると、ブラウザでhtmlを表示した時にレイアウトが確認しやすいです。

③マージンとパディングを使ってレイアウトの位置を調整してみましょう

.oya_a {
    width: 800px;
    height: 800px;
    background: red;
　　　padding: 0 0 0 150px;
}

.kodomo_a1 {
    width: 300px;
    height: 300px;
    background: blue;
    margin: 0 auto;
}

.kodomo_a2 {
    width: 400px;
    height: 400px;
    background: green;
    margin: 50px 0 0 0;
}

Webページ制作実践③-2

横並びのレイアウトを組んでみる


htmlは基本的に縦にレイアウトが積まれていきますが、cssのプロパティを使って横並びにする事ができます。参考元
今回はcssのflexboxを使って、横並びのレイアウトを作ってみましょう

<!doctype html>
<html>
    <head>
　　　　　<meta>〜〜〜
　　　　　<meta>〜〜〜
　　　　　<title>〜〜〜</title>
        <link href="style.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="oya">
           <div class="kodomo_a"></div>
           <div class="kodomo_b"></div>
           <div class="kodomo_c"></div>
        </div>
    </body>
</html>
.oya {
    display: flex;
}

.kodomo_a{
  width: 200px;
  height: 200px;
  background: red;
}

.kodomo_b{
  width: 200px;
  height: 200px;
  background: blue;
}

.kodomo_c{
  width: 200px;
  height: 200px;
  background: green;
}

横積みのレイアウトを組むことが出来れば、ワイヤーフレームをhtmlとcssで作成する事ができます。

トレーニング-３

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「training-3.zip」　

トレーニング-４

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「training-4.zip」　

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）