2010年11月19日

どうでもいい、と言えばそれまでなんですけどね。


最近、Google Chromeの表示で、サイトの更新をサボッているアラフォー親父なんですが

理由は、テキスト文章のコピー&ペーストは出来るのだが

なぜかHTMLタグを入れた文章を受け付けてくれない・・


 という、とても簡単な理由ですので、

このブログの更新にはFire FOXを使って行おうか?と考えているからなんですね。


 「じゃぁ〜プラウザを立ち上げればいい事じゃん」と

お叱りの声が、天から聞こえてきそうなのですが、

元来のめんどくさがり屋の為、ついGoolgle Chromeを立ち上げてしまう筆者なのです。


 で・・ここで、なぜそうまでして、ブログについているエディタを使わずに

テキスト・エディタを使用して、ブログの記事を記載しているのか?

という疑問もあると思いますので、少し説明しておきます。



  1. ブログのエディタは基本的にWYSIWYGタイプなので、勝手にHTMLタグがはいる

  2. 便利だけど、デメリットも存在している

  3. 予期しないタグが入ったり、不必要な装飾タグが入る事もある

  4. W3CというHTML文法機構から見て、いかにも「マズイ」タグの入り方をする場合がある

  5. <ul><ol><dl>などのリストでは、基本的に<ul><ol>のみで<dl>などの定義リストは、ほぼ使えない

  6. もちろん使いたくないtableタグも、基本お任せしか方法が無い

  7. ブログのCSSを少し弄っているので、<em>や<strong>タグでは色が変わるようにしている。WYSIWYGタイプのエディタでは、strongタグは<b>をックリックして表示されてしまうので、少し使いにくい


 まあ・・偉そうな事を言うほど、筆者自身のタグは上手ではないのかもしれませんが、

タグの中に強制改行タグ<br />(もしくは<br>です)がありますが、

一行をスペースとして扱う際には、本来ならば&nbsp;を使わなければいけないのですが

<br>の2〜3連発など、ザラに存在しているのが、

現在のブログエディタの実情なんですね・・・


 いけないという事はありません(プラウザでキチンと表示されればいいのですから)

しかし、SEO的な問題として考えると

やはり、タグはキチンと記載されていないと、検索順位が直ぐに落ちてしまう

という弊害も起こってしまいます。


 最近は、そんな事も無いのかも知れませんけど、

やはり、楽だからといって、使わなければ忘れてしまうのが、

HTMLタグやCSSの知識、(phpやJavaもそうですねぃ)


 筆者は、これでメシを食っているわけではないのですが

素人と云えども、あまり恥ずかしくないタグを記載しておきたいというのが本音です


 そんなわけで、HTMLタグは自分で入れておきたいのだけれども

という気持ちでブログを記載しているわけなんですよね。


 そんな、いらんコダワリも、あと数年たったら、全く不必要になるとはおもいますが

このブログの主旨を考えてみると、そんな事は理由にはならんだろう・・

と考えて、タグの入れ子を行っているわけなんです。


 実は・・慣れると、タグを入れる事は、全然苦にはなりません。

 使うと云っても、ブログ程度では、p,em,strong,br,に

ul,ol,dl,dt,dd,blockquote,位で、別にねぇ〜

input typeやoption valueを乱発するページばかり作っているわけではありませんから

ごく普通のタグで構わないわけなんです。


 まあ、つまらないコダワリとも言える筆者の考え方ではありますけど

まだまだWYSIWYGタイプのエディタには、信頼がおけない部分が多々ありますので

まだまだ筆者は、この方法をつかっていくつもりなんです。

