「HTML」カテゴリーアーカイブ

HTML関連の開発備忘録

UTF-8 と UTF-8N

投稿日時: 投稿者:

UTF-8 と UTF-8N

Webアプリケーションの仕事をしていると、たまにUTF-8でファイルを保存しないといけない時があります。
今の多くのエディタは保存する際に「文字コードの指定」ができるようになっていて助かります。
以前は、Visual stdio を立ち上げて保存したものです。

で、保存使用する際、UTF-8 と UTF-8Nが選べるエディタも有れば、選べないエディタもあることに気が付きました。
結果はご存知の通りBOMを付けるか付けないかの指定方法が違うだけなんですけね。
これって知らない人にはわかりづらいですね。

BOMって？

ちなみにBOMっていうのは、Byte Order Mark のことで、「テキストファイルの文字コードがUTF-8です」とファイルの頭に付けたマークのことです。

BOMが付くか付かないかだけなので、UTF-8 と UTF-8N の文字コードは全く同じUTF-8です。
違いはありません。

Nが付かないファイルは、BOMあり。
Nが付くファイルは、BOMなし。
ってことです。

UTF-8 と UTF-8N？

現在は、基本的にBOMなしで問題ないと思います。
なので、UTF-8Nを選択します。
で、UTF-8 と UTF-8Nが選べないエディタは、たぶんファイル名を記述する横くらいにBOMの扱いをどうするかの指定があると思います。

しかし、付けるように指定が有ったり、読み込み時に問題が出るようならBOM付けて試してみるのも手です。
現在はBOMなしが主流ですが、古いシステムはBOMあり指定もあるかもなので。

以上、UTF-8文字コードでファイルを保存したときにふと思ったので。。。

【HTML5】HTML5とは

投稿日時: 投稿者:

HTML5とは
　定義を大まかに言うと、HTML5はW3C（World Wide Web Consortium　ワールド・ワイド・ウェブ・コンソーシアム）によって2014年10月28日に勧告・公開された、WebPage（ウェブページ）やWeb Application(ウェブアプリケーション)を構築する際に使用されるフォーマット仕様の第5版である。
また、2016年9月にHTML 5.1が勧告される予定。
HTMLを取り巻く環境は、各組織の思惑が有るため複雑に絡んでいます。
なので、興味の有る人は別途ググってください。

ここからは私見で書くので、偏った情報になると思いますが、このような見方もあるとの参考にしてください。
HTML5とは、ウェブアプリケーションのプラットフォームとしての機能させるべく開発された仕様です。
そのため、今までは例えばプラグインをインストールしないと使えなかったビデオ機能など、普通に欲しいと思われる機能を盛り込んだ仕様になっています。
これはAppleがFlashを採用しなかったようにいろいろと思惑が働いているようですが、基本的には、プラットフォームは共通の技術の上に構築されるべきという概念が有るためと思われます。FlashはAdobeの製品なので、Adobeが特定のハードウェアに対しプラグインを作らないという事態はAdobeの支配が強まるとの見方もでき、Appleの容認できなかったようです。

なので、HTML5は巨大なマーケットをいろいろな組織が自分達の有利になるよう、または不利にならないように、便宜上公平なプラットフォームとして策定したHTML仕様です。
ですが、HTML5はW3C以外にもWHATWG（Web Hypertext Application Technology Working Group　ウェブ・ハイパーテキスト・アプリケーション・テクノロジー・ワーキング・グループ）の影響も受けており、策定に関しては専門家でないとよくわからないと思われます。

とりあえず、HTML5を使うに当たっては、当面不必要な情報でしたが、HTML5の定義はこんな感じです。

以上、HTML5とは・・・でした。

【HTML CSS】CSSセレクタ　クラスの中の要素にクラスを付けると？

投稿日時: 投稿者:

今日はCSSのセレクタの備忘録です。
以下のようなCSSの適用は良く行います。
　１）Div要素にクラスをつけCSSを適用させます。
　２）Span要素だけにCSSを適用させます。
で、更に一部だけのSpan要素に違うCSSを付けたいとき。。。有りますよね？

単純にクラスの中の要素にクラスを付けると？
下の例のようにDiv要素の中のspan要素にクラスspanClass1を付けても、思ったような挙動になりません。
「指定あり-divClass・SpanClass1」は

.spanClass1{
  background: blue;
  color: white;
}

としているので、バックグランドに青色、テキスト文字は白を期待するのですが、そのように表示されません。

じゃ、どうするか？

その際は下の例のように、Span要素にクラスを指定して.divClassの中のSpan要素のクラスspanClassが付いているものだけという設定をすることで可能になります。

.divClass span.spanClass2{
  background: blue;
  color: white;
}

idを付けるという手ももちろん有るのですが、要素が沢山あるとメンテがしずらいですから。

<html>
<style>
.divClass span{
  background: red;
  color: black;
}
.spanClass1{
  background: blue;
  color: white;
}
.divClass span.spanClass2{
  background: blue;
  color: white;
}
</style>
<body>
  <div>
    <span>指定なし</span>
    <span class='spanClass1'>指定あり-spanClass</span>
  </div>
  <br />
  <div class='divClass'>
    <span>指定あり-divClass</span>
    <span class='spanClass1'>指定あり-divClass・SpanClass1</span>
    <span class='spanClass2'>指定あり-divClass・SpanClass2</span>
  </div>
</body>
</html>

CSSのセレクタは汎用性が有るで使いやすいですね。
その分奥が深くて、、、私もわからないことが多いので、勉強しなければいけないなって感じています。

今日は、CSSのセレクタのシステム開発備忘録でした。

[ASP.NET] 2010 マスターページを使用した場合のプログラムからmetaタグの追加

