配列の要素をimpload関数を使って1つの文字列に変換する方法について解説します。 この記事のポイント implode関数で配列の要素を任意の文字で区切った1つの文字列に変換する 連想配列についても要素のみ文字列に変換されるため、添字（キー）は文字列に含まれない implode関数は多次元配列には対応していない 配列を1つの文字列にする implode関数を使うと、配列の値を1つの文字列に変換することができます。 以下の例では配列$idsに入っている4つの値を1つの文字列に変換して、URLパラメータとして連結します。 PHP コード例 <?php // 文字列に変化する配列 $ids = array( 12345, 22345, 33445, 55123 ); // 変換の実行 $api_url = 'https://api.gray-code.com/message/?ids=' .

WEBサーバーに今まで作成したファイルをアップロードして、WEBサイトを公開します。 この記事のポイント サーバーに作成したファイルをアップロードする 公開したサイトをブラウザで確認する 前回は無料で利用できるレンタルサーバー「エックスフリー」のアカウントを作成して、初期設定まで完了しました。 当ワークショップ最終回となる今回は、以下の手順の「(4)WEBサイトのファイルをサーバーにアップロード（公開）」から進めていきます。 (1)エックスフリーのアカウント作成 (2)エックスフリーの管理画面にログイン (3)初期設定 (4)WEBサイトのファイルをサーバーにアップロード（公開） (5)ドメインを確認してブラウザ表示 進めるにあたって、作成したアカウントでエックスフリーにログインしてください。 エックスフリー サイトのファイルをサーバーにアップロードする 今まで作成したファイルをサーバーに

今回はサーバーについての解説と、無料で利用できるサーバーの契約を進めていきます。 この記事のポイント WEBサイトを公開するために必要なサーバーを用意する 無料のレンタルサーバー「エックスフリー」のアカウントを作成する WEBを公開するためにサーバーを用意する 前回で、本ワークショップで作成するWEBサイトのHTMLとCSSが完成しました。 あとはサーバーにファイルを設置して、作成したWEBサイトを公開するだけです。 そこで今回はサーバーについての解説を行いながら、実際に無料で利用できるサーバーへの登録を進めていきます。 サーバーの種類 WEBサイトを公開するためのサーバー（WEBサーバー）は、各社から提供されているサーバーのサービスを利用するか、または自前で用意して運用します。 以下に、サービスのタイプ別にそれぞれの特徴を紹介していきます。 なお、リストは下に進むにつれて専門知識が必要に

今回はお問い合わせページのCSS（スタイルシート）を書いていきます。 この記事のポイント お問い合わせページが完成する 今回で全3ページがほぼ完成 お問い合わせページのCSSをコーディングする 前回はお問い合わせページのHTMLファイル「contact.html」を作成して、HTMLのみコーディングしてきました。 まだCSSを書いていない状態でブラウザに表示してみると、以下のような表示になります。 ブラウザの表示例 お知らせページを作ったときと同様に、ヘッダーとフッターは全てのページで共通になるためすでにCSSまで出来ている状態です。 そして今回はその間になるコンテンツ部分に対してCSSを書いていきます。 CSSをコーディングするエリア CSSは今までと同じ「style.css」の中に書いていきます。 アウトラインのCSSをコーディング まずはコンテンツの横幅と左右余白を指定して、アウトラ

今回は作成した3ページにそれぞれリンクを設定して、ページ間の行き来ができるように設定していきます。 この記事のポイント サイト内で移動できるようにリンクを設定する 左上の「PROFILE」はトップページにリンク 各ページのリンクを設定してページを繋ぐ 前回までで、全3ページのHTMLとCSSのコーディングが完了しました。 それぞれのページをブラウザで表示すると、見た目は全てデザイン案の通りになっていると思います。 しかしまだa要素のリンクを設定していないため、3ページは全て孤立したページのままになっています。 そこで今回は仕上げとして、これらの3つのページにそれぞれリンクを設定してページ間の移動ができるようにしていきます。 リンクの設定は全てa要素のhref属性に指定してきます。 トップページのリンク設定 まずはトップページのリンクを設定していきましょう。 トップページでは以下のa要素に対