(個人の自由と言えば、それでバッサリなんですがね・・ハハ(ノд`)/~)

 
  ;ps :
 HTMLタグを入れてもね・・・なぜか、seesaaでは、勝手に<br />が入るので
どうにもならないみたいですわ・・・・
タグ:タグ
posted by アラフォー親父 at 13:18 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年11月05日

(今更ですが・・)XHTMLのタグの意味とは?

  今回は、XHTMLのタグの意味について、記載しておこくと思います。

 お手持ちの、テキスト・エディタなどで、コピー&ペーストして、

保存したり・・アンチョコとして活用するなり、なんなりとお使い下さい。

 ではいきます(何の話だか!)

xhtml 対応要素一覧表

文書構造 

html      最上位要素 
head     文書情報 
body     文書本文 
title       文書タイトル 
base     基準uri 
link        リンク 
meta     メタデータ 
p           段落 
pre        整形済みテキスト 
h1-6      見出し 
br /        強制改行 
hr /        水平罫線 

リンク 

a           リンク、アンカー 

文字方向 

bdo       文字方向指定 

意味 

abbr      略語 
acronym   頭字語 
address   問い合わせ先 
q         短い引用 
blockquote 長い引用 
cite       引用元 
em        強調 
strong     強い強調  
code      ソースコード 
dfn        定義語 
kbd       入力文字 
samp      出力サンプル 
var             変数 
del       削除部分 
ins       追加部分 

フォント(単なる装飾タグ・・非推奨ですたぃ)

big        大きく 
small      小さく 
b         太字 
i         イタリック(斜体) 
tt        等角 (等幅)
sub       下付き文字 
sup       上付き文字  
font フォント    (非推奨)
basefont    基本フォント (非推奨)
s 字消線   (非推奨)
strike      字消線 (非推奨)
u 下線    (非推奨)

画像 
img        画像 
map       イメージマップ 
area       イメージマップの領域 

リスト 

ul リスト 
ol          番号つきリスト 
li           リスト項目 
dl          定義リスト 
dt          定義対象 
dd          定義対象説明 
dir       ディレクトリリスト (非推奨)
menu     メニューリスト (非推奨)

スタイル 

style       スタイルシート 
div         ブロック要素 
span       インライン要素 
center      中央表示 (非推奨)

テーブル 

table      表 
caption    表タイトル 
thead     表ヘッダ 
tbody     表本体 
tfoot      表フッタ 
tr                行 
th               列のヘッダ 
td               データセル 
col              行の属性共有 
colgroup     行のグループ化 

フォーム 

form            フォーム 
input           入力項目 
button        ボタン 
textarea      複数行入力欄 
select          選択メニュー 
option         選択肢 
optgroup     選択肢のグループ化 
fieldset        入力項目のグループ化 
legend         入力項目グループタイトル 
label            入力項目のラベル 
isindex         1行入力フィールド (非推奨)

フレーム (非推奨)

frameset       フレーム (非推奨)
frame            フレーム内容 (非推奨)
iframe           インラインフレーム (非推奨)
noframes      フレーム未対応 (非推奨)

スクリプト 

script            スクリプト 
noscript        スクリプト未対応 

ルビ (非推奨)

ruby           ルビ (非推奨)
rb               ルビ対象 (非推奨)
rbc             ルビ対象構成要素 (非推奨)
rt               ルビテキスト (非推奨)
rtc             ルビテキスト構成要素 (非推奨)
rp              ルビ未対応用括弧 (非推奨)

オブジェクト 

object        オブジェクト 
param        パラメータ 
applet ava  アプレット (非推奨)

よく使われる文字実体参照
  
<   &lt;       小なり 
>   &gt;       大なり 
&     &amp;    アンパサンド 
"      &quot;    二重引用符 

        &nbsp;    スペース ( 改行禁止スペース ) 
c      &copy;      著作権 
R      &reg;       登録商標 

    タグの意味が、判らんぞ!という時に、使ってみて下さい。

 ちなみに、非推奨タグは、基本的にCSSスタイルシートで指定しておくわけですが

 文字の装飾タグは、使わないので、実質的に使うタグは限られてはおりますが・・・・

  では・・・・PCのクリティカル・ヒットにはご注意を!
  

タグ:XHTML
posted by アラフォー親父 at 18:34 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年08月21日

IEハック・・プラウザバージョンアップの呼びかけ

 というお題で始まりましたが、筆者自身このブログで何回も言っているのですが・・
プラウザは最新の物を使いましょうよ!ということなのです。

  1. サポートが無いので、セキュリティが不安
  2. CSSへの対応度の違いで、綺麗なページを見れない
  3. CSSでの角丸やシャドウなどは、全く反映されない(特にIEは8になってもダメ)
 そこで、ついに呼びかけ行動のタグを記載してみようかと考えました。
 ie6.jpg

もしですよ、旧タイプのプラウザを使っている人が、あなたのサイトに訪問したとしましょう。
そんな時に、この様な警告というかアドバイス画面が出るようにしておく
IEハックです(IE6で出るようにしています)

IE6 No Moreというサイトからの引用です。
<!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div> </div> <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div> </div> </div> <![endif]-->

これを<head>〜</head>間に貼付けるだけでOKです。
Htmlを操作できるブログ、HPいずれでもOKです・・あっ・・
アメちゃん(アメブロ)はユーザーは、Htmlは操作できませんので、あしからず。

タグ:IE
posted by アラフォー親父 at 11:29 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年07月26日

HTML5の文章宣言の部分

 もう段々とXHTMLからHTML5へのマスターが進んでいる人も多いかと思います。

そこで、非常に簡単ではありますが、HTML5での文章宣言パターンを書いておきましょう!

(なぁ〜んて大それた・・・上段の構えじゃ・・)

と云う事で、行ってみよぅ!

 


<!DOCTYPE html><!--これだけです(今までは何だったんだ・・-->
     
<html lang="ja"><!--jaは日本語です。-->

<head>
     
<meta charset="UTF-8"><!--文字コードは随時変更ッス!-->

 
<title>ホームページタイトルでごんす</title>

 
<meta name="description" content="サイトの説明文を入れましょう">
  
<meta name="keywords" content="サイトのキーワードを入れます">
  
<meta name="author" content="あなたの名前や会社サイト名でもイイッス">
  
<meta http-equiv="Content-Script-Type" content="text/javascript" />
  
<meta http-equiv="Content-Style-Type" content="text/css" />
  
<link rel="alternate" href="/feed/index.xml" type="application/rss+xml" title="RSS 2.0">
  
<link href="#####.css" rel="stylesheet" type="text/css" />



 
<!--ここからGoogleから引っ張るjqueryの部分です、これがあるとIEでの表示は大体OKかな?-->


  
<script src="http://www.google.com/jsapi"></script>
  
<script>google.load("jquery", "1.4");</script>
  
<script src="./js/share.js"></script>
  
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
<script src="./js/ga.js"></script>

</head>

 


 ザァ〜とこんな感じですが、この部分は・・・なんだったっけ

ゼンコーディング!?というやつでは、マークアップしておりません。


 じゃじゃじゃじゃあ・・何?(水曜どうでしょうプロデューサー風に・・)

これは・・Meryで一発入力して、そのファイルをTTT Editorで<を実体文字へ一発変換

という手順で表示させていますです。

ちょっと足りない文章宣言の一部は、Tera Padでチョチョィと修正という荒業。


 それって少し面倒じゃない?と言われてしまいそうですが、

例の如く筆者は、色々なエディタを使っていますので、

一つをじっくりコトコト、というタイプではございません。(でも無いか・・)

とりあえず、足りない機能は他で補うというスタイルですから、

訳がわからんHTMLエンジン使うくらいなら、テキスト・エディタでゴリ押しです。

(大体ネットに接続していなかったら、エンジン使えんでしょう?ネット環境の悪い田舎ですから)


 ポチポチと、エディタにHTML5を染みこませなければいけませんが、

一度染みこませれば、USBに入れても使えるところがエライわけです。

では、今回はそんなところで・・・・

タグ:HTML5
posted by アラフォー親父 at 08:50 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年07月23日

HTML5覚書

 大したことではないけれど、覚えておかなきゃ話にならない!

といった感じのHTML5なのですが、今までXHTMLでサイト構築を行っていた人にとってみたら

根本的な部分を変えなければいけないポイントがあるんですよ。


 簡単に言えば、XHTML+CSSなどでサイト構築をしている時には、

IDとクラス名を指定することが普通でした。

簡単な例でいけば



  • XHTML              CSS

  • <div id=ヘッダー・・・・・#ヘッダー

  • <div id="header">・・・#header


 こんな感じで<div id=></div>による指定をXHTML側で行ない

CSSスタイルシートでは、#もしくは .#で指定して、XHTML側へデザイン部分を反映させる!

という1つの決まり事がありましたが・・HTML5では、実は最後の手段になります


 簡潔に言えば、HTML5でブログ投稿には article を使い、

1つの章には section を使い、ページのナビゲーションには nav を使いなさいよ

といった決まりごとがあるのだから、初めっから<divで指定してはいけません!

とW3Cが言っているわけです(あ〜なんだかなぁ〜)


 しかし、全く使えないのか?といった事ではなく。

例えば、<p>段落内部の一部分だけに、あるスタイルを適用させたり

(かえって面倒ですが)

langを使って、そこだけ他国の言語であることを表したり

(本文はlang=en-usだけど、その一部だけlang=en-GBなんだよ〜といった使い方)

をして下さいというわけです。


タグ:HTML5
posted by アラフォー親父 at 10:08 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年07月02日

html5

 現在主流のXHTML1.0から、少しづつhtml 5 のタグ知識などを、
自分の脳に入れ子している状態ですが、(その気になれば、一挙に出来るだろう!と考えています)
文章宣言の簡略化や、今まで使用していた(XHTMLですね)id・クラス名の認識を変えたりで、
頭の中が、グワァングワァンしてきそうですね。

 まあ・・端的に言えば、タグの量にしても、記載にしても、XHTMLなどと比べて簡単になってきているのですが
多少なりとも、違いがありますから、アンチョコは必要になってくると思います。

 単純に言えば、“文章宣言の違い”は、個人的には大歓迎という感覚です。

何と言っても今までは、長〜い文章宣言を記載しなければいけなかったわけですから、
その違いを少し見てみましょう。

HTML 4.01 Transitionalの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Transitionalの場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5の場合
<!DOCTYPE html>

 「えっ!」と思うかもしれませんが、短いのですよ。
html 5 と宣言する必要も無く、長〜い宣言文章を記載しなくても構わないわけです。

 それに加えて、今までは文字コード指定を定めるために使われていた
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
の部分も(長いでしょう・・)
<meta charset="UTF-8">で済んでしまうわけです。

 しかし、最初に説明していますが、
今までidやクラス名として<div id="">で指定していた部分が
単純に<header>タグや<article>といった呼び名に変わっていますので、
CSSスタイルシートとの連携を考えた場合に、「どうしようか?」になってしまう事があるわけですね。

 もう少し覚え込むまで時間がかかってしまいますが、
随時このHTML 5に関しては、色々と記載していこうと思います。

タグ:HTML5
posted by アラフォー親父 at 13:31 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年05月07日

HTML5で追加される予定の要素(タグ)

HTML5では、HTML 4には無かった以下の要素が新たに追加される予定です

(あくまでも予定ということですが・・)



<article>
記事であることを示す

<aside>
余談であることを示す

<audio>
音声を再生する

<canvas>
図形を描く

<command>
操作メニューの各コマンドを指定する

<datalist>
入力候補となるデータリストを定義する

<details>
備考や操作手段などの詳細情報を示す

<embed>
プラグインデータを埋め込む

<figcaption>
図表のキャプションを示す

<figure>
図表であることを示す

<footer>
フッタであることを示す

<header>
ヘッダであることを示す

<hgroup>
セクションの見出しを表す、見出しをまとめる

<keygen>
フォーム送信時にキーを発行する

<mark>
文書内の該当テキストを目立たせる

<menu>
操作メニューを作成する

<meter>
規定範囲内の測定値を表す

<nav>
ナビゲーションであることを示す

<output>
計算結果を示す

<progress>
タスク完了までの進行状況を示す

<section>
一つのセクションであることを示す

<source>
動画や音声などのURLや種類を指定する

<summary>
<details>の内容の要約を示す

<time>
日付や時刻を正確に示す

<video>
動画を再生する

<rp>
ルビを囲む記号を指定する

<rt>
ルビのテキストを指定する

<ruby>
ルビをふる


 ザ〜と記載しておきましたけど、スグに馴染めそうなタグがあるかと思えば
「う〜ん・・canvasなんて、いつ使うの?」

と感じるタグも当然ござんす。

個人的には、定義リストは今までの<dl><dt><dd>の方が・・

今更datalistにタグを変えるのか?と感じるところもあり・・

テーブル・タグの表題<caption>が、HTML5では
figcaptionという呼び名に変わったりと・・ちょっと混乱してしまうかもしれませんね。
とはいえHTML5のメリットは、今までJAVAでないと出来なかった部分が
HTMLで出来てしまったりするわけですから、とりあえず覚えるしかございませんね。


しかしながら、当然IE8の対応は遅れると個人的には考えていますので
常用という形になるまでは、今しばらく時間はかかるでしょう。

タグ:HTML5
posted by アラフォー親父 at 17:34 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年04月06日

Html-5で、廃止される予定のタグ

 ということで、マーク・アップ言語を取り扱っている方なら、

すでに御存じどとは思いますが、筆者と同じで忘れっぽい方の為に、

廃止されると言われているhtmlタグをシェアしておきましょう。


HTML5で廃止される予定の要素リストは以下の通りです


<acronym>
略語(頭字語)であることを表す

<applet>
JAVAアプレットを挿入する

<basefont>
テキストの基準サイズ・基準色・基準フォントを指定する

<bgsound>
効果音・BGMを鳴らす

<big>
テキストのサイズをひとまわり大きくする

<blink>
文字を点滅させる

<center>
センタリングする

<dir>
リストを表示する

<font>
フォントの種類・大きさ・色を指定する

<frame>
フレームに表示するファイルを指定する

<frameset>
ウィンドウをフレームに分割する

<isindex>
検索キーワードの入力欄を作る

<listing>
ソースをそのまま表示する

<marquee>
文字をスクロールさせる
<nobr>
改行なしで表示する

<noembed>
プラグインが利用できない環境用の表示内容を指定する

<noframes>
フレームが表示できない環境用の表示内容を指定する

<plaintext>
ソースをそのまま表示する

<s>
打ち消し線を引く

<spacer>
スペースを挿入する

<strike>
打ち消し線を引く

<tt>
等幅フォントで表示する

<u>
テキストに下線(アンダーライン)を引く

<wbr>
<nobr>内で改行しても良い位置を指定する

<xmp>
ソースをそのまま表示する


 という事で、知っておくと後々便利な事が多くあると思いますよ。
posted by アラフォー親父 at 10:07 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年03月31日

未だに悩むサイト作りの選択肢

 ども!相変わらず寒い日々で、どうしてもPCの前が辛いアラフォーです。

とまあ、世間一般のご挨拶は横に置いておいて

未だに悩む部分として



  1. CMSを使いサイト構築を行う

  2. ブログ形式で、サイト構築を行う

  3. 普通のhtmlファイル中心でサイト構築を行う

  4. PHPを用いて、サイト構築を行う

  5. フラッシュを用いて、見栄えの良いサイトを作る


 簡単に振り分けましたが、現在のサイト制作の方法として、

以上のようなものが考えられるわけなのですが・・

 それぞれ、メリットもあればデメリットもあるわけですね・・・



CMSを使いサイト構築を行う

まずはサーバーに対する知識が、ある程度ないと導入すら出来ない事もあります。またCMSの違いによって、テンプレートやCMS特有のタグが存在しているので、CMSの使い方を覚えるまで時間は必要です。しかし一度構築できれば、WEBページやブログ形式など多岐多様な方法を選択出来ます。

ブログ形式で、サイト構築を行う

無料・サーバーインストール型など、様々なタイプがありますが、いずれにしてもサイトの更新頻度の高さで、アクセス数がきまってくるという基本的なルールが存在します。確かに裏技的なサイト更新方法もありますが・・・いずれはスパム行為として発覚してしまいますので、使わない方がいいに決まっています。

普通のhtmlファイル中心でサイト構築を行う

昔はフレーム対応でサイトの更新を楽に行っていましたが、SEO対策の面などから、検索エンジンのクローラーが嫌う傾向がありますので、必然的にXHTML+CSSというスタイルになり、サイト更新時のメニュー追加が悩みの種になってしまいます。特にページ数が50pを超えるサイトを管理する場合では、普通にサイト更新を行うと、その労力は・・・半端ではございません。

PHPを用いて、サイト構築を行う

まずは大前提として、PHPの知識が必要なのは言うまでもありませんが、PHP言語でサイトを作る場合は動的アドレスというものになり、今までは検索エンジンが嫌う傾向がありました。しかし現在は様々な手法で、動的アドレスを静的アドレスとして設定出来る機能もありますので、これからのサイト制作時にはメインになってくると予想されます。(htmlよりもサイト更新が楽な要素が多いわけです)

フラッシュを用いて、見栄えの良いサイトを作る

まあ・・確かに見栄えはいいのですが、フラッシュを使う技術自体、アドビーが主流になっていますので、おいそれと一般の人が、フラッシュファイルを作れるエディタを購入する事が出来ません(あまりにも高価です)よって、現在はホームページ制作会社などが、ほぼ独占している状態なのですが、フラッシュ技術でサイトを作ると、検索エンジンのクローラーがやって来ない現象も起こる場合があります。フォトギャラリー系のサイト制作なら、メリットはありますが、ユーザー側のPCでフラッシュ解除の設定がなされていると、まるで効果がありません(JAVAも同じですね・・)


 何だかんだと言ってはいますが、ごくごく普通の一般人がサイトを構築&管理する場合では、ブログ型サイトの方が、現在はメリットが大きいわけです。

 しかし・・・htmlで制作したサイトのメリットが、多少ほったらかし状態でもサイトへアクセスが見込める!という効果を無視する事は出来ませんので、

サイト更新の労力さえなんとかなれば、まだまだhtmlファイル中心のサイトは捨てきることが出来ないわけです。


 じゃあ、サイトの更新方法をどうしていくか?は、また次回のお話で

(あるツールを使えば、楽に行えるのです)


タグ:選択肢
posted by アラフォー親父 at 16:11 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2010年01月17日

内部リンクを貼るときにきを付けること

 久しぶりにホームページを作る話題を!と思いまして、今回は記事をUpしておきます。

最近は、ブログCMSの、更新が楽なメリットに押され気味なのですが、

phpやJavaを使わずに普通のHTMLファイルで作られたホームページの

更新を楽にする方法はあるのか?についてなのですが。


 サーバーに一つのフォルダーを作り、index,htmlファイルをアップしますよね。

そのindexファイルと同じフォルダー内に、もう一つのフォルダーを作り、テーマに合わせたhtmlファイルを作って、最初に作ったindexにリンクを貼りますと、サイトの更新を行った時の労力は
多少は楽になりますが!

 リンクをしても、ページが表示されないよ!という事を経験していませんか?


 トップページへのリンクは<a href="index.html">トップページ</a>ですが

フォルダーへのリンクは、すこし書き方が違います。

<a href=".フォルダ名/○○.html">

という書き方になりますが、このフォルダーからindexへとリンクを行う時は、

<a href="../index.html">という形になります。


 これを知らない初心者の方は、以外と多いようです。

特に最近は、CMSやブログの方で勝手にリンクをしてくれる構造になっていますので、

いざhtmlで50ページ位のサイトを作ろうとすると「あれ?」という事になりかねません。


タグ:リンク
posted by アラフォー親父 at 10:16 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年11月29日

TTT EditorをXHTMLに対応させる為に必要なXHTMLとHTMLの違いについて。

HTMLとXHTMLの違い

 え〜久しぶりにHTMLの話題について、お話しておこうかな・・と考えたのですが。
どうなんでしょうかね?
WYSIWYG編集でやっているから、関係ないよ!となるのでしょうか?

 知らないよりも、知っておいた方が断然いいので、HTMLのマークアップに慣れてきたと仮定して
XHTMLでマークアップする際の注意点に触れておこうと思います。

  1. タグ内の要素名と属性名は必ず小文字で書く
  2. 属性値には必ず引用符(ダブル・シングルクォーテーション)で囲む
  3. 空要素は最後にスラッシュを付加するか、終了タグを付ける
  4. 「&」は必ず「&amp;」と記述する
  5. XMLバージョンとドキュメントタイプを記述する
  6. タグは必ずウェル・フォームドにする

 簡単に挙げてみましたが(他にもあるのですが、まあいいでしょう)
この中で、ブログ原稿を書いたりする時に関わってくる事は、1・3・5になると思います。

 4番目の項目などは、無料ブログだろうがワードプレスだろうが、テンプレートを使用した場合は
ほぼ記載されていますので除外ですね。
2番目の項目も、スタイルシートとの兼ね合いから派生してきますので、これも除外です。

 そこで1・3・5の項目は、直接マークアップする部分ですから
しっかりと把握しておかなければいけません。

タグ内の要素名と属性名は必ず小文字で書く
これはもうお約束になっていますから、HTMLエディタを使おうが、テキスト・エディタを使おうが必ず小文字でタグ入力をするという事です。
もし大文字でタグ入力を行うエディタを使っているならば、設定などで変更しておけばいいわけですね。
空要素は最後にスラッシュを付加するか、終了タグを付ける
HTMLエディタなどの設定で、終了タグをセットで入力するという部分があったら、必ず設定しておけば大丈夫のはずです。
空要素でもXHTML入力時に書き方が違うのは<br>と<hr>になります。
またmetaデータなどは、テンプレートに記載されていますから関係ありませんので、
タグ入力の際には<br><hr>を<br /><hr />と記載します。
タグは必ずウェル・フォームドにする
難しく書いていますが、要は<p><em>〜</p></em>などとタグを入れてはいけないという事なんです。
この場合では<p><em>〜</em></p>が正解です。
 かなり簡単に記載したのですが実際使うとしても、こんな感じで憶えるだけで、ほぼ対応出来ます。

 なんでこんなつまらない話しをしたかと言いますと、前回TTT Editorの話をちょっと行いました。
ちょいとセッティングすると、このSeeserブログならばブログ・エディタとして使い勝手がいいわけです。
JimdoというCMSなども文字コードがS-JISですから、対応出来るわけなんですね。
筆者は使っていないのですが、FC2ブログの文字コードEUC-JPも、このTTT Editorで対応出来ます。

 一からホームページ用のHTMLファイルを作るのと違い、無料ブログなどの構文をつくるのであれば、
ドキュメント宣言も、メタデータも記載不要になり、要は文章内容の部分を作るだけですから、
そんなに難しくはないわけです。

 UTF-8の文字コードを使っている場合はどうするのか?って・・・心配は必要ありません。

 Crescent Eve という素晴らしいエディタソフトの制作者さんが、KanjiTranslator 1.6というソフトを
作っています。
このKanjiTranslator 1.6というソフトは、文字コードの変換をファイルごと行ってくれるという
大変便利なソフトになります。

 例えばUTF-8の文字コードで作られたファイルを、文字コードS-JISに変更して使いたいという時に
KanjiTranslator 1.6のソフトを使えば、簡単に変更してくれるという優れ物なんですね。

 そんなわけで、TTT Editorで使えない文字コードUTF-8のファイルでも、S-JISやEUC-JPに変更して使い
再び元の文字コード(UTF-8)に戻して保存するという芸当も難なく行えます。

 つまり、このKanjiTranslator 1.6が自分のパソコン内にあれば、ファイルの文字コードが違うので
このエディタでは使えないといった事が無くなるわけなんです。(知っていました?)

 そんなわけで、文字コードが違うから使用を諦めていたTTT Editorが復活するわけです。
posted by アラフォー親父 at 13:01 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年10月27日

HTML5は今までと全く違う!


 前回話が横にそれていたのかな?とは考えましたが、これからホームページを作ろうとする人は、HTMLとCSS。それに加えてphp・Javaの知識が必須になると思います。

 HTMLも今までが4.01止まりだったので、必然的にXML系列のXHTML1.0を使う事が多くなってきたわけなんですが、これからHTML5という基準が設けられようとしています。

 Web制作者の側から見たら、今更HTML?と思われがちですけど、このHTML5は今までのHTML規格で使われていた、ブロックレベル要素やインライン要素という概念が無くなり
(そう・・無くなるんですよ)
対象とするコンテンツごとに分類していくコンテンツ・モデルという概念に変わってしまいます。

 今までが文章の閲覧が主体となっていたHTMLをWEBアプリケーション構築の為に、HTMLを使っちゃえ!という目的があるんですね。

 それに加えてといってはなんですが、このHTML5は従来のHTML仕様に比べても厳格な規格になっていますので、それに従ってタグを付けていかなければならなくなっています。

 覚える要素が増えていますので、こりゃ〜中々大変ですわい!という印象。


 ちょっとHTML5と今のXHTMLやHTMLとを比べてみますと、

今まで<div id="header">で使用していたヘッダー情報などが
<header></header>
という形にしなければならなくなります。

同じ様に<div id="sideber">でホームページのサイド・メニューなんかをCSSとの絡みなどで指定していましたが、
これが<aside></aside>という形に変更されるわけなんです。

 このHTML5自体がインタラクション・デザインに対応しているので、もう覚える事が増えまくり!という状態になるでしょう。

インタラクションは相互作用という事なんですけど、これがまた・・ユーザーがホームページを見ますよね、この時に記事の順番を変えたり、サイトの色や線の色を変える事が出来るようになるのがHTML5なんです。

 MyYahooなんかで、記事を入れ替えたりしていますが、つまりはあれと同じ事を自分のホームページで出来るようにしていくのがHTML5というわけなんですわ。

 今までは巨大なサーバー側でしか行えなかった事を、一般のレンタルサーバーのホームページでも行えるようになってくるわけですから、こりゃ〜もう、ユーザー側の使いやすさが物凄く向上していくわけなんです。

 ただし、今すぐ使えるのか?といいますと、これがまたマイクロソフトのIE6・7・・おまけについ最近出たIE8は対応出来ていません。インターネット・エクスプローラーは現在全滅状態というわけです。
 対応度というか、反応が早かったのが当然のごとくApple社がMacとウィンドゥで提供しているプラウザのSafari3.2以上FireFOX3.5 beta4, Opera9以上という対応度になっています。Google Chromeはちと出遅れていますけど・・なんせGoogleですからね。

 当分HTML5の普及は、浸透していくスピードが早まって来る事はないと思いますけど、IPoneやNokai端末などと同じGoogleのAndroid端末などでHTML5活用の基盤を早急に整える可能性があります。

 こうなるとプラウザの浸透も早まってくるでしょうから、ホームページビルダーを購入している場合では無いわけですね(笑

 
posted by アラフォー親父 at 11:38 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
最近のコメント