2013年現在にHTML5でサイトを作るときに気をつけたいポイント

新しい自作ブログテンプレートを作ることを決めて、「HTML5 + CSS3」というモダンな枠組みを選ぶことにした。当然Webで調べながら作業ということになるんだけど、そこには事前に予想していなかったトラブルが潜んでいた。一通り作業が終わってHTMLをチェックしていたら、後から手直しが必要だと必要とわかった場所が結構出てきてしまっていたのだった。 原因は参考にした記事の内容が(ブログでなくても)古くてアップデートさ...

角丸を表現するCSS3のborder-radiusのブラウザ対応状況を調べてみた

現在はまだ規格がきちんと定まっていないのと、ブラウザの対応状況の問題であまり使われてないCSS3なんだけど、もし普通に使える状態になったら多用されることが予想されるのが「border-radius」というプロパティ。これはCSSで指定するだけで角丸(丸い角)が作れるプロパティで、今現在角丸の表現に使われてる「角に丸い画像を使う」「空のspanなどを使って擬似的に丸く見せる」などの面倒で手間がかかる方法をとらなくて済むとい...

JavaScriptでホスト名(ドメイン)を取得する方法

覚えておくと便利そうなのでメモ。 現在のページのホスト名(ドメイン)を取得する 「location.hostname」で取得可能。 テストソース <script type="text/javascript"> <!-- document.write(location.hostname); // --> </script> JavaScript OFF URLからホスト名(ドメイン)を取得する(抜き出す) 「.split('/')[2]」でホスト名を分割可能。 テス...

「list-style-type:none」でリストのマークが消えない場合にチェックすること

もうずいぶん前の話。 ある時FC2ブログの公式テンプレートを使っていて、HTMLタグの「ul」のリストのマークがどうしても消えなくて困ったことがあった。普通リストタグのマークを消すにはCSSで「list-style-type:none」を設定するのだが、なぜかその時はまったく効果が現れず、行頭の黒い点が表示されてしまう状態に。(ちなみに当時はCSSについての知識がほとんどなかったので、Webのタグリファレンスのページとにらめっこしな...

使いにくい「q」タグの使い勝手をよくするカスタマイズ2種

HTMLで引用に使われるタグは<blockquote>と<q>があります。前者は改行を含むような比較的長文の引用、後者は短文の引用に使われます。 ところが、<blockquote>はともかく<q>はあまり使われていないのが現状のようです。原因としては主に以下のものがあるのではないでしょうか。*1 1 : 単純にBlogのエディタで<q>が入れられないだけかもしれませんが。 IEでのスタイル付けが一切ない 引...

これが決定版!JS+CSSでお手軽に「target= _blank」なリンクを一目で判断させる

先日「target="_blank"」の設定されているリンクを簡単に判別できるようにする、という内容のエントリを書きました。 CSSのみで「target="_blank"」のリンクを一目で判別できるようにする これは最終的に「CSSの属性セレクタ」+「手動class設定」という形に落ち着いたんですが、予想したとおり「class設定するの面倒だよね」(意訳)という指摘が。私自身はエディタとツールを使っているのでclassを設定...

SEOだけで満足できない人のためのmetaタグ情報まとめ (後編)

SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」 このエントリは上記のエントリの続きです。前回のエントリでは触れなかった、metaタグのname属性を持つものについてまとめたいと思います。metaタグの中で一番有名ともいえる、「meta name="keywords"」(キーワード)や「meta name="description"」(概要)もこちらに含まれます。 meta name (name属性)とは メタデー...

CSSのみで「target="_blank"」のリンクを一目で判別できるようにする

このBlogもそうなのですが、外部サイトへのリンクに「target="_blank"」を使って新しいタブ(ウィンドウ)で開く設定にしている人は多いのではないでしょうか。この「自動でタブ(ウィンドウ)を開く」という挙動には賛否両論あるものの、少なくとも私はこちらの方が好きなので利用しています。 さてこのタブを開く挙動、機能自体はいいのですが、残念なことに「一見してタブを新しく開くのか再使用するのかわからない」...