NetBeans HTML5チュートリアルやってみた2

前回に引き続き、NetBeans の操作になれるためにチュートリアルをやってみました。
今回は、CSS関係の操作を行うチュートリアルです。

参考にしたチュートリアルのサイト
Working with CSS Style Sheets in an HTML5 Application
Video of Working with CSS Style Sheets in HTML5 Applications.

前回作成したプロジェクトを利用して、ブラウザの表示サイズにより表示されるイメージとフォントのサイズを変えるCSSルールを作成します。

HTML5 CSSデモアプリケーション作成

新規プロジェクトでHTML5アプリケーションを作成します

clip_image001

名前の HTML5DemoCss とします

clip_image002

先ほど作成したサイトテンプレートを選択して、終了をクリックします

clip_image003

プロジェクタが作成され、プロジェクトウィンドウへ追加されています
NetBeansからプロジェクトの実行ボタンをクリックすると Chrome ブラウザ上でプロジェクトが実行されます

ここまでは、前回とほとんど変わりません
※Chromeブラウザに NetBeans connector が導入されている必要があります

clip_image004

メディアルール作成

スマートフォン等での表示用にメディアルールを作成しCSSで調整します

新しいスタイルシートを作成し、スマートフォンデバイス用のメディアルールを追加して、メディアルールにいくつかのCSSルールを定義します。

プロジェクトウィンドウのCSSフォルダを右クリックして、新規→Cascade Style Sheet を選択します
ファイル名に mycss と入力して、終了をクリックします

clip_image005

作成された mycss にブラウザサイズ480ピクセルの幅以下である場合のメディアルールを追加します

/*My rule for smartphone*/
@media (max-width: 480px) {

}

clip_image006

mycssファイルを保存して、index.htmlファイルの<head>タグ内で、mycssファイルを読みこむように修正します

<link type="text/css" rel="stylesheet" href="css/mycss.css">

ChromeブラウザのNetBeansアイコンをクリックして、Inspect in NetBeans Mode をチェックします。

clip_image007

ブラウザ上のイメージ画像をクリックすると、その部分が選択されて青くハイライト表示されます。また、NetBeans 上でも該当部分のCSS情報が表示されます

clip_image008

clip_image009

但し、CSSパネルの表示がチュートリアルと違っています

「index.htmlの実行」ボタンをクリックしてみるとCSSパネルがオープンしました

clip_image010

適用済みパネルの編集ボタンをクリックしたCSSを編集します

clip_image011

何かエラーとなってしまっているようです

何か変だぞ、テンプレートに問題ありか?

よく見ると HTML5DemoCss/index.html でなく HTML5Demo/index.html につながってしまっています。

clip_image012

NetBeansメニュー下のツールバーから実行すると HTML5DemoCss につながりますがCSSパネルが変ですし、「index.htmlの実行」ボタンからだと HTML5Demo につながってしまいます。

テンプレートの作り方で何かしでかしましたかね?

もしかしたら、NetBeansのバグかもしれないですね (^_^;)

テンプレートを使用せずにやってみる

しかたがないので、このHTML5DemoCssのプロジェクトを止めて、HTML5Demoプロジェクトでここまでの作業を同様に行なってみました

何の問題もなくすんなり行きました

ここで、適用済みパネルの編集ボタンをクリックしてみます

要素のセレクタに img を入力して、スタイルシートに mycss.css 、規則に max-width: 480px を選択します

clip_image013

ここでブラウザサイズが480×320の状態でブラウザ上のイメージ画像をクリックします

※480より大きなサイズのままクリックしてもメディアルールの条件に合わないので適用済みスタイルパネルに mycss のimgが現れません

clip_image014

適用済みスタイルの img mycss.cssのリンク文字をクリックします

clip_image015

すべてのカテゴリからプロパティの追加をクリックして、width、90px を追加すると mycss.cssファイルの該当する img タグに width: 90px; が書かれブラウザのイメージ画像が小さくなります

次にブラウザのリスト要素<ul> を選択します

clip_image016

適用済みスタイルの ui-widget を選択します

clip_image017

次に、ドキュメントタブを選択して、右上のCSSルールの編集ボタンをクリックします

clip_image018

セレクタに ui-widget と入力して、規則を max-width: 480px とします

clip_image019

スタイルシート mycss.css に.ui-widget が追加されるので、そこにフォントサイズの指定を追加します。

.ui-widget {
    font-size: 0.9em;
}

clip_image020

フォントが小さく表示できました

clip_image021

ちょっと途中うまくいきませんでしたが、なんとか出来ました

ブラウザのサイズに応じて、イメージとフォントのサイズが切り替わります

他にもJavascript関連のチュートリアルがあるようですが、PHPの学習を優先したいので、そちらはちょっと後回しです (^_^;)


まとめ記事紹介

go-to-top