htmlの最近のブログ記事

結構簡単なので皆恐れるな!!!

□ 解りかけているところ纏め

  • headerタグ、footerタグ、hgroupタグは同タグをネスト出来ない。
  • qタグ、blockquoteタグはどちらも同じような意味だが使い方に気をつける。
  • h1~h6タグまでが連続して続く場合、hgroupタグで囲う。hgroupタグの中にはh1~h6タグしか入れてはいけない。
  • フローティングタグ(今までで言うdivとか)は空にしてはいけない。
  • h1~h6タグまでを順番に出す必要はなく、ネストされた傍から子要素になっていく(XML的な概念)。親h1 > 子h1みたいに同じh1でも文章構造上、もつ意味が異なる。
  • articleタグはページのメインのコンテンツの内、独立した部分に適応されるセクションのタグ。
  • sectionはコンテンツの主題をグループ化するもの。h2と直後のPタグをsectionで囲い、そのセクションが連続するものをarticleで囲うイメージ。
  • asideはarticle内にでてくるコンテンツの補足的位置づけのタグ、メインのコンテンツとはあまり関係ない話題を取り扱うがarticle内やsectionで使ってもよい?ダメ?ようわからん。
  • 極力divタグを使ってはいけない。アクセシビリティ低下につながる。
  • メニューにはnavタグを使う。サブメニューに対してもnavタグを使うが、メインメニューよりも子要素に位置付けられており、同コンテンツと同階層にいることが望ましい。


HTML5doctorのマークアップを参考にすること!
まぁとりあえず、よくわからんですわ。

090311-rendur.jpg
rendur 2.2 http://www.rendur.com/

(X)HTML、CSS、javascriptをライブレンダリング?、ライブプレビュー(書いた傍からプレビュー)してくれます。
簡単なコードの確認、Javascriptの動作確認、デバッグには大変便利かもしれません。
基本的な使い方は続きへ

グーグルマップおもしれー。


    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        //座標を設定
        var point = new GLatLng(<MTIfNonEmpty tag="cfgooglemappoint"><MTcfgooglemappoint></MTIfNonEmpty>);
        //初期位置 軽度,緯度,縮尺
        map.setCenter(point, 13);

        //マップコントロールパネル表示
        map.addControl(new GLargeMapControl());
        //右下ミニマップの表示
        map.addControl(new GOverviewMapControl());

        //ふきだし設置 位置, ノード(文章)
/*
        map.openInfoWindow(map.getCenter(), document.createTextNode("あああああ"));
        if(!map.infoWindowEnabled()){
            map.enableInfoWindow();
        }
*/
        //スクロールホイールでのズームイン・アウトを有効
        if(!map.scrollWheelZoomEnabled()){
            map.enableScrollWheelZoom();
        }

        //滑らかに拡大縮小を行うを有効
        if(!map.continuousZoomEnabled()){
            map.enableContinuousZoom();
        }

        // ===== マーカーとフキダシ(変更不要) =====
        function createMarker(point,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
            });
            return marker;
        }
        
        // ===== ポイント設置設定、前が緯度(Lat)、後が経度(Lng) =====
        var point = new GLatLng(<MTIfNonEmpty tag="cfgooglemappoint"><MTcfgooglemappoint></MTIfNonEmpty>); //★位置設定
        var marker = createMarker(point,'<div style="width:310px; padding:8px; background-color:#ececec; font-family:Courier; border:solid 1px #cccccc;" ><$MTEntryTitle$> <MTcfshoptitlejp> [<MTcfshoparea>]</div><br /><MTcfaddress>'); // ★
        map.addOverlay(marker);
        marker.openInfoWindowHtml(html);

      }
    }
    </script>
 
CSSでmargin要素を指定して何故か利かない! なんでなんDA☆!

\(^o^)/


とか思ったそこの可愛そうなキミ!各言う私もでしたごめんなさい・・・
tableのtdタグにはmarginは使えませぬ。なのでpaddingで対処するでござるよ。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

をFireFox2.0.0.9 (07/11/15時点日本語版最新バージョン)、InternetExplorer6.02900.2180xpsp_sp2の環境にて<table>タグ内<td>~</td>要素に、CSSでheight:○○px; overflow:hidden;属性を指定してもまったく有効になりません。


我らがwindows XP Internet Explorer ver6ではflashコンテンツを一度クリックしてアクティブ化しなければなりません。これは使うユーザ側にとっては非常に邪魔なものに他ならないことでしょう。

では、このコントロールアクティブ化を消すにはどうすれば良いのか?
答えは、

objectタグやembedタグを使わず、javascriptでflashコンテンツをソースに入れる

ことです。これは見落としになりがちですが、ユーザビリティを考える上では非常に重要なことだと思います。

ver1.1 アクティブコンテンツ埋め込み用外部javascriptファイル
(無断転載しております。お手数ですが禁止事項にあたる場合eregance@mail.goo.ne.jpまでメールを頂ければ幸いです。)

このファイルを適当なhogehogeディレクトリに入れて、HTMLソースの<head>~</head>部分に

<script src="hogehoge/AC_RunActiveContent.js" type="text/javascript"></script>

このようにリンクし、flashを入れたいところにnonscriptにあるように従来通りのコードに加えて、下記の太字部分を追加して、太字の部分、swfの縦横のサイズやパスを変更すれば導入できます。
解りにくい説明で申し訳ありません。

swfファイルへのパスを設定する際、swf/hogehoge.swf とするのが普通ですが、このjavascriptの場合「 .swf 」の拡張子の部分はファイルパスとして記述しなくても大丈夫です。
ややこしいので間違えないように。

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','横幅200','height','高さ100','src','ファイルパスhogehoge','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','../navifla/produce_main' ); //end AC code
</script>

<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="横幅200" height="高さ100">
<param name="movie" value="ファイルパスhogehoge.swf">
<param name="quality" value="high">
<embed src="hogehoge.swf" quality="high" pluginspage="http://www.macromedia.com/jp/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="100">
</embed>
</object>
</noscript>


Dreamweaver8を使われているのであれば、flashを[挿入→Flashファイル]で埋め込む際、自動でjavascriptを挿入させる修正パッチ(ver8.02)が出ていますので、そちらをご利用下さい。


ぶっちゃけると、javascriptのDocument.writeでobjectタグ、embedタグを直接HTMLに書き込んでしまえば、ActiveXのコントロールをアクティブにするなどというワンクリック詐欺まがいの問題は出ません。
普通にflashが配置されます。
flashコンテンツが1つの場合はDocument.writeを使ったほうが便利かもしれません。


参照:
Adobe
アクティブコンテンツのアップデートに関する記事
Dreamweaverリリースノート

Microsoft MSDN
ActiveXコントロールのアクティブ化:テクニカルノート

このアーカイブについて

このページには、過去に書かれたブログ記事のうちhtmlカテゴリに属しているものが含まれています。

前のカテゴリはflashです。

次のカテゴリはjavascriptです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。