ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

W3C[ダブリュースリーシー ]-HP用語

W3C(World Wide Web Consortium/ワールド・ワイド・ウェブ・コンソーシアム)とはWWW(World Wide Web)で使用される各種技術の......になる。 アメリカのティム・バーナーズ=リーにより創設され、1994年10月に設立され、.........などによって運営されている。…

Google Chromeプラグイン-FlashやJavaを無効にする方法

Google Chromeの仕様は、気が付くと変わっていたりします。 FlashプラグインやJavaプラグインを停止したい場合の方法もしくは有効にしたい場合の方法 Chromeアドレスバーに と入力してアクセスすると、プラグインの有効・無効の設定画面が表示されます。

vertical-align、CSSプロパティ

CSSのプロパティにvertical-align=縦方向(垂直方向)揃えの位置指定がありますが、あまり使うことがないので、結構曖昧だったりします。 vertical-alignとは、行間中のテキストや画像を垂直方向(縦方向)の揃え位置を指定するできます。 注意点はvertical-ali…

ヒラギノフォントなどのStd(スタンダード)とPro(プロ)の違い

ヒラギノ角ゴは普段何気なく使用することも多いのですが、末尾につくStnとProがあります。以外に気にせず直観的にフォントを選択していましたが、Stn(スタンダード)とPro(プロ)の違いについてです。千都フォントライブラリーサイトのよくある質問と回答集の…

JQuery使用時の$ドルマークの意味は?

