当サイトは、ＷＥＢ構築や、ＨＴＭＬ・ＣＳＳコーディング、ホームページ作成の為のアシストを目的としたサイトです。
全て、ＨＴＭＬで記述されているため、テンプレートやホームページ作成ソフトは使用していません。
Last updated date
☆PRE OPEN☆ 2010.08.06
☆OPEN☆ 2010.08.12
このページの更新履歴制作ツール・マシン追加
2010.09.06ＳＥＯ対策について
2010.08.31リストの定義
ブロックレベル要素
HTML内へのCSS記述法
画像についてについて
テキストの表示位置指定
2010.08.12
サイトマップアップしました。
2010.08.11
マシン環境（ページ追加）しました。
2010.08.10
PHOTO（ページ追加）しました。
2010.08.10
コーディングヒストリー（ページ追加）しました。
2010.08.09
Pryvacy_policy設置しました。
2010.08.07
掲示板(WEB FORUM)設置しました。
2010.08.06
トップページへ写真一部掲載しました。
2010.08.05 ホームページ仮開設 ブログ開始しました。コメント可
★CONTENTS★PRE OPEN 2010.8.05 LIFE STYLE 2010.8.05 WEB FORUM 2010.8.07
一般公開用ＨＰ
企画/制作中のため現在未公開です。
SMALL OFFICE(ホームオフィス)
Club Activity(サークル活動)
Volunteer Work(ボランティア活動)
WEB TEAM
※パスワードを入力してください
☆コーディングヒストリーnew
☆マシン環境
デスクトップＰＣ
☆WIN98☆ ☆WIN2000☆☆WINXP☆ ☆WINXP MCE☆
☆WINVistaデュアルブート☆
☆WIN7pro☆
☆WIN8.1pro☆
☆WIN10pro☆
ノートＰＣ
- ☆WINXP HITACHI PCF-200D4TMA
- ☆WIN7core i3note ACER 5542-M23
- ☆WIN10core i7note ASUS X550Lシリーズ
Tool:
ADOBE CREATIVE SUITE 5PHOTSHOPro
illustrator
DreamWeaver
OfficeProfessional2007・2010・2013
ホームページビルダー
Wordpress
GIMP
☆BIBLE☆
受講用For guidance
☆HTML構文チェック☆
☆HTMLエディタ
☆FTPクライアント
| コーディング注釈リスト | |
|---|---|
| プライバシーポリシーの記述 | 今回の個人情報保護法については記載漏れのないよう配慮したつもりです。 なるべく引用等は避け、自分の言葉で作成しました。また、リストを使うより テーブルで体裁を整えることにしました。 |
|---|---|
| CGI設置について | 1.XHTMLではscript内にコメントを書くのは、古いブラウザで記述がそのまま表示されるのを 防ぐためですが、本当にコメントとして扱われてしまう可能性があります。本来は、 外部にスクリプトファイルやスタイルファイルを用意しないとだめなようです。 CGIがうまく動作しなかったため、現在そのままです。この件は後ほど、ふれていきます。 2.perl記述によく&が使われますが、ＨＴＭＬでは、文字として表記する場合は、「&」と記述する事で解決します。テキスト内容であれば、全角の＆にすることで回避は可能です。・・・「<」、「>」などもタグの記号です。、文字として表示する場合は、「<」は「<」、「>」は「>」空白が必要な場合は「 」コピーライト「©」は「©」と記述することで解決します。他にも無数にありますが、よく使うのは、これぐらいでしょう |
| OBJECTについて | HTMLでの属性にjavascriptのバージョンを指定するLanguage属性がありますが、XHTMLでは、 type属性を使用しなければなりません。obuject開始タグに以下を記述すると解決します。Language部分を type="text/javascript"と記述することで解決します |
| embedタグについて | X-HTMLでは、推奨されていないタグで現在はOBJECTを使うように指示されています。 現在の処、objectとembed（html属性）を両方記述するようにしています。 理由は、どちらもブラウザーが限定されるためです。 |
| 簡易パスワードについて | セキュリティが懸念されます。情報収集や漏洩防止のため直リンクしたり、それをお気に入りにするような行為は避けるようお願いするしかありません。現状の処はファイル名を推測しにくいものや書き換えることで対処しか方法がないため効率が悪く、リンク切れの可能性もあります。今後は改善していくつもりです。 |
| 画像についてについて | WEBに使用できる画像形式 拡張子（jpg、gif、png等）
GIF・ロゴ、リンクボタン、アイコン、アニメ調のイラストなど JPEG・多くの色数を必要とする写真や、グラデーションのように色調が連続して変化する画像 PNG・GIFに替わるライセンス・フリーの画像形式として開発がブラウザ側非対応等もありあまり一般的ではない |
| 構文チェックについて | 構文チェックをノーエラーにすることは容易です。 禁止された属性を使用しない、記述間違いやタグの配置を間違えないことインラインやブロック属性を把握すればいいだけです。但し内容まではチェックできません。内容に不備がないかチェックするように心がけています |
| リストの定義 | 見出しや段落で補いきれない一連の並列される情報や、順序立ててを説明して体裁を整える場合は、リストで記述したほうが見やすくなります <ul>〜</ul>俗に言う箇条書き 並列的に列挙するときにはul要素を用います <ol>〜</ol>順序立てたリスト 項目の順序が意味を持つ場合、項目に番号を付ける場合などは、ol要素でリストを作成します <dl>〜</dl>定義のあるリスト dl要素は辞書のような形のリストで、用語（dt要素）とその定義（dd要素）からなります。 以下、記述例：-------------------------------- <dl> <dt>（トマト）</dt> <dd>丸い果実で果物ではなく野菜の部類になります</dd> </dl> --------------------------------※多くのブラウザでは、定義語（dt）が太字で強調され、dd要素をインデントして表示します。 |
| ブロックレベル要素 |
ブロックレベル要素は見出し、段落など文書を構成する基本要素となる。ブロックレベル要素には、別のブロック要素やインライン要素を含むことができます 例：見出し<h1>〜</h1>や段落<p>〜</p>など 注意：<p>〜</p>について ブロックレベルに属する要素タイプでも、p要素タイプのようにインライン要素しか持てないものがある |
| インラインレベル要素 | インライン要素は、主としてブロックレベル要素の内容として用いられる インライン要素は、その内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。 |
| HTML内へのCSS記述法 |
通常は外部styleseetに記述しますが個別に特定の箇所だけ適用したい場合には、HTML内に直接記述したほうが有効です。外部スタイルシートには出来るだけ全てのページに反映させるために限らせたほうが管理がしやすいです。 1.HTMLタグに直接埋め込む方法:「style」という属性を指定し、そこでCSSの記述を行います。 記述例：テキストを青字で強調 2.HTMLの<head>〜</head>に直接埋め込む方法:st 最上部に<head>〜</head>で囲まれた部分にCSSの記述を埋め込むというものです。ページ内すべてに適用されます 記述例：同一ページ内のSPANタグ内の文字を赤・太字にする。 |
| テキストの表示位置指定 | box05内のテキストを上部の中央に表示する方法を例に紹介します HTMLへ直接記述 <div class="box05" style="vertical-align:top; text-align:center;">上部中央へ表示</div> cssへ記述 .box05 { width:800px; height:100px; background-image:url(img/copyright.jpg); background-repeat:no-repeat; text-align: center; vertical-align:top; margin:auto; padding:0; clear:both; } 注意：heightやmarginは指定がなければ0よりもautoにした方が無難・crear：both;は記述の最後 |
| その他不具合について | |
| ＳＥＯ対策について | SEO対策についての注意、Ｗ３Ｃに準拠したＨＴＭＬ制作を徹底しています。これは、直接起因するわけではありませんが、ユーザを獲得するうえで必須要素になってくると思います。特定の人に見てもらう、または、限られたネットワークであれば必要ありませんが、可能性を秘めたネットワークを自分で限定してしまうのももったいない気がします。私も初心者です。ノウハウはまだ持ち合わせていません。ＳＥＯ対策とは簡単に説明すると、タウンページ（電話帳）というのがあります。各カテゴリに分けられた電話帳の目的のページを開いて電話番号を調べるはずです。ネットに置き換えると、みなさんは検索エンジンで目的のホームページを探します。つまり検索エンジンに上位に表示させることが出来れば、たくさんの人に見てもらうことができます。相互リンクを貼ることも一つの方法です。ＳＥＯ対策とはそういうものだと思います。。ＳＥＯ対策については、簡単ではありませんが、当分は、共有できる仲間を少しづつ増やしながら、サイトを充実させることに専念していくつもりです。 |
| タグ付けについて | 構造化テキスト（コンピュータに「論理的な構造」を理解させるタグ付きテキスト） 最近は、上記を意識しながら、HTMLの作成をするようにしています。それは、初心者が最初に陥りやすい安易なタグの使用です。作成するとき、見栄えを意識するあまり、気付かないうちにみなさんも、初歩的なミスを犯しているかもしれません。前置きが長くなりましたので簡単に説明します。例えば、タイトル文字を太くさせるために、フォントを指定している際、人間は文字の太さや、大きさで、大事な部分ということが解ります。但し、コンピュータには 見栄えで付けたタグの意味は理解できません。では、どうしたらいいか。。それがタイトルで重要な部分であれば<h1>タグを使用することで論理的な意味を理解します。そんなこと、意識しないでやっていることかもしれませんが、逆のパターンで見栄えを考えて<h〜>タグを使用したりしないことです。見栄えの為のタグづかいではなく論理的な構造を意識したページ作成が重要ということを伝えたかったのです。もう一度、全てタグの本来の意味を理解したうえで文章を作成する事で、サイトマップ作成・ＳＥＯ対策等にも重要な役割を果たすことになります。 ※構造化テキストとは、それをコンピュータが、論理的に理解し、それを私たちに、判り易く画面に表示する事で人間は視覚的に論理構造を理解します |
| Publiserについて | MicrosoftOffice2007Proに付属しているソフトです。 今回商品紹介ページを作成するために、使用してみました。テンプレートやひな形、手順に従えばHTMLを記述することなく、画像を張り付け、必要なテキストを入力して簡単に作成ができます。保存する際に形式をＷＥＢページとして保存します。工数をかけることなく作成できました。以前使用したときに、表示がずれたり、作成した通りにいかず、使用を避けてきたソフトですが、ＷＥＢで保存する際に、適切な処理をして保存できると聞いて試してみました。表示結果は、以前より改善されており、使用に耐えれるものでした。機会があれば使用してみてもいいのでは・・・但し、急を要する。一時的なものにとどめておいた方がいいでしょう。出来あがった構文は、メタ要素が記述されていなかったり、宣言の記述が不適切、未定義の属性だらけで、メンテに苦労します。当然、修正を試みましたが、表示が崩れ始め、途中であきらめました。結果head部分（metaやDOC Type宣言）の修正にとどめました。ホームページビルダー等、クォリティ追求・正確な記述やＳＥＯ対策の為には、修正が必要ですが、このソフトはちょっとＷＥＢ制作には向いていません。 ※構造化テキストとは、それをコンピュータが、論理的に理解し、それを私たちに、判り易く画面に表示する事で人間は視覚的に論理構造を理解します |
※注意：ＷＥＢ公開するのであれば、DOCTYPE宣言と、meta要素だけは、追記・修正しておいた方がいいです。。時間があれば、検証してみるのもいいかも・・結構頭使います。
COUNT