読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

配列

PHP

switch…case…break…default - 条件を並べる

PHP

do…while - 先に処理してから繰り返す

PHP

while - その間繰り返す

PHP

for - 繰り返し

PHP

if - 判断

PHP

はじめてのPHPプログラミング

PHP

基本的な書き方 P.54 基本的なプログラムとコメント PHPの動作チェック P.55 はじめてのプログラム P.58 HTML内に記述 P.59 You Have cats. PHPのエラー P.61 エラーの表示内容 エラーの表示内容 エラーレベル(エラーの深度を表す) エラーの内容(起き…

はじめてのプログラミング

PHP

プログラムを動かす場所 P.37 リモートホスト(Remoto Host) ローカルホスト(Local Host) PHPでの開発はローカルホストで行う PHP実行環境を整える P.40 公開フォルダーの確認 P.46 http://localhost/フォルダー名/ファイル名 公開の準備 P.52 PHPプログ…

コンピュータとプログラムの関係

PHP

プログラムの役割 P.21 コンピュータは膨大な計算が得意で、曖昧な命令を理解することが苦手 コンピュータに命令を出すためにプログラミングが必要 プログラムとは、やりたいことをブレークダウンすること プログラミングの流れ P.24 アルゴリズムとは、問題…

Webアプリケーション

PHP

Webアプリケーションってなに? P.3 Webアプリケーションとは、インターネットを通じて利用できる、ある機能をもったWebサイトのこと Webアプリケーションは、ブラウザで表示(閲覧)・操作する Webアプリケーションを分解 P.6 Webアプリケーションは、さま…

SQLを使う - SELECT文

SELECT文の基本機能 SELECT文は、データベースからデータを抽出するコマンドです 射影:特定のフィールド(列)だけ取り出すこと 選択:特定のレコード(行)だけを取り出すこと SELECT文の基本構文 テーブルに登録されている全てのレコードを取り出したり、…

SQLを使う - 基本

SQLは何のため? phpMyAdminのマウス操作だけで作ることができるSQLには限界がある PHP+MySQLを使ったWebシステムを構築するには、SQLの知識が必須 phpMyAdminを利用する phpMyAdminにアクセスする データを取得して表示する localhostでデータベース一覧を…

リレーショナルデータベース

リレーショナルデータベース テーブルと呼ばれる領域にデータを保存していきます リレーショナル型データベースは、RDB(アール・ディー・ビー)とも呼ばれます RDBの構造 RDBは、関連するデータを全てテーブルと呼ばれる2次元の表にデータを格納します テー…

データベースとは

データーベース(database, DB) 情報を管理するためのシステム(データベース管理システム DataBase Management System : DBMS) 特定のテーマに沿ったデータを集めて管理し、容易に検索・抽出などの再利用をできるようにしたもの 単位としての「データベー…

ファイルにデータを書き込む

PHP

ファイルにデータを書き込もう (1) is_writable()

入力エラーチェック

PHP

入力エラーチェック ≪index.php≫

セッション情報

PHP

セッション情報とは サーバー側にデータを保存する仕組みです クライアントを区別するためにランダムなIDを割り当て、そのIDに対応する保存域をサーバー側に作成します セッション情報は、プログラムの実行環境やライブラリによって提供されます Cookieは、…

入力された値の変数と型

PHP

型 intval関数(文字列を整数に変換する)- 小数点以下は切り捨て ユーザーが入力したデータは「文字列型」です 「文字列型」のまま四則演算ができないため「整数型」に変換します 《sum.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>変数と型</title> </head> <body> <form action="result.php" method="post"> <p>数字1 <input type="text" name="val1"></p> <p>数字2 </p></form></body></html>

入力された値を送信→受信

PHP

送信するために必要なこと form要素でmethod属性を記述します method属性には、送信方法を記述します inputされた値を別のページに送信します 入力された値の器に名前をつけて送信します 送信するタイミングをinput要素のtype属性「submit」で、ボタンの表示…

ユーザーとの対話

PHP

ユーザーとの対話 入力フォームに入力されたデータは、「$_GET[ 名称 ]」や「$_POST[ 名称 ]」取得できます 出力 ブラウザに表示 《例1》 変数を{ }で囲む Dreamweaverでは、変数の色にならないため判別しにくくなります 《例2》 文字列と変数を「. ドッ…

PHPでカレンダー

PHP

PHPでカレンダー <html> <head> <meta charset="utf-8"> <title>今月のカレンダー</title> </head> </html>

PHPで日時を扱う

PHP

タイムスタンプとは PHPの日時に関する関数では、「1970年1月1日0時」から経過した秒数で表現する(UNIXタイムスタンプ)を使用します

記事を投稿する

新規投稿 「投稿」→「新規追加」 テキストでは、入力するような内容になっていますが、授業ではすでに用意されているテキストファイル(XMLファイル)を読み込んで使用します。 ツール(インポート) WordPress形式を選択する 「ファイルを選択」ボタンを押…

WordPressの基本設定

サイト名を確認する 「ダッシュボード」→「設定」→「一般」 サイトの説明文を入力する 不要な記事の削除 「投稿」→「投稿一覧」→「Hello world!」 「固定ページ」→「固定ページ一覧」→「サンプルページ」 標準で用意されたカテゴリーの名前を変更する 「投稿…

WordPressとは

WordPressとは WordPress(ワードプレス)は、オープンソースのブログソフトウェアです PHPで開発されており、データベース管理システムとしてMySQLを利用しています 単なるブログではなくCMSとしてもしばしば利用されています 主な特徴 PHPによる動的なペー…

関数

PHP

関数とは 関数とは、「機能単位の処理のひとかたまり」のことで、プログラムは関数の組み合わせによって、構成されています プログラムのソースが長文で複雑になった場合、機能別にいくつかの関数に分割することによって、分かりやすく、修正しやすいプログ…

配列の 追加と削除

PHP

配列に要素を追加 配列に要素を追加したい場合は、array_unshift関数、array_push関数を使います この関数は、配列に要素を追加するとともに、要素が追加された配列の要素数を取得できます array_unshift - 配列の先頭に要素を追加したい場合配列の先頭に要…

連想配列

PHP

連想配列 基本的な配列の場合、配列要素の0番目、1番目・・・と添え字に数値を指定して、各要素の値を代入したり取得していましたが、連想配列を使用すると、添え字の代わりに文字列のキーを使用できます インデックスに名前をつける 中身を連想できるような…

変数のスコープ

PHP

変数のスコープ 変数の宣言方法を変えることにより、変数の有効範囲も変わります これを変数のスコープと呼びます 変数は、「{ }(中括弧)」で囲まれた中で定義をすると、その囲まれた中でのみ有効となります。その外側では、使用することができません 括弧…

配列

PHP

配列(array)とは たくさんの変数を扱うときなど、値をまとめて記憶する 関連したデータを保存しておくための連なった箱 1番目の番号(インデックスまたは添字)は、「0」 配列の宣言と代入 「array関数」を使用して配列の宣言 array関数を使わず、各配列…

ループを抜ける breakとcontinue

PHP

break 繰り返し処理の中で、強制的に繰り返し処理を終了したり、強制的に次の繰り返し処理を行ったりすることができます 繰り返し処理を強制的に終了する場合は、「break;」を使います '; // $iの値(1、2、3)を出力。<br>で改行。 if ( $i === 3 ){ break; } }…

繰り返し - foreach文

PHP

「foreach文」で繰り返し foreach文は、配列の全要素に対してループ処理を行いたい場合に使います 構文には「基本形」と「拡張形」があり、書式は以下になります // 基本形構文 foreach( 配列 as 要素の値を格納する変数 ){ 繰り返したい処理 } // 拡張形構…

繰り返し - for文

PHP

「for文」で繰り返し 1つの処理をX回繰り返す「ループ」という発想(繰り返す回数が決まっている) 例:5日分の日付を表示→1日分の日付表示を5回繰り返す 例:10人分の名簿の印刷→1人分の名簿印刷を10回繰り返す 「for文」で、一定回数の繰り返し処理が…

繰り返し - while文

PHP

while文(while statement)とは 条件がtrueである限り、指定した文を繰り返し処理する while(条件){ 処理; … } 《繰り返し表示する》 ' . "\n"; $i++; } echo '商品は以上です。'; 「商品が存在する」という条件がfalseになるまで、商品を表示することを…

関係演算子と条件分岐(if文、switch文)

PHP

条件(condition)の仕組みを知る 場合に応じた処理をおこなう 真(true)・偽(false)という概念のどちらかで評価されるものを、PHPでは「条件」と呼びます。 関係演算子 条件をつくるために使う「関係演算子(relational operator)」 演算子 式がtrueと…

式と演算子

PHP

式(expression) PHPの式の多くは、 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり…

変数と定数

PHP

変数(variable)とは 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り返し使う言葉は「変数」として使う 1回だけ書いてコピーするという…

PHPのコードを記述

PHP

PHPコード記述 テキストエディターを使用して記述 新規ドキュメント作成 拡張子:.php 文字コード:Unicode(UTF-8) 改行コード:LF(Line Feed) 記述のルール 「」の間に記述する 文字列は「シングルクォート」で囲むことにします 命令文の末尾はセミコロン…

PHPとは何か?

PHP

プログラミング言語 コンピュータや機械を動かすための命令(コマンドといいます)群でコンピュータで何かを実行(処理)するための言語」です オブジェクト指向 オブジェクト指向とは、システムの設計に関する考え方、プログラミング手法を表現したものです…

PHPを学習

PHP

Progra! progate prog-8.com CODEPREP codeprep.jp paiza paiza.jp ドットインストール

XAMPPのWebサーバー構築(Windows)

XAMPPのダウンロード XAMPP最新バージョン 5.6.28 PC環境によっては、下位バージョンを使用します インストール インストーラーに従ってインストールする 最低限必要なものだけを選択する Cドライブ直下を選択する 不要なオプションはチェックを外す インス…

レスポンシブWebデザイン - 演習(2)実践

レスポンシブWebデザイン - 演習(2)実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーン画像の設定</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="style4.css"> </head> <body> <h1><img src="img/logo.svg" alt=""></h1> </body></html>

レスポンシブWebデザイン - 演習(2)

レスポンシブWebデザイン - 演習(2) ブラウザの高さを取得する単位「vh(viewport height)」 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html, body { margin:0; padding:0; } .box { box-sizing: border-box; } .box…</meta></meta></head></html>

Googleカスタム検索エンジン

API

Googleカスタム検索エンジン 検索するサイトを登録する カスタマイズ

Web Fonts - Font Awesomeでアイコンを表示

Font Awesome fontawesome.io BootstrapCDN <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> アイコンを表示する <div class="snsmenu"> <ul> <li><a href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a></li> <li><a href="#"></a></li></ul></div></link>

レスポンシブWebデザイン - 演習(1)解答例

レスポンシブWebデザイン - 演習(1)解答例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン 演習(1)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">…</link></meta></meta></head></html>

レスポンシブWebデザイン - 演習(1)

レスポンシブWebデザイン - 演習(1) 設計図の作成 物作りは設計図の用意から始まります。機能や構造、配置などを明確にしていくことで、必要な部品、材料、工数、工程、時間など、さまざまな情報が出てきます。 画像「768 x 512」 また、設計図を用意する…

レスポンシブWebデザインの実装

モバイルサイト設計上での考え方 モバイルサイト設計上での考え方 - A List Apart 日本語サイト レスポンシブWebデザインの画面設計 コンテンツファースト 画面に必要なコンテンツ部品(コンポーネント)の洗い出しをする 情報の重要度を考慮してコンポーネ…

CSS3で作るホバーアニメーション(2)

キャプションを表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>transitonによるアニメーション</title> <style> /* reset ------------------------------------*/ html, body, h1, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { b…</meta></head></html>

CSS3で作るホバーアニメーション(1)

CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色が変化するアニメーション</title> <style> html,body, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul {</meta></head></html>…