ホームページ制作でも、ダイナミックな動きで演出したい機能があり、その場合、JQueryが利用されることも多いのです。その場合、JQueryの機能を利用する際に、HTMLソースコードに$マークがついた記述を埋め込む場合があります。$(function(){ $('button').r…

アンカーリンクの#を無効にする-Aタグ属性のhref値を無効に

Aタグのhref属性の値を"#"に指定すると、同一ページの最上部に移動します。JQueryを利用したスライドショーなどでもこれらの指定でAタグが利用されたりしています。ただ、リンクボタンとして機能してしまうので、href属性のリンクを無効にしたい場合がありま…

リンク画像イメージの点線枠囲み線を消すためのCSSプロパティ

ホームページ内にaタグでURLリンクを貼りつけたイメージ画像ですが、選択時やページ内でクリックした場合などは、画像の周りに点線の枠が見られます。 マウスオーバー時のマウスカーソル同様、どの画像が選択されクリッカブルなのかをユーザーに知らせてくれ…

CSSセレクタの優先順位を指定する!important宣言

CSSはカスケード(段階や構造)化された名前の通り、最後に記述されたセレクタが優先され、各セレクタの優先順位はIDセレクタ、クラスセレクタとなっています。また、import(ブラウザによっては読み込みが遅くなる)などでCSSファイルを指定した場合もその記述…

JavaScript「識別子、文字列または数がありません」エラー

JQueryを使用してホームページを制作する機会や頻度がとても高くなりました。一方、IneternetExplorerのバージョンはいくつもリリースされてきて、それぞれレンダリングエンジンが異なるブラウザといってもよいくらい、HTMLやcss、JavaScriptの解釈がことな…

IEのドキュメントモードとは

InternetExploreのドキュメントモードとは、Webページのソースコード、DTD宣言などに応じてHTMLおよびCSSの出力方法、つまりレンダリング/表示方法が変わる仕組みのことです。 これはIEのバージョンによって、レンダリングする機能(レンダリング・エンジン)…

メールフォームプロCGIを導入してみる

無料のCGIで動くメールフォームプロを導入してみます。 メールフォームプロとは無償でSYNCK GRAPHICA社が提供するプログラムで、以下からダウンロード可能です。 http://www.synck.com/contents/download/cgi-perl/mailformpro.html 1・メールフォームプログ…

BLOCKQUOTE-HTMLタグの意味

HTMLのタグ、BLOCKQUOTEとは、比較的長めの文章を<BLOCKQUOTE>~</BLOCKQUOTE>で囲みます。 ブラウザにもよりますが、タグで囲まれた範囲は上下に1行分のスペースが挿入され、左右がインデント(字下げ)、上下左右にスペースが空きます。 ただしインデント目的に<BLOCKQUOTE>タグを使用するのは正</blockquote>…

Windows8-Style UIとは-Modern UI

あるWebサービスを利用しようとしたら、『本コンテンツはWindows 8-style UIに対応していないため、デスクトップでのご利用を推奨しております。もしWindows 8-style UIでご利用中の方は、画面右下の「ページツール(スパナマークのアイコン)」より「デスク…

Dreamweaverで作成されるファイル拡張子steについて

ファイル拡張子のsteとは、HTMLオーサリングソフトのサイトの管理を行うためのプロジェクトファイルのサイト定義ファイルのこと。 拡張子steのファイルを開くには、XML形式のデータなのでテキストエディタで開けますが、本来は、ファイル形式で管理できるよ…

Dreamweaverサイト管理情報の書き出しと読み込み

Adobe Dreamweaverのサイト管理情報はファイル拡張子.steで管理可能です。ファイル拡張子のsteとは、HTMLオーサリングソフトのサイトの管理を行うためのプロジェクトファイルのサイト定義ファイルのことで、Dreamweaverで編集したサイト管理設定を個別にエク…

著作権表示-ベルヌ条約と万国著作権条約

ホームページ制作時に、フッター最下部にℂ(マルシー)などと年号、著作権者、All rights reserved.なんて記述を見かけることも多いのですが、まずこの著作権表記の意味について。 基本的にはこの記述は慣例として表記されていて、この記述にはほとんど意味が…

URL末尾にスラッシュは本当に必要なのか

ホームページのURL末尾につけるスラッシュ「/」のことを「トレイリングスラッシュ(trailing slash)」といいますが、どの程度必要かということについて。一般的に、URLの末尾にスラッシュがある場合は、ディレクトリを直接指定しており、スラッシュが無の場合…

Webデザイン力がアップする7つの習慣

コラム~あるWebデザイナーの寄稿~憧れのWebデザイナーになりたての頃、そうはいっても2、3年目の頃だが、いまひとつWebデザイン力が向上しないで悩んでいた。本や雑誌を見たり、すでに出来上がっている素敵なWebサイトを見本や参考にして制作するWebデザイ…

Dreamweaverワイルドカードでの検索・置換

Dreamweaverでの検索や置換作業では、単一キーワードだけではなく、連番などを含んだ文字列を検索したり置換えしたい場合があります。例えば拡張子のみをPNGからJPEGに変更したいときや、共通のファイル名を別の名称に変更したときなどです。基本的にはDream…

ファイル拡張子が.shtml

お知らせ機能などのCGIなど、SSIを含むHTMLページは、便宜上.shtmlとされていることがある。拡張子.shtml(エスエイチティエムエル)とは、SSI(Server Side Include)スクリプトを...続きは⇒ ホームページ制作のWEB制作システム

CSSスプライトについて

CSSスプライトとは、.. 画像の呼び出しは、キャッシュが残っていたりしない場合は、プリロードするか表示する度にリクエストするので、回線やサイト閲覧に多少不可がかかり、表示が遅くなったりします。CSSスプライトで画像をなるべく一度の読み込みで完了さ…

○数字文字コード

○の中に数字がはいった文字の文字コード20まで。 ①の文字コードに1づつ足していくだけ。 &#9312; ===> ①続きは ⇒ ホームページ制作のWEB制作システム

Firefoxキャッシュファイルの場所

Firefoxで閲覧したページのダウンロードされたファイル、いわゆるキャッシュファイルの参照の仕方。 IEでいうところのインターネット一時ファイルですが、 ブラウザの履歴はWindowsXPまでは、ApplicationData以下のプロファイルに、cookieやフォーム入力内容…

IE9でインラインフレーム内のテキストがにじむ

IE9ではテキストエリアやインラインフレーム内に呼び出すページなどをエリア内のスクロールバーで移動させたりすると「にじむ」というバグという不具合がある。 これはIE9では文字表示関連の機能でもある、ClearType(クリアタイプ)が強制的に有効化されて…

全角空白スペースHTML特殊記号

全角の空白スペースを入力します。普通に文字列中にスペースキーを押すことで空白スペースを入れることも 可能ですが、やはり不確実ですので、HTML特殊文字コードで全角の空白スペースを記述します。 特殊文字のコードは、実体参照ではなくコード参照します…

HTMLエンティティ化-スパムメール防止

ホームページにメールアドレスなどをmailto:などでリンクを貼りつけた 場合、以前ほどではありませんが、迷惑メールを送るためにリンク情報を 収集する悪意あるプログラムに拾われてしまいます。 回避策としてはいくつかありますが、どうしても記載しなけれ…

ブラウザのHTML5対応を数値化するWebツール

【ホームページ制作】ブラウザのHTML5対応を数値化するThe HTML5 testスマホサイトを中心にどんどん認知度が拡大するHTML5だが、Webブラウザーでは対応が進んでいるものと、ほとんど未対応のIEのようなブラウザーと解離がある。 自分の利用しているブラウザ…

Googleクロールエラーの対処と対策

既存のページなどがなくなったときなどに、Googleボットが404 (見つか りませんでした)でクロールエラーがでます。 ウェブマスターツール上で確認できますが、これはクローラからの警告の 信号でもありますから、きちんと対処し対策する必要があります。さら…

Flashやimg、アンカーリンクの周りの点線を消す方法

読み込むHTMLページに背景色を指定し制作したFlashコンテンツやリンクを貼ったimgタグをFirefoxでプレビューしたところ、flashやimgタグの周りに点線が表示される。背景色が濃い場合ですが点線が目立つので、点線を消す方法が必要です。 それにはswfファイル…

HTMLの特殊文字-実体参照とコード参照

HTMLの特殊文字をコードで記す場合ですが、コードの種類にはいくつか存在し、実体参照とコード参照の違いについて。 HTMLにおいて特殊文字の文字参照には、表記方法によって文字実体参照 (Character entity reference) と数値文字参照 (Numeric character re…