2023年11月 / 10月≪ 123456789101112131415161718192021222324252627282930≫12月
2009.12.11(Fri)

tableタグを簡単に生成することができる非常に有用なソフト「テキストテーブル」

csvからtableが作れる「テキストテーブル」を起動
本ブログではtableタグを使って表を作ることが多々あります。今までこちらのエントリーで紹介した方法でtableを頑張って作成していましたが、もっと簡単にcsvファイルからtableタグが作れるソフト「テキストテーブル」を実際に使ってみたので紹介します。

CSVをテキストの表に変換する テキストテーブル - 情報考学 Passion For The Future
http://www.ringolab.com/note/daiya/2009/10/csv-2.html


「テキストテーブル」はCSVファイルを読み込んで罫線を駆使しテキストで作った表を作るソフトですが、機能の一つにtableタグを生成する機能があります。これを使ってブログに貼る用にtableタグを生成し整形します。

タグ(ブログ内検索もできます)フリーソフト table csv ブログ html FC2ブログ

23:40  |  Web/ブログ  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.22(Sun)

【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する

現場のプロから学ぶXHTML+CSS
Web制作をしていると他のページのソースが非常に気になってしまうという職業気質な方もいるかと思います。
自分もそんな気質を持った一人で、制作現場を離れた今でも「これはどうやって実装しているのだろう?」と思うと直ぐに「ctrl+U」(FireFoxを使っているので)でソースコードを見てしまうクセがあります。

ソースコードを見てると不可視なページ内アンカーを見たことはないでしょうか?例えばページ構造のヘッダ部分にアンカーリンクのまとまりがあり、グローバルナビやローカルナビ、ページ本文へと言った感じのリンクです。

タグ(ブログ内検索もできます)html xhtml css ページ内アンカー アクセシビリティ

14:21  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.21(Sat)

【xhtml/css】linkを記述する時の順序は「LVHA(ラブハ)」で覚えましょう

現場のプロから学ぶXHTML+CSS
制作の現場から離れてしまっても、忘れずに覚えているというのが昔取った杵柄。このブログでも少しづつ小出しで紹介していますが、最も基本的で忘れちゃいけないのがlinkの記述順序です。

