html

html5 - DOCTYPE宣言

HTML5のDOCTYPE宣言は下記のように非常にシンプルなもの。 ちなみにHTML4のDOCTYPE宣言は このように長く見た目もごつい感じだった。 互換モードの表示(過去のブラウザと互換させて表示する)ではなく、標準モードで表示させるために必要な記述ですが、これ…

html/xhtml文法チェックサイト「Another HTML-lint gateway」

HTML4.01/XHTML1.0などのWebページを作成する際に、ソースエラーや文法の確認を点数づけで見ることが出来るWeb上ツールが「Another HTML-lint gateway」。 Another HTML-lint gateway 直接URLで指定して確認することもできれば、ソースコードをフォーム上に…

JavaScriptでポップアップWindowのリンク設置

JavaScriptでポップアップWindowのリンク設置ができる。 下のようにaタグでリンクを設定する際に、 href=""には「javascript:;」を、 onclick=""で「window.open('URL','winName','width=100,height=100');」 <a href="http://○○○.com/" onclick="window.open(this.href,'popup','width=100,height=100');">ポップアップリンク</a> もしくは

imgタグ画像をJavaScriptのonMouseOverで表示切り替え

JavaScriptのonMouseOver属性を使用してhtmlソース内に記述した画像の表示を、マウスオーバーのときに違う画像を表示させることができる。 <img src="画像パス1" alt="" onMouseOver="this.src='画像パス1'" onMouseOut="this.src='画像パス2'"> このように指定することで、普通に表示されているときは画像1が表示され、その画像にマウスオーバーさせると画像2に…

サイト製作 - 8 / html

サイト製作 - 7のつづき この見え方だとやっぱりちょっと変で、やる気が出ないので、画像作って適用してみた。また、「body」で指定した背景も同じ画像だと気持ち悪いのでなくして、色をdivのid:headerと同色に設定。 「index.html」は下記に修正して、 <html> <head> </head></html>

サイト製作 - 7 / html

サイト製作 - 6のつづき 前回まではこんなかたち↓ なんか味気ないサイトになってきましたが、ここで思い切って画像を使用してみる。サイトを公開するにあたって、画像は何を表示しても良いのかというと、それはNG。著作権にふれるものや、人物であれば肖像権…

サイト製作 - 6 / html

サイト製作 - 5 / htmlのつづき ここで、サイドのメニュー部分左の「・」黒いマークを消したり、ページの一番下に記述するフッターの部分メニューを横並びに表示したりと、細かく設定していく。 その場合はliタグを横並びにするプロパティをCSSファイルに追…

サイト製作 - 5 / html

サイト製作 - 4 / htmlのつづき このままでは殺風景なので、もっとデザインを加えて見栄え良くする。 フォント設定や枠を加えたり、背景色を設定するだけでも随分変化する。 プロパティ名 指定内容 指定例 font-weight 文字の太さを設定 normal/bold/400 な…

サイト製作 - 4 / html

サイト製作 - 3のつづきCSSスタイルシートで形を作ってレイアウト作り。 CSSについては「CSSとは」を参照。 ソースは下記。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> </meta></head></html>

サイト製作 - 3 / html

サイト製作 - 2のつづき実際にソースを書いて、 このような形に作ってみる。 ※CSSで上図のようなレイアウトに整形するのは次回にやるので、 とりあえず、htmlソースを仕上げる。下の画像のようなソースを書いてみる。 ブラウザで表示すると下の画像のように…

サイト製作 - 2 / html

サイト製作 - 1の続きbody〜/body(通称:body内)に書き込めばホームページというか、ページの内容が出来上がる。※head〜/head(通称:head内)の設定は少しレベルが高めなので、 あとから覚えていけば大丈夫。 body内に書きこめばページが出来るけど、 ど…

サイト製作 - 1 / html

一人でもサイト製作はできる。 Flashで綺麗な動く動画を入れたサイトとか、 JavaScriptで動的でユーザーフォームが豊かなサイトとか、 そんなハイレベルのものをいきなり目指さなければ趣味でもはじめられる。テキストエディタ(メモ帳)に手書きで十分作っ…

パンくず - breadcrumbs - hatena module

「はてなダイアリー」のブログを利用している方は、「はてなモジュール」を使って、サイドバー等をカスタマイズしているでしょう。その中の1つの「パンくず」機能をブログに追加した。「パンくず」は、サイト内の現在位置を示す重要なリンク。 よくサイトの…

DOCTYPE宣言

Web Siteを作成するときコーディングでタグからStartしてませんか?DOCTYPE宣言は大事。◆HTML4.01 ◆XHTML これがきちんと宣言されていないページでは、ブラウザによっては表示に不具合が出ることがある。詳…