投稿日時: 投稿者:

先ほど、プログラムからタイトルを更新する開発備忘録のメモを残しました。
今回は、descriptionやkeywordを追加するメモです。

これも至って簡単で、Page_Loadの中で以下のようにするだけです。

‘description設定
Dim meta1 As HtmlMeta = New HtmlMeta()
meta1.Name = “description”
meta1.Content = “description文字列”
Page.Header.Controls.Add(meta1)

‘keywords設定
Dim meta2 As HtmlMeta = New HtmlMeta()
meta2.Name = “keywords”
meta2.Content = “keywords文字列”
Page.Header.Controls.Add(meta2)

その他、metaタグで自動的に指定した秒数後に特定のページにジャンプさせることもできます。
‘自動的に他のページにジャンプ
Dim meta3 As HtmlMeta = New HtmlMeta()
meta3.httpequiv=”refresh”
meta3.content=”秒数;URL=URL”
Page.Header.Controls.Add(meta3)

authorとかも追加でき、いろいろできます。　以上

[HTML] IEの互換性制御

投稿日時: 投稿者:

HTMLでcanvasを使用したい時、IE9の互換モードのおかげで未対応ブラウザとなってしまう場合があります。
そこで、互換モードをページごとに指定するようにしました。
その備忘録です。
Internet Explorer 9 で動作して欲しい時は、
< http-equiv=”X-UA-Compatible” content=”IE=EmulateIE9″ />

ちなみに、互換モードを指定する時は
Internet Explorer 8と同様に動作して欲しい時、
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ />
Internet Explorer 7と同様に動作して欲しい時、
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

この他一括で指定したい場合は、詳しく調べて居ませんがIIS等のサーバにmetaスイッチを設定する方法も有るそうです。

以上

カテゴリー: HTML

[HTML] 失敗談^^;・・・相対パスと絶対パス

投稿日時: 投稿者:

現在、SEOの勉強のためにSEOの施策サイトを作成しています。
そのサイトでカテゴリを少しでも容易に管理できるよう2段のフォルダ階層としています。
全画面共通のヘッダー部分は、テンプレート化して使用しています。

そのテンプレートで、失敗をしていました(T_T)。
気をつけていれば全く問題のないことなのですが、メニューのボタンのonclickの中のURLの記述を”/”を付けづに記述してしまい、相対パスになって居ました。
ちゃんとリリース後確認していれば良かったのですが、していませんでした。。。。
また、JavaScript内の記述のため、Googleマスタツールのリンク切れ報告にも引っかかりませんでした。
しょうもないミスをしていました。。。

そこで、開発備忘録という内容でもないのですが、悔しいのでURLを記述する際の「相対パスと絶対パス」についてメモっておきます。

相対パスと絶対パス

URLを書く際に絶対パスを使用することも有りますが、自サイトのWebページをリンクする際は、相対パスのほうがデバッグする際に便利なので相対パスを使う方が多いと思います。
ちなみに、Googleは絶対パスの方が良い様なことを言って居ると他のブログで読みましたが、どちらを使ってもSEO的には問題ないそうです。

絶対パスは、
・HTTP（S)のプロトコル指定
・サーバ（ホスト）のドメイン指定
・Webサイト・Webページの指定
と、全て指定する方法です。

相対パスは、
現在の位置から見た、Webサイト・Webページの指定になります。
で、指定の仕方には、「..」と「/」を使うことができます。

  1. 同じディレクトリに存在するWebページAAA.htmを指定する時は、なにも付けず「AAA.htm」で。
  2. 一つ上のディレクトリに存在するWebページAAA.htmを指定する時は、「../」を頭に付け「../AAA.htm」で。
  3. 一つ下のディレクトリ「DDD」に存在するWebページAAA.htmを指定する時は、「DDD/」を頭に付け「DDD/AAA.htm」で。
  4. 二つ上のディレクトリに存在するWebページAAA.htmを指定する時は、「../../」を頭に付け「../../AAA.htm」で。
  5. 二つ下のディレクトリ「DDD/EEE」に存在するWebページAAA.htmを指定する時は、「DDD/EEE/」を頭に付け「DDD/EEE/AAA.htm」で。
  6. Webサイトのルートディレクトリに存在するWebページAAA.htmを指定する時は、「/」を頭に付け「/AAA.htm」で。
  7. Webサイトのルートディレクトリの一つ下のディレクトリ「CCC」に存在するWebページAAA.htmを指定する時は、「/CCC/」を頭に付け「/CCC/AAA.htm」で。

今回は、「/」を頭に入れ忘れて居ました。。。。

カテゴリー: HTML

[HTML] スクロールバーの色を変える

投稿日時: 投稿者:

HTML　スクロールの色を変える開発備忘録

ヘッダーに以下のスタイルを貼り付ける。
その後、好みの感じになるように色を決める。

<style type=”text/css”>
　　Body{
　　　　scrollbar-3dlight-color:yellow; <%--3D部分の色;--%>
　　　　scrollbar-arrow-color:green; <%--▲の色;--%>
　　　　scrollbar-darkshadow-color:gray; <%--深い影の色;--%>
　　　　scrollbar-face-color:green; <%--表面の色;--%>
　　　　scrollbar-highlight-color:white; <%--明るい部分の色;--%>
　　　　scrollbar-shadow-color:gray; <%--影の色;--%>
　　　　scrollbar-track-color:gray; <%--トラックの色;--%>
}
</style>

全体の色を指定してから個別に指定する方がいいかも。
<style type=”text/css”>
　　Body{
　　　　scrollbar-base-color:green；
　　　　scrollbar-3dlight-color:white;
　　}
</style>

カテゴリー: HTML