今回からお問い合わせページを作成していきます。新しく「contact.html」を作成して、 お問い合わせページのHTMLをコーディングしていきましょう。 この記事のポイント お知らせページのHTMLファイルをベースにして作成する a要素のリンクはWEBサイトのページだけじゃなく「メールアドレス」や「電話番号」を設定することもできる HTMLファイルを作成する 前回まででトップページとお知らせページが完成しました。 今回からは最後の3ページ目となる「お問い合わせ」ページを作成していきます。 今回から作成するお問い合わせページ まずはお問い合わせページのHTMLファイルを作成します。 今回はお知らせページの「information.html」をベースにして作成するため、このファイルを複製（コピー＆ペースト）して「contact.html」というファイル名を作成してください。 「contact

今回はお知らせページのCSS（スタイルシート）を書いていきます。 この記事のポイント 今回でお知らせページは完成する border-radiusプロパティは指定する値の数で丸める角の位置を指定できる セレクタをうまく使うと同じCSSを複数の箇所に適用することができる お知らせ一覧のCSSをコーディングする 前回はお知らせページのHTML「information.html」を作成し、HTMLのみコーディングしてきました。 今はブラウザで表示してみると、以下のような表示になります。 ブラウザの表示例 ヘッダーとフッターについてはトップページと共通のためすでにCSSも出来ていますが、その間にあるコンテンツについてはCSSを書いていく必要があります。 CSSを書く場所についてはトップページのCSSと同じ「style.css」に書いていきます。 CSSをコーディングするエリア アウトラインのCSSを

今回からお知らせページを作成していきます。新しく「information.html」を作成して、お知らせページのHTMLをコーディングしていきましょう。 この記事のポイント お知らせコンテンツはarticle要素を使う ヘッダー、フッターはトップページと共通 「お問い合わせはこちら」ボタンもトップページと共通 HTMLファイルを作成する 前回までで、トップページが完成しました。 今回からは続いて2ページ目の「お知らせ」ページを作成していきます。 今回から作成するお知らせページ まずはトップページのときと同様にHTMLファイルを作成します。 ただし、今回はトップページの「index.html」をベースに作成していくため、このファイルを複製（コピー＆ペースト）して「information.html」というファイル名を作成してください。 「information.html」を作成 お知らせページ

