HTML

横幅のサイズによってタブのサイズを変える方法

スマートフォンのサイトに限った話では無いですが、横幅(表示領域)によって要素の長さを変えたい時はあると思います。
今回は、横幅によってタブのサイズを変える必要が有ったのでその時の実装メモです。

flexible tabs – jsdo.it – share JavaScript, HTML5 and CSS

初期表示時と画面がリサイズ(スマートフォンの場合は、縦表示→横表示など)された際に、javascriptでタブのサイズを変更するようにしています。
※スマートフォン用に作成したので、IEなどのブラウザではうまく動かないかもです。。。

flexible tabs – jsdo.it – share JavaScript, HTML5 and CSS

CSSで最後の要素以外に適用させる書き方

擬似要素の:not:last-childを組み合わせて指定します。

html

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

css

ul
{
    list-style-type:   none;
    text-align:        center;
}
li
{
    display:           inline;
}
li:not(:last-child):after
{
    content:           ' |';
}

:last-childで最後の要素を指定し:notで指定された要素以外を指定します。
つまり、最後の要素以外というセレクターができます。

2012-02-04 1st – jsdo.it – share JavaScript, HTML5 and CSS

ハートやクローバーの実体参照

HTMLでハートやクローバーと言った記号を使いたい場合、通常であれば、記号をそのまま使えると思いますが、文字コードによっては使えない記号もあります。
今回はeuc-jpハートクローバーを使いたかったのですが、euc-jpではサポートされてません。
そういった場合HTMLでは、実体参照で表現することができます。

ハート
&hearts;
クローバー
&spades;

HTML4 で使える文字実体参照.

擬似要素 before after についての解釈

擬似要素:before:afterはその名前から、要素外側の前と後と解釈してしまいがちですが、実際は要素内側の前と後になります。

図で表すとこんな感じです。

一番使用するケースとしては、floatした要素の高さを出すために擬似要素にclearfixするという事が多いと思います。

例えば、ul、liタグでパンくずリストを作る場合、

<nav class="nav-topicpath">
    <ul>
      <li><a title="Home" href="/">Home</a></li>
      <li>Page1</li>
    </ul>
</nav>
ul, ol {
    list-style: none outside none;
}
a {
    color: #333333;
}
.nav-topicpath {
    background-color: #ffffff;
    font-size: 12px;
    padding: 3px 10px;
}
.nav-topicpath ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.nav-topicpath li {
    float: left;
}
.nav-topicpath li + li:before {
    content: ">";
    margin: 0 3px;
}
.nav-topicpath li a {
    padding: 3px 0;
}

※clearfixはスマートフォン用のものです。

topicpath – jsdo.it – share JavaScript, HTML5 and CSS

この場合、

<nav class="nav-topicpath">
    <ul>
      <li><a title="Home" href="/">Home</a></li>
      [[[ここに擬似要素afterが入る]]]
      <li>Page1</li>
    </ul>
</nav>

となります。
擬似要素は、要素のCSSも継承します。

clearfixのために空の要素を作ったり剃る必要が無いので、イイですね!

WEB+DB PRESS Vol.66 HTML構造化特集より

WEB+DB PRESS Vol.66WEB+DB PRESS Vol.66 by 猪狩 丈治

WEB+DB PRESS Vol.66 HTML構造化特集で印象に残ったことのメモ。

HTMLタグは2つの性質をもつ

  • 意味
  • レイアウト

<p>タグの場合だと、

  • 段落であること
  • 幅いっぱいに広がり縦に並んでいくブロック

という2つの性質がある。

floatとposition:absoluteの使い分け

  • トルツメ:float
  • トルママ:position:absolute

という、使い分けをする。

トルツメ、トルママという言葉は初めて聞いたのですが、デザイン用語のようで

トルツメ
情報が抜き取られた場合、後続の要素が詰まる現象
トルママ
情報が抜き取られた場合、後続の要素が詰まらずそのままの現象

ということのようです。

margin、paddingのどちらを使うか

イメージとして

  • item:家
  • padding:庭
  • border:塀
  • margin:道路

とすると決めやすい。

marginの所有権

これもいつも悩みどこなんですが、

トルツメされた場合を考えて、どちらの要素にトルツメが起きても「予測しない余白」が残らないようにするためには、どちらの要素がmarginを持つべきか考えます。

なるほど。

実践

demo1

demo2

ブラウザとOS別に適用するCSSのクラスを指定できるJSのご紹介

ひょんな事から、スマートフォンサイトのHTMLコーディングを最近しております。

スマートフォンサイトはバリバリHTML5が使えるので楽しいですね。

スマートフォンサイトのコーディングする際は、webkit系のブラウザかiOSシュミレーターのsafariである程度確認してから、実機で確認という流れで表示確認してたのですが、Windowsのsafariでもズレがないようにコーディングして下さいと上から申し出がありました。
※本当に対応する必要があったかは謎ですが。。。

Windowsのsafariでずれる原因はfontが”メイリオ”になってしまい、”ヒラギノ角ゴ”などと比べるとline-heightが高いので、水平に配置しても微妙にずれがでてしまってました。

他に影響が出ないようにと、工数が少ない中だった事もあり、今回はCSS Browser Selector.を使って、Windowsのsafariだった場合のスタイルを定義して対応しました。

これはホント便利ですね。

Mac に HTMLコーディング環境構築(Aptana)

目次

  • Aptanaインストール
  • Zen-Codingインストール
  • Vrapperインストール

Aptanaインストール

Aptana.からAptanaをダウンロード、インストールする。
※2011/11/16現在3.0.6

Zen-Codingインストール

プラグイン化された物があるので、Aptanaにhttp://zen-coding.ru/eclipse/updates/をアップデートサイトとして登録してインストールする。

Vrapperインストール

こちらもプラグインなので、Aptanaにhttp://vrapper.sourceforge.net/update-site/stableをアップデートサイトとして登録してインストールする。

設定ファイルは、ホームディレクトリに.vrapperrcという名前で作ります。
https://github.com/suusuke/dotfiles

GETパラメーターでURLを送りたい

普通に

<a href="/xxx/?url=http://aaa.com/">リンク</a>

で良いんだけど渡したいURLの中にさらにパラメーターが複数ある場合

<a href="/xxx/?url=http://aaa.com/?id=1&var=2">リンク</a>

こうすると

url = http://aaa.com/?id=1
var = 2

みたいになってしまうので

<a href="/xxx/?url=http://aaa.com/?id=1%26var=2">リンク</a>

とすると良いよ。