CSS & JavaScript編

チュートリアル５では、IDE上でのCSSファイル、JavaScriptファイルの作成方法を学習します。

CSSの作成

1. デザインステージへ移動し、新規ファイルボタンをクリックし、CSSファイルを選択します。キャプチャ
2. 画面に追加されたNEW_FILE_0002.cssをクリックし、エディタ画面を開いてください。キャプチャ
   以下のスタイルを記述してください。
/*通常のCSS同様'@import'も使用することが可能です*/ @import url("tutorial5.css"); div.week_weather{ margin: 10px 10px 0; } div.week_weather_head{ overflow: hidden; padding: 10px; background: #b5b5b5; } div.week_weather_head span{ float: left; line-height: 1.4; font-weight: bold; color: #fff; padding: 5px; } #select_area{ float:right; } div.week_day,div.get_weather{ clear: both; overflow: hidden; border-right: 2px solid #d8d8d8; border-left: 2px solid #d8d8d8; } div.week_day div{ float: left; width: 20%; text-align: center; } div.get_weather span{ float: left; display: block; width:20%; text-align: center; }
3. スタイルを記述すると逐次CSS previewに反映されていることを確認してください。
4. 名前を付けて保存をクリックしてください。キャプチャ
   保存先は{IDEを展開したディレクトリ}\genecode\projects\tutorial\template\cssです。
5. サーバー変換ステージに移動し、headタグ内に、以下のlinkタグを追加してください。
<link href="css/NEW_FILE_0002.css" type="text/css" rel ="stylesheet">
6. 上書き保存ボタンをクリックしてください。
   各地の天気予報以下のコンテンツにデザインがあたります。

JavaScriptの作成

デザインステージではクライアント側で動作するJavaScriptも記述することができます。

1. 新規ファイルボタンをクリックし、javascriptファイルを選択します。キャプチャ
2. 画面に追加されたNEW_FILE_0003.jsをクリックし、エディタ画面を開いてください。キャプチャ
3. 以下のコードを記述してください。
//リストパーツで出力された部分をアコーディオン化する window.onload = function() { var acc_head = $('h2.comment_list_head'); var acc_body = $('ul.list'); //見出し部分クリック時にリストをトグルさせる acc_head.click(function(){ acc_body.toggle('slow'); acc_head.toggleClass('open'); }); //デフォルトではリスト部分を隠しておく acc_body.hide(); };
4. 名前を付けて保存をクリックしてください。キャプチャ
   保存先は{IDEを展開したディレクトリ}\genecode\projects\tutorial\template\jsです。
5. サーバー変換ステージに移動し、headタグ内に、以下のscriptタグを追加してください。
<script src="js/NEW_FILE_0003.js" type="text/javascript"></script>
6. 上書き保存ボタンをクリックしてください。
   みんなの天気予報の欄がクリック時に開閉します。
   次のステップでは完成したスマホサイトを確認します。