じょうほう処理ノート

汎用性の高いウェブアプリケーション用HTMLテンプレートを配布します。 # 概要 いいツールやアプリケーションを思いついてもゼロからテンプレートを作るのはとても面倒くさくて途中から投げ出してしまいそうになります。そんな思いを解決すべく、超軽量かつ必要最低限のスタイル定義しかしていないテンプレートを配布します。 |Chrome|Edge|IE|Safari|Opera|Firefox| |------|-----|----|-----|-----|-----| |49|15|✕|9.1|36|31| JavaScriptはネイティブなスクリプトのみ使用しています。 ## 特徴 * メニューはHTML最下部にある軽量なJavaScriptのみを使って展開・縮小する様に設計されています * Flexボックスでレイアウトされた為、従来の手法より軽量かつ柔軟に設計されています * レイアウト・メニューまわりのみのスタイリングで自由度が高いです ## Map ``` . └── src ├── index.html └── resources ├── image │   └── menu_Item.svg └── script ├── app-main.css // メインコンテンツ部分のスタイルシートです ├── app-navigation.css // ナビゲーションメニュー部分のスタイルシートです ├── reset.css // リセットCSSです └── styel.css　// 統括してスタイルシートを読み込むスタイルシートです ``` ## 入手 [ダウンロード](https://drive.google.com/open?id=1VQ9uvHB96OMw5MFGv8VdMvues7ftWXta)

未だに調べ物をしていると`onclick = function(){〜}`とかを見ますけど、そろそろやめましょう。もう2019年ですよ... また、この様な記法を初心者に教えている本や人が居るから困る... ## これからのイベント定義方法 これからはイベントリスナー(EventListener)と言う物を使ってイベントを定義します。以下がサンプルです。 ### 従来のイベント ``` // JavaScriptの場合 オブジェクト.onclick = function(){ //body } オブジェクト.onclick = 関数; // HTMLの場合 クリック ``` JavaScriptの場合、オブジェクトのプロパティに関数を代入させています。これでも確かにイベントを発火させる事は出来ますが、スマートではありません。HTMLに関しては凶悪です。JavaScriptで完結出来るイベント定義を要素からセットしているのですから。 ### こからの主流 ``` オブジェクト.addEventListener('click', 関数, false); ``` とてもシンプルですね。オブジェクトのaddEventListenerと言うメソッドを使ってイベントが発火した時関数を指定出来ます。 ## addEventListenerメソッド ### addEventListener(イベント, 関数, キャプチャ) - [String イベント] : 対象とするイベントの種類('click' 'load'等)を文字列で指定します。 - [Function 関数] : イベントが発火した際に実行する関数を指定します。 - [Bool キャプチャ] : イベント駆動方式を指定します。基本的に`false`で問題ありません。また省略可能です。 ### ページの読み込みが終わった場合のイベント ``` window.addEventListener('load', function(){ console.log("読み込み完了"); }); ``` ウィンドウオブジェクトのイベントリスナーを使用してページ読み込み完了後に発火されるイベントを定義しています...

# CSSレイアウトサンプル CSSでHTMLをレイアウトする為の最低限の記述をしたサンプルです。 コピーアンドペーストをせず理解を深めてください。 >　・2カラムレイアウト(固定) > ・3カラムレイアウト(固定) > ・2カラムレイアウト(可変) ## 2カラムレイアウト(固定)  ### HTML ``` 2カラムレイアウト ヘッダー サイドバー メインコンテンツ フッター ``` ### CSS ``` /*ヘッダー*/ header{ background-color: #3370e0; /*背景の色を設定*/ width: 900px; /*幅を設定*/ height: 100px; /*高を設定*/ margin: 0 auto; /*センタリング*/ } /*コンテナ*/ #container{ width: 900px; /*幅を設定*/ margin: 0 auto; /*センタリング*/ } /*サイドバー*/ #container #SideBar{ width: 300px; /*幅を設定*/ float: left; /*フロート レフト*/ } /*コンテンツ*/ #container #content{ width: 600px; /*幅を設定*/ float: left; /*フロート レフト*/ } /*フッター*/ footer{ background-color: #3370e0; /*背景の色を設定*/ width: 900px; /*幅を設定*/ height: 50px; ...