ホーム > タグ > HTML

HTML

サイドバーのタイトルのマークアップについて

最近Google Bloggerのデフォルトでのマークアップの影響を受けてか、
ヘッダー、フッター、サイドバーに見出しタグを設定する人が多いようです。
(昔から色々SEOのためにとマークアップされる方は多かったです)

Webサイトはそのページで伝えたい内容を文書構造を整えて伝えることが
最もSEOに繋がると信じている人間なので、
ヘッダー、フッター、サイドバーには見出しを設定したくありません。

ちょっと構造を簡単に起こしてみました。

Google Blogger的マークアップ
■Google Bloggerのデフォルトでのマークアップ

最近のトレンドのマークアップ
■最近のトレンドだと言われているマークアップ
GoogleBloggerを参考にしたけれど、ナビゲーションタイトルにh2はやり過ぎだから、
せめてh3以下の見出しでマークアップするべきという状態のようです。

8pus的マークアップその1
■僕の考えるマークアップその1

8pus的マークアップその2
■僕の考えるマークアップその2

なぜサイドバー等のタイトル要素に見出しタグでマークアップしたくないかというと、
「サイドバーはナビゲーションであって、本文の内容ではないこと」が、ダントツ一番の理由です。
見出しタグは本文の内容内の見出しにマークアップするのが本来の役割で、
本文以外をマークアップというのはWeb標準とは言えないのではないかと考えています。

「サーチエンジンはもうほとんどGoogle一極なんだから従ったら?」という声もありますが、
自分は、クラウドにしてもその他サービスにしてもGoogle一極化には危険性があると考えているので、
おいそれとGoogle一社だけを信用してのマークアップはしたくない。
(こんなことをいうとこのサイトがGoogle先生にSEOで蹴られてしまうかもしれませんが…。)

トレンドを追うのは重要かもしれませんが、あくまでW3CのWeb標準化に合わせたマークアップを考えた方が
何十年経っても変わらない根源的なものなので、問題は起こりえないと考えます。

これまで10年近くWebに触れてきましたが、一過性のトレンドは廃れることが目に見えており、
これからのコーダーは、長い目で見れて、かつ、Web標準化を使命感を持って取り組んでいくべきだと考えています。

CSSの読み込み @importとlinkはどちらがいいのか?

Webページで、複数の外部CSSをそのページに適用させるには、

  • import.cssを用意し、その中で複数のCSSをimportさせて読み込む
  • linkタグで複数のcssを読み込む。

があると思います。

参照:Screw-Axis
@importを使うべきでない理由

参照(英語):SteveSouders.com
don’t use @import

参照(上記サイトを日本語化して紹介されています):coliss
外部スタイルシートの指定は@importとlinkでどちらがいいか

Screw-Axisさんの検証結果とSteveSouders.comの検証結果が異なっているのが興味深いです。
IE7では並列で読み込まれないようです。IE8,IE9でも検証が必要になりそうですね。
これまで自分はずっとimport.cssを用意して、その中に@importで必要なcssファイルを読み込んでいました。
自分でも検証する機会を設けて、他の人の検証結果なども見守りたいと思います。

jQueryでキャッシュを使った文字サイズ可変

久々のJavascriptの記事です。
jQueryで、キャッシュを使って文字サイズを可変にできるjavascriptです。
たまにクライアントからの要望で「文字サイズ可変にしてー」というのがきますがちょっと面倒なんだよねぇ~。
けど、今回ご紹介するJavascriptはとても簡単です!

jQueryはキャッシュ機能に対応した1.3.2以降を使用してください。
ちなみに1.5.2でトライしてみたらイケました。(現在の最新版は1.6のようです)
ちょっと理解すれば設置、カスタマイズはごく簡単。

まずはこちらでダウンロード。
http://angstrey.com/index.php/projects/jquery-text-resizer-plugin/

<head>タグ内に以下を記述します。
※以下の例はcommon/js/フォルダに格納した場合で記述しています。

<script type="text/javascript" src="common/js/jquery.textresizer.js"></script>
<script type="text/javascript" src="common/js/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
	$("ul.fsChange a").textresizer({
		target: "#content",
		sizes: [ "75%", "93%" ]
	});
});
</script>

targetは文字サイズのサイズ変更を適用するdivのid名を入れます。
sizesは小・中・大という順番でボタンを設置した場合、htmlで記述したときの上からの順番で記述します。

以下は、「中」と「大」のみの場合です。

<ul class="fsChange">
<li><a href="#">中</a></li>
<li><a href="#">大</a></li>
</ul>

僕の場合はいつも、div#contentにfont-size: 75%;を効かせているので、
div#contentに対して、「中」が75%で平常時と同じ値を入れて、「大」の時に93%を効かせています。

ulのクラス名の「fsChange」は変更可能です。
自分で任意のクラス名を設定したい場合は、
$(“ul.fsChange a”).textresizer({
と、
<ul class=”fsChange”>
の「fsChange」を同じものに変更してください。

このJSの便利なところは

  • 数値の設定が楽であること(※全てのHTML内に記述するのは面倒なので外部ファイル化した方がいいかもしれない)
  • ある程度の数、数値を増やせること。サイズ「極小」「小」「中」「大」「極大」とかできるっぽい。

CSSでfont-sizeを指定してるタグを把握したサイトであれば、すごく簡単なので是非使ってみてください。
※font-sizeをメチャクチャ&ゴチャゴチャに指定しているサイトでも、サイズ指定の単位をpxにすれば割と楽かもしれません。

【文字サイズ可変によるデザインの問題】
文字サイズを大きくした状態でもサイトの見栄えをチェックしていないと、
予期しない改行が入ったり、リストマークの位置がズレまくったりと、
ヒドイ状態になるかもしれないので、その辺りにこだわる方はきちんと文字サイズが大きい時も確認しておくことをおすすめします。

スクロールについてくるナビゲーション、スクロール追従ナビゲーション

スクロールに追従するナビゲーションを使うことになったので、
jqueryを使って動くモノに限定して調べてみました。

サイト名:CSS Tricks
記事名:「Scroll/Follow Sidebar, Multiple Techniques」
http://css-tricks.com/scrollfollow-sidebar/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:

jqueryのバージョンは1.3.2で動作。
WindowsのIE6、Firefox3.5.10、Chromeで動作確認済み。
Firefoxではやや動作がカクカクです。

設置方法

jqueryをリンクして、その直後に以下のソースコードを挿入し、
ナビゲーション部分をdiv#sidebarでマークアップしただけで動きました。

<script type="text/javascript">
$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
          $("#sidebar").stop().animate({
            marginTop: $(window).scrollTop() - offset.top + topPadding
          });
        } else {
          $("#sidebar").stop().animate({
            marginTop: 0
          });
        };
    });
});
</script>

西在宅マッサージ

西在宅マッサージのWebサイトを制作しました。

西在宅マッサージ

http://www.nishi-massage.com/

「アットホームな暖かい雰囲気で」とのオーダーをいただいたので、クレヨン調のテクスチャを用いてデザインしました。
高齢な方が見られることも想定して、文字のサイズも大きめに設定。

日々更新+追加をしていくのを前提に、あえてコンパクトな状態からスタートさせています。
近々施術中の写真ページの追加とトップページFlashを制作予定です。

Home > Tags > HTML

Search
Feeds
Meta

Return to page top