2019-03-29から1日間の記事一覧
【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> ====…