linkはテキストリンクの色の指定する際に使いますが、4つの擬似要素があり、link、visited、hover、activeの順序で記述しなければ意図したように動きません。それぞれの頭文字を取って「LVHA(ラブハ)」で覚えておきましょう。
a:link { color:#06c; text-decoration:none; }
a:visited { color:#609; text-decoration:none; }
a:hover { color:#F60; text-decoration:underline; }
a:active { text-decoration:none; }

タグ(ブログ内検索もできます)html xhtml link リンク

13:54  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.10(Tue)

【xhtml/css】xhtml(html)やcssのコードをチェックするツール色々

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
htmlやCSSをコーディングしていると、本当にコードが正当(valid)なのかどうかを確かめたくなるところ。記述している時には十分に気をつけているつもりが、ちょっとしたケアレスミスが後から発覚するケースも多いはず。

クライアントからもW3Cでvalidでとか、lintで何点以上とか依頼をされることもあるのではないでしょうか?
htmlやcssのコードはブラウザで簡単に確認されてしまうので、情けないコードは書きたくないところ。という訳で自分が過去に使っていたコードチェッカーを紹介してみます。

タグ(ブログ内検索もできます)xhtml html css コード チェック

07:14  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.09(Mon)

【html/xhtml】ユーザビリティを高める「<label>」の使い方

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
文字コード宣言と日本語の出現位置の関係に続いて、もう一つ書きたかったのが「<label>」の使い方です。

意外と「<label>」の存在自体を知らない方が多いのではないかな?
「<label>」はフォーム要素に使われるタグで「<input type="text">」や「<input type="radio">」等と共に使われます。

タグ(ブログ内検索もできます)html xhtml label ラベル

23:38  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.06(Fri)

【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
随分前CSS/XHTMLカテゴリに関して何かしら記事を書かなければ!と書きましたが、忘れてた訳じゃなく何を書いたら良いのか考えあぐんでいました。

Web業界は時間の流れが速く、ちょっと離れている間にあっと言う間に自分が持っている知識が過去のものになってしまいます。要するに陳腐化するのが早い訳です。

そんな中にありながら今でも色々なサイトにアクセスすると、昔とった杵柄というか職業癖からついついソースを見てしまうことがあるのですが、意外と多くのサイトで見かけたのがhtml(またはxhtml)の「文字コード宣言」と日本語、特に「title」タグの位置関係です。

タグ(ブログ内検索もできます)html xhtml 文字コード宣言 title 日本語

07:06  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2008.06.05(Thu)

FC2ブログでページによってmetaタグの「description」を切り替える方法


今回はFC2ブログでmetaタグの「description」の内容を、ページによって切り替える方法を説明。

SEO的にも「description」は対して重視されていないので無視しても良いと思う。今回わざわざ「description」をカスタマイズしたのは、丁度昨年の6月に導入したGoogleウェブマスターツールで「descriptionが同じページが沢山ありますよ!」というエラーを吐いていたため。
(Googleウェブマスターツールは外部リンクや内部リンク、検索キーワードとWebサイトの詳細な情報を取得できる便利なツールです。しかも無料!)

実害はないんだけど、同じ「description」が表示されているのは気持ちが良いものではないし、それにエラーが出てしまっているのが気持ち悪い。

という訳で、FC2ブログでトップページや個別ページ、アーカイブページで「description」を切り替える方法をまとめてみました。

タグ(ブログ内検索もできます)FC2ブログ html description meta カスタマイズ

08:18  |  Web/ブログ  |  TB(0)  |  CM(1)  |  EDIT  |  Top↑
2008.05.15(Thu)

FC2ブログで個別記事のタイトルをページによってh1、h2に切り替える


この前FC2ブログの「<title>」タグをページ毎に切り替えるカスタマイズ方法を紹介したけど、今回はエントリーのタイトルをページによってh1、h2に切り替える方法を紹介。

切り替え方法を説明する前にhtmlを説明。このブログもそうだけど、インターネット上に存在する全てのWebページはhtmlで出来ている。試しにブラウザ(Internet Exploreとか)のメニューで「ソースを表示」でクリックすると、英語に似たような文字でズラズラと訳の分からん文字があるよね?
それがWebページの実態。ブラウザはhtmlを解釈してビジュアルに表示してくれているって訳。

このhtmlには「書く決まり」、つまり文法がある。そしてhtmlの文法は「文書」を想定している。文書とはwordソフトで文章を書くことを想定すると分かり易い。
htmlで書かれた文章は「h1」で大見出しを書き、以降の見出しには段階的に「h2、h3、h4、h5、h6」を使うことになっている。wordソフトでも一番上にその文書の見出しを書くよね?それと同じでhtmlでは文書の大見出しをh1で書くという決まりがある。

SEO対策的にもhtmlの文法に則って書くというのは効果が高いと言われている。SEOについては専門的に解説しているページがあるで、ここでは多くは述べない。要するにきちんとhtmlの文法に基づいて書かれたWebページの方が検索エンジンで検索した結果に載りやすくなるということ。

タグ(ブログ内検索もできます)FC2ブログ html タイトル カスタマイズ

10:37  |  Web/ブログ  |  TB(1)  |  CM(1)  |  EDIT  |  Top↑
2008.05.08(Thu)

FC2ブログの「<title>」タグをページ毎に切り替えるカスタマイズ方法


livedoorブログからFC2ブログに引っ越し大分FC2ブログの使い方にも慣れた。慣れて来るとやってみたくなるのがhtmlやCSSのテンプレートのカスタマイズ。

今回は、トップページ、個別記事ページ、アーカイブ、カテゴリ、検索結果で「<title>」で表示する内容を切り替える方法を考えてみた。
ページの表題になる「<title>」に適切な内容を記述することはユーザビリティ、検索エンジン対策の両方で重要だ。
多くの読者にブログを読んでもらいたいのなら、ページ内容に相応しい「<title>」を表示するのが良い。

タグ(ブログ内検索もできます)FC2ブログ title html タグ タイトル カスタマイズ

22:13  |  Web/ブログ  |  TB(0)  |  CM(1)  |  EDIT  |  Top↑
2008.04.17(Thu)

ブログにtableで作った表やコードを貼るのに便利な2つのTips


久しぶりに立て続けにエントリー。今度はブログにtableを貼る場合の便利なTips。今更感じもしなくもないけど今まで有効な方法を知らなかったので、自分へのメモを含めてエントリー。

tableで表を掲載したエントリーと言えばこのブログでは、例えば、「TAMRONから「SP AF70-200mm F/2.8 Di (Model A001)」が発表されていた!」というエントリーではレンズのスペック表を、「ブラウザのレンダリングモード切替スイッチ一覧」では一覧表をtableで作ったけど、これが結構大変だった。
まず一覧表をエクセル表で作り、内容を確認して、今度はそれをhtmlエディタでtableタグで書いて・・・・という具合。

いちいちtableを書くのも面倒だし、エクセル表も作っているので二度手間になってしまう。かと言っていきなりtalbeタグで表を書いてしまうと途中で表組みを変えたり、表をチェックするのにブラウザで開いたりしなければならず面倒だったりする。

そこでエクセル表からtableタグを生成し、それをFC2ブログに貼る方法を紹介する。

タグ(ブログ内検索もできます)web ブログ FC2ブログ html

21:10  |  Web/ブログ  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
 | BLOGTOP |  NEXT