＜変数の書き方＞ ①変数は文字列の先頭に「$」を付けて宣言する。 ②変数の名前には英字、数字、「＿（アンダーバー）」が使える ③変数の名前の先頭に数字は使えない （ダメな例） ---------- 【型とは】 変数には「型」というものがある。 型とは「何を中…
【PHPを作るための手順】 ⑴webサーバーソフトをPCへインストール ⑵テキストエディタでPHPファイルを作る ⑶サーバーへファイルを置く ⑷ブラウザでそのファイルを開く ※サーバー →何かを保管しておき、誰かから要望があった場合渡す仕組み（PC内にある） -----…
【PHP言語とは】 サーバー内で動くプログラミング言語 （※サーバーサイド言語とも言われる） ※ブラウザ側ではPHPプログラムを見ることはできない 【できること】 ・ユーザー登録 ・ログイン機能 ・フォームやメールの送信機能 webサービスに必要な機能はPHP…
【鬼練４】 開発ツール（デベロッパーツール）の「console（コンソール）」タブ内に 「彼女：仕事と私どっちを取るのよ！」という文字をに表示させる その次に 「自分：◯◯◯」を表示させる。 ◯◯◯は変数（変数answerとする）にしておき、その変数の中身を表示…
【書き方（復習）】 ⑴head内にscriptタグで囲って書く ⑵body内にscriptタグで囲って書く ⑶head,body内にscriptタグで書いて作ったjsファイルを読み込む →基本は ⑶で書くのが当たり前 【鬼練１】 開発ツール（デベロッパーツール）の「console（コンソール）…
jsファイル ------------------ $(function(){ const MSG_TEXT_MAX = '20文字以内で入力して下さい。'; const MSG_EMPITY ='入力必須です。'; const MSG_EMAIL_TYPE = 'emailの形式ではありません。'; const MSG_TEXTAREA_MAX ='100文字以内で入力してくださ…
【jQuery】 javascriptのライブラリ（工作キット） 簡単に書けるツール ＜jQueryを使う方法＞ ⑴jQueryのファイルを作成 ⑵headタグ内にjQueryコードを記述 ＜jQueryの書き方＞ $(function(){ //処理をここに書く }); 処理⇨$('セレクター').メソッド（引数）; …
jsファイル --------------------- //1.テキストエリア入力があった場合 //2.テキストエリアの文字数を取得します //3.文字数カウンターに表示させる window.addEventListener('DOMContentLoaded' function(){ //テキストエリアのDOMを取得 var node = docum…
「DOM」 HTML要素の情報を書き換えたり、削除したり、操作するための仕組みのこと ・HTMLは、ブラウザ上ではツリー状になっている（DOMツリー） ＞上から順番に読み込まれて表示される ・DOMツリー（階層）により、お互いの関係がわかるようになる。（「親と…
【関数】 複数の命令を一塊にしたもの （毎回同じ処理を書く必要がなくなる） --------------------- 普通に書くと・・ $num = 100; if( $num === 100 ){ $num = $num*1.08; echo'変数$numは'.$num'です'; }elseif( $num === 200 ){ $num = $num*1.08; echo'…
【構文】 ⇨特定の条件によって処理を切り分ける文のこと ＜構文の種類＞ ⑴条件分岐⇨条件に分けて処理を変える ⑵繰り返し文⇨ある条件の間は同じ処理を繰り返す ※全てのWEBサービスは「条件分岐」「繰り返し分」を複雑に合わせて作られている ⑴条件分岐 1.swit…
演算子の種類 ⑴代入演算子 ⇨右のものを左に入れる ---------------------- var num = 3; var num = 'あいうえお'; var num = 変数の箱 ※全角使用の時は「“”」で囲む ---------------------- ⑵算術演算子 ⇨変数を「足したり」「引いたり」「掛けたり」「割っ…
javascriptとは？ ・ブラウザの中で動くプログラミング言語 ・HTML/CSSを“動的に”書き換えられる htmlファイル =============== <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> </head> <body> <h1>ホームページの見出し</h1> <p>最初のホームページが完成しました！</p> <script> alert('これがjsです！'); </script> </body> </html> =====…
①HPの構成（HTML構造） HTMLで構造組む⇨CSS作成 ⑴ヘッダー <header> <nav~> ⇨メニューを作る </nav> <ul~> ⇨リストを作る <li></li> </ul> </header> ⑵トップバナー （画像） ⑶セクション <section> ⇨1つのまとまりを表す（HTML5から導入） <h1></h1> ⇨タイトル <p></p> ⇨段落ごとでpタグを囲む </section> ⑷フッター <footer> Copyright<a href="~">サンプルHP</a>.All Ri</footer>…
ボックスの配置を指定する時に使うコード 「position」 「float」 【position】 4種類ある ⑴static ＞デフォルトの状態 ⑵absolute ＞ボックス全体が移動。指定したボックスは上に重なる ⑶relative ＞元の要素のボックス領域は残ったまま。指定したボックスが…
ボックスの周囲の境界（余白）を指定 「margin」・・・ボックスの“外側”の余白指定 「padding」・・・ボックスの“内側”の余白指定 ※インライン要素は指定不可（上下余白指定できない） ＞インライン要素「imgタグ」は縦のmarginを指定できないので、cssでブ…
スタイルがズレてる場合は、「ブロックレベル要素」「インライン要素」を確認する 【ブロックレベル要素】 一行全てのボックス （例）p<h1>~<h6><ul><table><div> 【インライン要素】 文字の装飾で使用 （例）<a><img><br><span> ※インライン要素の中にブロックレベル要素は入れることができない</span></a></div></table></ul></h6></h1>
【スタイル指定方法の優先順位】 ⑴「!important」 ⇨p{color: red; !important} ⑵<p style="color: red;"></p> ⇨html内に記述する ⑶p#title{color: red;} ⇨要素指定したid属性（この場合、pタグのid属性title） ⑷p.button{color: red;} ⇨要素指定したclass属性（この場合、pタグのclass属…
htmlファイル ============== <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1 id="title">ホームページの見出し</h1> <p class="bg-color1">これは段落です</p> <h2 class="bg-color1">これは2番目の見出しです</h2> </body> </html> ====…
htmlファイル ============== <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>ホームページの見出し</h1> <p>青い文字になるよ</p> <p>ここも青い文字になるよ</p> </body> </html> ============== ・titleタグ直下に「
・CSSとは、指定したファイル内の文章の「見た目」を変える言語（コード） ・CSSを使わないと、文章がただの文字の羅列で見づらくなる ・CSSを使う時は、HTMLファイルと分ける ・CSSファイル１つで、全てのファイルの文章を装飾できる ・CSSファイルを複数作…
htmlファイル ============== <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> </head> <body> <h1>ホームページの見出し</h1> <p>最初のホームページが完成しました！</p> <form> E-mail<br> <input type="text" name="email"><br> Password<br> <input type="text" name="pass"><br> </form></body></html>
htmlファイル ============ <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> </head> <body> <h1>ホームページの見出し</h1> <p>最初のホームページが完成しました！</p> <ul> <li>1つ目</li> <li>2つ目</li> </ul> </body> </html> ============ 解説 ・リスト作成には「ul」「li」タグを使う ・「li」タグ1つで1リスト分作る ・リストはホームページの…
htmlファイル ============ <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> </head> <body> <h1>ホームページの見出し</h1> <p>最初のホームページが完成しました！</p> <table border="1"> <tr><td>エコノミーコース</td><td>200円</td></tr> <tr><td>スタンダードコース</td><td>800円</td></tr> </table> <table border="1"> <tr><td>エコ…</td></tr></table></body></html>
htmlファイル ============ <html> <head> <meta charset="utf-8"> <title>ホームページのタイトル</title> </head> <body> <h1>ホームページの見出し</h1> <p>最初のホームページが完成しました！</p> <img src="sample.jpg" alt="花の写真"> </body> </html> =========== 解説 ・画像表示に使うコード ⇨<img src="ファイル名" alt="写真の名前（任意）"> ・「img」⇨画像を指す ・「""」⇨パス（場所を指…
htmlファイル ------------------- <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し</h1><p>最初のホームページが完成しました！！</p></body></html> ------------------- ＜解説＞ ============ ⇨HTML形式で書くことをPCに宣言している <html> ============ブラウザのタイトルに表示されるコ</html>…
・「HyperText Markup Language」の略 ・ホームページを作成するために開発された言語 ・文章に目印をつける→例 「見出し」「小見出し」「内容」 ・目印をつけるからMarkup（マークアップ）言語と呼ばれる ・文章に目印として付ける記号を「HTMLタグ」という