トップページの最下部にあるフッターのCSS（スタイルシート）を書いていきます。 この記事のポイント フッター部分のCSSをコーディングする 今回でトップページが完成 フッターのCSSをコーディングする 前回までトップページのフッター以外のCSSをコーディングしてきました。 今回はトップページの最下部にあるフッターのCSSをコーディングしていきましょう。 CSSをコーディングするエリア CSSファイルは前回と同様に「style.css」を使用していきます。 テキストを中央揃えにする 最後に残っていたフッターですが、ページの中で一番シンプルです。 今回はHTMLの追加は必要ないため、「style.css」を開いてコンテンツ2の下に赤字のコードを追記してください。 style.css @charset "UTF-8"; body { font-family: 'Noto Sans JP', sa

前回に引き続き、コンテンツ2のCSS（スタイルシート）を書いていきます。 この記事のポイント コンテンツ2をデザイン案と同じ表示になるように整える text-alignプロパティで文字寄せを指定する box-shadowで影をつける コンテンツ2のCSSをコーディングする 前回はヘッダー部分の下にあるコンテンツ1部分についてCSSのコーディングをしてきました。 今回は引き続き、その下に移動して「コンテンツ2」のCSSをコーディングしていきましょう。 CSSをコーディングするエリア CSSファイルは前回と同様に「style.css」を使用していきます。 幅と左右の余白を設定する まずは前回までと同様に、コンテンツ2の横幅と余白を設定して、先にアウトラインを作成していきます。 横幅と左右の余白を設定する コンテンツ2も左右の余白が自動で均一になるようにdiv要素で囲みます。 「index.ht

今回はヘッダーのすぐ下にあるコンテンツ1のCSS（スタイルシート）を書いていきます。 この記事のポイント コンテンツ1をデザイン案と同じ表示になるように整える displayプロパティでフレックスボックスを使って横並びのレイアウトを作る フォントサイズの単位は「rem」を使用する コンテンツ1のCSSをコーディングする 前回はヘッダー部分のCSSをコーディングしてきました。 今回は引き続き、ヘッダーの下にある「コンテンツ1」のCSSをコーディングしていきます。 CSSをコーディングするエリア CSSファイルは引き続き「style.css」を使用します。 それでは早速コーディングしていきましょう。 幅と左右の余白を設定する まずはヘッダーのときと同様に、コンテンツ1の横幅と余白、そして背景色を設定してアウトラインを先に作成します。 横幅と左右の余白を設定する コンテンツ1でも左右の余白が均一

今回はヘッダーのCSS（スタイルシート）を書いていきます。 この記事のポイント ヘッダーをデザイン案と同じ表示になるように整える floatプロパティを使ってレイアウトを調整する ヘッダーのCSSをコーディングする 前回はリセットCSS「reset.css」と、フォントの指定を「style.css」に書いてきました。 ここまではCSSをコーディングする前準備でした。 今回はヘッダー部分のCSSを作成していきます。 ヘッダーとフッターはトップページ以外のページでも表示するため、1度コーディングしたら全てのページで使うことができます。 もしCSSについての基礎を復習したい方は「CSS（スタイルシート）の基礎」をご覧ください。 ヘッダーの幅と左右の余白を設定する まずはヘッダーの横幅と余白、そして背景色を指定していきます。 ヘッダーの横幅と左右の余白 左右の余白を自動で均一にするために、ここで新

今回からはCSS（スタイルシート）を使って、前回までに作成してきたトップページの見た目をデザイン案に近づけていきます。 この記事のポイント リセットCSSを適用して、ブラウザごとのデフォルトCSSを一旦リセットする WEBフォント「Noto Sans JP」を適用する CSSファイルを作る 前回まではトップページのHTMLをコーディングしてきました。 ページの骨組みができましたが、ブラウザで表示するとデザイン案とは全く別もののページが表示されると思います。 ChromeのHTML表示例 そこで、今回からはCSS（スタイルシート）で見た目を整えていきます。 CSSについての基礎を復習したい方は「CSS（スタイルシート）の基礎」をご覧ください。 リセットCSSを作る まずはprofileフォルダ内にリセットCSS「reset.css」を作成してください。 CSSファイルを作成 このリセットCS

Fetch APIによるAjax通信において、レスポンスデータの送信元を確認する方法について解説します。 この記事のポイント Fetch APIのレスポンス送信元を確認するときはResponseオブジェクトのurlプロパティを参照する urlプロパティをURLオブジェクトに変換するとURLの確認をするときに便利 Fetch APIで受け取ったレスポンスの送信元URLを取得する Fetch APIのレスポンス送信元を確認したいときは、レスポンスで受け取ったデータ入っているResponseオブジェクトのurlプロパティを参照することで確認することができます。 JS コード例 fetch('/text/test.json') .then(res => { console.log(res.url); }) .then(data => { console.log(data); }); 例えば通信先の

Base64形式のデータをFileオブジェクトに変換して、1つのファイルとして扱えるようにする方法について解説します。 この記事のポイント Base64形式で受け取ったファイルは一度バイナリデータに変換する Fileオブジェクトのコンストラクタにバイナリデータとファイル名を指定してファイルを作成する JavaScriptがBase64形式で受け取ったファイルはそのままでは通常のテキストですが、Fileオブジェクトに変換することで1つのファイルとして扱うことができるようになります。 以下の例では、変数file_dataに入ったBase64形式のファイルをatobメソッドを使ってバイナリ化し、続いてバイナリデータに変換して、最終的にFileオブジェクトでファイルのオブジェクトを作成します。 このコードを使ったサンプルはこちら。 上記のサンプルページではファイルを選択すると選択したファイルを一旦

今回は、前回作成した「index.html」にトップページのHTMLをコーディングしていきます。 この記事のポイント トップページのコンテンツをグループ単位で分けて考える HTMLを作ってページの骨格を作る トップページの骨組みを作る 前回はHTMLの宣言と、html要素、head要素、body要素を書きました。 ここまでは「HTMLのお約束」のコードで、どんなページをコーディングするときも必ず必要になります。 そして今回はbody要素の中にトップページのコンテンツのHTMLを書いていきます。 前回イメージしたトップページの4つのグループを頭に入れながら、コーディングしていきましょう。 トップページの構造のイメージ 今回ページをコーディングしていくにあたって、以下のキツネの画像「fox.png」を使用します。 あらかじめこちらからダウンロードしてください（※リンクをクリックするとダウンロー

今回はトップページのHTMLコーディングを始めていきます。HTMLを書いていくにあたって、トップページの構造をイメージしながら、実際にHTMLファイルを作成していきます。 この記事のポイント WEBサイト全体のページ構成と確認する トップページのデザインからHTMLの大まかな構造をイメージする HTMLファイルを作成して、HTMLの宣言文を書く WEBサイトのページ構成を考える 今回からいよいよHTMLのコーディングに入っていきます。 まずはWEBサイトの全体の構成を改めて確認しましょう。 今回作るWEBサイトは次の3ページ構成です。 WEBサイトのページ構成 トップページ、お知らせページ、お問い合わせページの3ページなので、最終的には3つのHTMLファイルを作成します。 今回はそのうち、1つ目のトップページのHTMLをコーディングしていきます。 デスクトップなど分かりやすい場所に「pro

Fetch APIによるAjax通信において、通信先から受け取ったレスポンスからHTTPステータスコードを参照することでリクエストの状態を確認する方法について解説します。 この記事のポイント ResponseオブジェクトのstatusプロパティにはHTTPステータスコード（number）が入る ResponseオブジェクトのstatusTextプロパティはHTTPステータスに応じたテキスト（string）が入る Fetch APIで送信したリクエストの結果をHTTPステータスで確認する Fetch APIで指定した通信先へのリクエストの結果については、レスポンスで受け取るResponseオブジェクトのstatusプロパティとstatusTextプロパティを参照することで確認することができます。 statusプロパティにはHTTPステータスコード（number）が入っており、もう1つのsta

今回は作成するWEBサイトのデザインを考えるフェーズです。WEBサイトを「作る目的」や「内容」から考えて、その後にWEBサイトの形に落とし込んでいく流れやツールについて解説していきます。 この記事のポイント 頭の中にアイデアをWEBサイトの形に落とし込む WEBサイトのラフ案作成ツールはAdobe XDがオススメ どんなWEBサイトを作りたいですか？ 今回はHTMLとCSSから少し離れて、どんなWEBサイトを作りたいか考えていくことについて紹介していきます。 （早くコーディングに入りたい方は当ページをスキップしてvol6に進んでもOKです。） こちらのページをご覧いただいている方はHTMLとCSSについて学ぶことを目的としていると思いますが、自分で作って公開したいアイデアを持っている方も多いのではないでしょうか。 その他にも受注制作をしてみたかったり、仕事で必要になったり、目的はそれぞれで

画像ファイル（PNG、JPEG、GIF）をBase64形式に変換して、Fetch APIからJSON形式のデータとしてサーバーへ送信する方法について解説します。 この記事のポイント 画像ファイルはBase64形式に変換してJSON形式のデータにする 画像ファイルをテキストと同様の扱いで送受信できる Fetch APIのAjaxを使って画像をJSON形式で送信する Fetch APIから画像ファイルを送信するときはForm Dataオブジェクトにファイルをセットして送信する方法がありますが、Base64形式に変換してJSON形式のデータとして送信することも可能です。 この方法を使うと、画像ファイルをテキスト形式にしてサーバーと受け渡しができるようになるため扱いが便利になります。 今回は画像ファイル（PNG、JPEG、GIF）を対象としていますが、画像以外の形式のファイルも送信可能です。 以下