ホームページの作り方 | 初心者でもわかるホームページの作り方

8月
11

By admin // No Comments

InternetExplorer9でWordpressの投稿が反映されない場合の対処法

お客さんからワードプレスの変更ができないって言われて、電話口で僕のPCや周りの人に試してもらった。普通に投稿ができるのにお客さんの環境では変更が反映されない・・なぜ・・・よくよく調べるとブラウザによって投稿ができないことがあることが判明しました。

7月
6

By admin // No Comments

CSSスプライトを使ってページの読み込み速度を向上する

ホームページを作るときには画像をたくさん使いますが、たくさんの画像を使うと、画像の数だけデータを読み込みに行かないといけないので、ページ全体の表示速度が遅くなります。普段あまり気付かないことですが、少しでも表示速度を早くしたいと思えば、このCSS Spriteという画像の一部のみを表示する方法を使ってみましょう。 CSS Spriteを使えば、１度の画像の読み込みで済むのでページ全体として読み込み速度が向上します。また、この方法はCSSを使ったマウスオーバー画像にも使えます。

6月
22

By admin // No Comments

なぜか前面に表示されない？position:relative,absoluteとz-indexでの重なり順の関係

重なり順がうまく指定できない。最前面に出てきて欲しい要素が裏に回って表示されてしまう。 CSSでpositionを使って位置を設定している場合にはよく現われる現象です。特にInternetExplorerでは気をつけないとこの罠にハマってしまいます。重なり順を指定するz-index。このz-indexとpositionを同時に使う場合には注意しないといけません。

4月
28

By admin // No Comments

Wordpressの関数とかの備忘用

個人的によく使いそうなWPの機能とか関数を備忘用に作っています。

4月
26

By admin // No Comments

便利で簡単、floatの解除が必要の無い便利なclearfixコード

ホームページのレイアウトの上で、floatを使うことが多いですが、 floatを指定したら、float属性を解除する必要があります。通常、floatを解除するために余分なコードが必要になりますが、このclearfixコードを使うと、もっと簡単シンプルにfloatを使うことが出来ます。

4月
25

By admin // No Comments

チェックボックスやラジオボタンの変わりにこんなアイデアもいいかもね

普段フォームで使っているチェックボックスやラジオボタン。代わりに使えそうなちょっと変わった選択ボタンのアイデアです。

4月
22

By admin // No Comments

PHPで機種依存文字を含むメールを送信する方法

仕事でメール送信のシステムを作っていて、文字化けが起こっていたので対応しました。備忘用に書いておきます。

3月
3

By admin // No Comments

CSSで縦横比を維持したまま画像をリサイズする方法

ホームページ上で画像を表示する場合、通常は表示する画像のサイズにあらかじめサイズを変更しておいて配置するのが望ましい。 HTMLやCSSでサイズを変えて画面上では小さく表示されていても、実際には一度オリジナルの画像を読み込むことになるので読み込みの際のデータ量が大きくなり無駄が多い。また、ブラウザ上でリサイズした場合はリサイズの質が悪い。とはいえ、状況によっては大きな画像を画面上で小さくしたい場合もあるでしょう。 CSSを使った画像のリサイズ方法を紹介します。

2月
13

By admin // No Comments

RGBの色で一番近い色（近似色）を求める方法

ホームページのシステム開発で指定された色に近い色から順に色を並べる必要があったのでちょっと調べて備忘用にここに記録。普段必要な人は少ないと思うけれど、 PHPとかでプログラムを作ってる人は使うことがあるかもしれない。

2月
4

By admin // No Comments

FFFTPで.htaccessが表示されないのを表示させる方法

.htaccessを使うとフォルダ単位でサーバーの環境を変更することが出来る。例えばURLを実際のファイル名と変えることができたり、別ページへのリダイレクトを行ったりアクセス制限をしたりといろいろできる。 FFTPで.htaccessが表示されない事態になって困ったが、解決できたので備忘を兼ねて記事にしておきます。

1月
16

By admin // No Comments

ハート、ダイア、スペード、クローバーのトランプマークを使った壁紙

トランプの柄、ハート、ダイア、スペード、クローバーを使った壁紙を作りました。自由に使ってください。個人、商用利用可能です。再配布する場合はコンタクトください。当ブログにリンクを張ってシェアしていただけたらうれしいです。

1月
16

By admin // No Comments

バレンタインに使えるハート柄の壁紙

バレンタインに使えるハート用の壁紙を作りました。かわいいハート柄の壁紙素材が欲しい人はぜひ自由に使ってください。個人、商用利用可能です。再配布する場合はコンタクトください。当ブログにリンクを張ってシェアしていただけたらうれしいです。

1月
12

By admin // No Comments

フリーダイアルのロゴマークのダウンロード

会社のホームページでよく使われるフリーダイアルのロゴ。自分で作っている人も多いと思うけれど、NTT Communicationsのサイトでダウンロードが出来ます。利用規約を守れば無料で使えるので、ぜひここからダウンロードして使ってください。 GIFやEPSでダウンロードが可能です。フリーダイアルロゴのダウンロードはこちら

12月
4

By admin // 1 Comment

枠線のスタイル、太さ、色をまとめて指定する”border”プロパティ | スタイルシート

要素の周囲に枠線を表示させることが出来ます。 “border”プロパティは、枠線のスタイル・太さ・色をまとめて指定する際に使用します。用途に応じてプロパティの値を変えて枠線を使い分けましょう。

12月
3

By admin // No Comments

点線を使った下線を引いてノートのようにデザインするCSS

本来、リファレンスよりこういったものの方が読んでいて楽しいと思うし書くほうも書き甲斐がある。さて、CSSだけでもきれいなデザインはできます。今回は下線を点線にしてノートのような感じにデザインするためのCSSを紹介します。全く難しいものではなく、CSSのborderというプロパティを使うだけの簡単な方法です。

11月
29

By admin // No Comments

便利でお勧め！無料で高品質のバナーが簡単に作れるサイト

ホームページやブログのバナーはホームページを華やかにするためにとっても重要なもの。タイトルバナーのイメージでホームページのイメージも大きく変わりますね。タイトルバナーを作ろうと思っても、デザインが苦手な人にはなかなか難しいと思います。あらかじめ用意された素材を使って、簡単に高品質のバナーを作れるサイトを紹介します。無料で簡単に高品質のヘッダーバナーが作れるサイト

11月
20

By admin // No Comments

削除された部分であることを明示するタグ <del>

一度書いて公開したテキストなど、後日削除をしてそれを明示しておきたいことがあります。知らない間に削除されているということがないように、あえて<del>を使って削除をしたことをわかるよう明示することがあります。

11月
13

By admin // No Comments

テーブルのセルと内部の要素との間隔を指定するタグ <table cellpadding=”">

テーブルのセルとセルの内部にある要素との間隔を指定することが出来ます。枠線と内部の要素の間隔を調整することで見やすい表にすることが出来ます。

11月
12

By admin // No Comments

テーブルのセル同士の間隔を指定するタグ <table cellspacing=”">

テーブルのセルとセルの間にあるしきりの幅を変更することが出来ます。それによりセル同士の距離を離して配置することが出来ます。

11月
12

By admin // No Comments

画像無しでCSSだけで簡単に切り取り線のような罫線が作れる

コンテンツ同士を区切るのによく使われる罫線。格好良くするために、点線の罫線を使いたいときもあります。画像を使わずに簡単に切り取り線のような点線ラインを引く方法。 CSSだけで簡単に作れます。通常の罫線よりかっこいいですよ。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。

10月
13

By admin // 1 Comment

簡単なので覚えておきたい。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。

コンテンツとコンテンツを区切るために使える罫線。点線を使った罫線だとデザインの邪魔にならずに格好良くコンテンツを区切ってくれます。普通の罫線とちがってちょっと控えめにクールに罫線を描きたい、そんなときはCSSを使ってスタイリッシュな点線の罫線はいかがでしょう。点線の罫線をわざわざ画像で作って使っている人も見かけますが、そんなことをしなくても簡単に作れます。

10月
13

By admin // No Comments

コンテンツの区切りなどに使える罫線用のタグ <hr>

コンテンツや内容の区切りとして罫線を使いたい場合はタグ１つで簡単に使うことが出来ます。フッターと本文の間に引かれていたりすることも多いです。うまく使ってわかりやすいページ構成を心がけましょう。

10月
12

By admin // No Comments

テーブルの枠線の太さを指定するタグ <table border=”">

テーブルは要素を縦横に表として整列させることの出来るタグです。 border属性を使えばテーブルの周りに枠線を表示させることが出来ます。 border属性に指定する数値で線の太さを指定できます。また、border属性で1以上の数値を指定した場合はセル間にも境界線がひかれます。要素同士を視覚的に線で区切りたい場合はこのborder属性を使います。

10月
12

By admin // No Comments

非視覚系ブラウザのためのテーブルの説明を設定する。<table summary=”">

パソコンは様々な人が使います。目が見えない方でもインターネットを活用できるような非視覚系のブラウザもあります。目が見えないので主に音声で情報を伝えることになります。例えば非視覚系特有の機能の一つとして、このテーブルの説明が利用されます。

10月
11

By admin // 1 Comment

テーブルの縦のセル(行要素)を結合する。<td rowspan=”">

テーブルのセルは必ずしも縦と横のセルの数が揃っているわけではありません。中には２行を結合してまとめた部分も存在するでしょう。セルの行要素同士を結合する属性を学びましょう。

10月
5

By admin // No Comments

テーブルの横のセル(列要素)を結合する。<td colspan=”">

テーブルのセルは必ずしも縦と横のセルの数が揃っているわけではありません。中には２列を結合してまとめた部分も存在するでしょう。セルの列要素同士を結合する属性を学びましょう。

10月
5

By admin // No Comments

テーブル（表）の上部にタイトルをつけよう。<caption>タグ

レイアウトに使う場合を除いて（使ってはいけませんが）、テーブルにはその内容を表すタイトルがあると思います。テーブルのタイトルをテーブルの上部に表示させるためのタグを知っておきましょう。

10月
3

By admin // 1 Comment

これは大事と思う場所をもっと強調したい。強調タグの<strong>

文章の中でページのテーマで大事な単語が出てきたときに、ここが重要な部分であることを示すためのタグ。検索エンジンでもこのタグを読み取ってテーマとしての評価を強める要素になっているといわれます。つまり、SEOにも大切な要素ということです。一部ブラウザでは太字で表示されるなど視覚的にも強調されます。強調を表すタグは他にも<em>があります。

10月
3

By admin // 1 Comment

これは大事と思う場所を強調したい。強調タグの<em>

文章の中でページのテーマで大事な単語が出てきたときに、ここが重要な部分であることを示すためのタグ。検索エンジンでもこのタグを読み取ってテーマとしての評価を強める要素になっているといわれます。つまり、SEOにも大切な要素ということです。一部ブラウザではイタリック体で表示されるなど視覚的にも強調されます。強調を表すタグは他にも<strong>があります。

10月
1

By admin // No Comments

これは使える！マウスを画像の上に持ってくると明るくなる処理をCSSだけで実装。

画像の上にボタンを持ってくると画像の色が変わるようなページがあります。マウスがフォーカスしている画像が明るくなると、今どこを選んでいるのかがわかりやすくなってユーザーにとても親切です。デザイン的にもマウスにあわせて画像が明るくなるとかっこいいですね。そんなマウスオーバーの処理をCSS（スタイルシート）だけで簡単にやってしまう方法を紹介します。

9月
21

By admin // 1 Comment

HTMLテーブルの列（縦）を構造的にグループ化する <colgroup span=”">

テーブルを操作する際に、各セルに対応するものは<th>や<td>がありました。各行に対するものは<tr>や<thead>、<tbody>、<tfoot>などがあります。ここではさらに列（縦）に対しての意味的（構造的）なグループ化を行い、操作やスタイルの適用に便利にするためのタグを紹介します。よく似たタグにテーブルの列（縦）のグループ化をする <col>があります。

9月
21

By admin // 1 Comment

HTMLテーブルの列（縦）のグループ化をする <col>

テーブルを操作する際に、各セルに対応するものは<th>や<td>がありました。各行に対するものは<tr>や<thead>、<tbody>、<tfoot>などがあります。ここではさらに列（縦）に対してのグループ化を行い、操作やスタイルの適用に便利にするためのタグを紹介します。

9月
20

By admin // 2 Comments

HTMLテーブル（表）のフッター行を定義するタグ <tfoot>

テーブルにはヘッダー、ボディ、フッター要素を定義することができます。それぞれを区別して定義することで、ブラウザにその役割を明確に伝えることができます。 HTMLテーブル（表）の本体部分を定義するタグ <tbody>に続き、本体部分を定義する<tfoot>を見てみましょう。

9月
20

By admin // 4 Comments

HTMLテーブル（表）の本体部分を定義するタグ <tbody>

テーブルにはヘッダー、ボディ、フッター要素を定義することができます。それぞれを区別して定義することで、ブラウザにその役割を明確に伝えることができます。テーブルのヘッダー部分を定義する<thead>に続き、本体部分を定義する<tbody>を見てみましょう。

9月
20

By admin // 2 Comments

HTMLテーブル（表）のヘッダー行を定義するタグ <thead>

テーブルにはヘッダー、ボディ、フッター要素を定義することができます。それぞれを区別して定義することで、ブラウザにその役割を明確に伝えることができます。そして、それによりSEOで有利になることも。また、今後のブラウザではより便利な表示がされるかもしれません。スタイルシートの適用の際にも便利なのでぜひ使いましょう。

9月
19

By admin // 3 Comments

HTMLテーブルタグの概要その２。ヘッダー、ボディ、フッターの３要素。

基本的なテーブルの構成は、HTMLテーブルタグの概要で説明したとおりです。実は、さらに細かく各要素の役割を定義することができます。テーブルをヘッダ部、ボディ部、フッター部の３つの部分に分けることができます。これにより、さらに明確なテーブル構造となります。

9月
18

By admin // 3 Comments

表要素の見出しになるセルを指定する<th>

テーブルのセルには見出しになる要素が存在します。通常、内容を入れるためのセルには<td>というタグを使いますが、見出しとなるセルには別のタグを使ってそれを明示にします。

9月
18

By admin // No Comments

ホームページやブログでHTMLを書いても改行しないのはなぜ？

基本的ではあるけれど、初心者が感じる疑問なのかもしれない。ちょっと覚えたタグを使ってみようとメモ帳やブログの記事を書くフォームなどでHTMLを使ってみたら、改行するはずの場所が改行されない。メモ帳上では改行されているのに・・・・

9月
17

By admin // 4 Comments

テーブルにセルを定義して要素を入れられるようにする。HTMLテーブルタグ(3/3)。<td>

テーブルの最も基本的な作り方はテーブルタグの概要で説明したとおり3ステップに分かれます。まずはステップ１でテーブルの領域を指定してあげました。次にステップ２でテーブルに行を追加しました。最後に実際に要素を入れる箱を作ってテーブルを完成させます。難しくないので読みきってしまいましょう。

9月
17

By admin // 4 Comments

テーブルに行を定義して挿入する。HTMLテーブルタグ(2/3)。<tr>

テーブルの最も基本的な作り方はテーブルタグの概要で説明したとおり3ステップに分かれます。まずはステップ１でテーブルの領域を指定してあげました。次にテーブルに行を追加します。まだ、ここでも完成ではありません。難しくないので、ステップ３まで読みきってしまいましょう。

9月
17

By admin // 4 Comments

まずはテーブルの領域を指定する。HTMLテーブルタグ(1/3)。<table>

テーブルの最も基本的な作り方はテーブルタグの概要で説明したとおり3ステップに分かれる。その中で、まずはテーブルの領域を指定してあげないといけない。今回のタグだけではまだテーブルはできないので3回に分けて解説します。１つ１つの記事はそんなに長く無いので一気に読めますよ。

9月
16

By admin // 3 Comments

HTMLテーブルタグの概要。テーブルはレイアウトには使わないように。<table>

料金表やメニュー表など、テーブルを使えば表をきれいに見やすく表示できます。テーブル要素にはその中にヘッダ要素やフッタ要素なども定義されているので、きちんと使えると検索エンジンにも読みやすいページとなります。縦や横に要素を並べることができるため、昔からページのレイアウトなどに使われることも多いですが、レイアウトはCSSに任せて、あくまでテーブル（表）として利用するようにしてください。なんてったって、テーブルは表を作るには非常に便利ですから。

9月
3

By admin // No Comments

会社の住所や電話番号などの連絡先に。アドレスを意味するタグ。<address>

運営者の連絡先や、会社の問い合わせ先のように、ホームページに対する連絡先に関わる部分を構造として指定することができます。この情報は検索エンジンでは位置情報や店舗情報などにも利用されて、そういった特殊な場合の検索結果の上位表示の元にもなります。

9月
2

By admin // 2 Comments

テキストの装飾などによく使う。インライン要素の範囲を指定するタグ<span>

今のホームページの作り方には必須の要素<span>タグ。テキストの色を変えたりスタイルを変えたりすることに使われることが多いタグです。 <span>タグとスタイルシートを組み合わせてテキストのスタイルを指定できていると、この人ちょっとはホームページ作れるんだなってなります^^。

9月
2

By admin // 1 Comment

ホームページを作るのに必須！ブロック要素の範囲を指定するタグ<div>

今のホームページの作り方には必須の要素<div>タグ。ホームページ上の内容はこの<div>で構成されることが多い。昔はテーブル要素が良く使われていたホームページですが、今はこの<div>タグが主流。 <div>を使いこなせると、この人ちょっとはホームページ作れるんだなってなります（笑）。

9月
2

By admin // 2 Comments

HTMLを学ぶならブロック要素とインライン要素を知っておこう

HTMLを勉強していると良く見られるブロック要素とインライン要素。一体何が違うのか、名前は出てくるけど説明が出てこない。なんとなく読み流している人も多いのでは。難しい話ではないのでここで覚えてしまいましょう。

8月
31

By admin // 1 Comment

意外と忘れがち？ページ内キーワードを強調してSEOに強くするタグ。<strong>

ホームページの中で特に強調したいキーワードや文言があった場合に、ここが強調箇所であることを示すタグが２つ存在します。そのうちより強く強調したい場合に使うタグです。適切にキーワードを強調することで、SEOに強いページを作ることができます。

8月
31

By admin // 1 Comment

強調タグでキーワードを強調してSEOに強いページに。<em>

ホームページの中で特に強調したいキーワードや文言があった場合に、ここが強調箇所であることを示すタグが存在します。適切にキーワードを強調することで、SEOに強いページを作ることができます。

8月
31

By admin // No Comments

バイトとしてホームページ作成を任された。どうすればいい？

今朝、友達から電話がかかってきてホームページを勉強したいんだけどどうしたらいいか聞かれました。 Dreamweaverを買おうと思ってるみたいで、でも高いのでどうしようということ。まず、ホームページをどういった目的で使いますか。趣味でホームページを持ちたい会社でホームページを持ちたいホームページ制作関連の仕事に就きたいこんな感じに分かれるでしょうか。

8月
30

By admin // No Comments

SEOに絶対やってはいけない。フレームセットのホームページ。

今では少なくなってきましたが、まだまだフレームセットを使ったホームページを作っている方がたくさんいます。フレームセットを使うと一件便利ですが、ユーザービリティやSEOに非常に不利になってくるので使わないようにしましょう。

8月
28

By admin // 1 Comment

誰でもできる内部SEOの強化、見出しタグを見直そう

検索エンジンの評価といえば色々な要因がありますが、その中の１つに見出し要素の使い方があります。被リンクのような外部要因と違い、内部で操作できる分ちょっと見直すだけで誰でもSEO対策ができます。

8月
28

By admin // 1 Comment

SEOにも大切な見出しタグ。アクセスアップに必ず入れよう。<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

文章を書くときに、テキストを単に並べるだけでは読みにくくて仕方ない。きちんと章立てして、段落を作ってリズムを作ることで読みやすさはぐっと上がります。ホームページも同じことで、見出しをつけることで読みやすくなります。検索エンジンにとっても見出しはとても重要、検索エンジン上位に表示させるためのSEO効果もあります。

8月
27

By admin // No Comments

HTMLやXHTMLの文法ルールを決めるドキュメントタイプ(DTD)宣言<!DOCTYPE>

DTDという見たこともない言葉がいきなりタイトルに出てますが、このDTDというのはDocument Type Definitionという言葉の略で、 HTMLのようなマークアップ言語の文書構造を定義したものです。つまり、今から書く文書はこのDTDに従って解釈してくださいねっていう指示を出しています。

8月
26

By admin // No Comments

小学校でも習った段落をあらわすHTMLのタグ<p>

小学校の国語の時間に章とか節とか段落とか習いましたよね。「段落の先頭は１文字あけましょう」みたいな。そんな、段落がHTMLにも定義されている。（まあ、あってもおかしくないし驚くもんじゃないけど、記事の導入としてうおーってなるように書いてみる）

8月
26

By admin // 1 Comment

HTMLではテキストを改行するのに<br>を指定する。

ホームページでもブログでも、テキストをきれいに整形するのに改行はなくてはなりません。ワードやフォームでは普通にテキストを書き込むときは改行キーを押せば改行されますが、 HTMLでは勝手には改行されません。

8月
26

By admin // No Comments

文字コードを間違って文字化けなどしないように。ページで使う文字コードの種類を明示する。<meta>

今では少なくなりましたが、ホームページを開いたときにわけのわからない文字ばかりになった文字化けの現象を起こしているページがあります。せっかくユーザーが訪問したのに読めないなんてもったいないですね。文字化けを起こさないように、どのようにすればいいのかをここで解説します。

8月
25

By admin // No Comments

SEOにとっても非常に重要！ホームページのタイトルを設定する<title>

ホームページのタイトルは単なるタイトルではなく、アクセスを増やすためにも非常に重要です。早速とっても大切なタイトルタグを説明します。

8月
25

By admin // No Comments

まずはここから。超基本的なHTML構造。<html><head><body>

ホームページを作るにあたって、HTMLのフォーマットと言うべきコードがある。それぞれ意味はあるが、とりあえずどんなホームページにも書かれているコードなので、コピーでもしてまずは作り始めよう。

8月
25

By admin // 1 Comment

ホームページ作成に必要なサーバーとは。お勧めのサーバーも紹介。

ホームページを公開するためには、作ったページを誰でも見れるようにサーバーに転送しなければなりません。サーバーについての説明と、おススメのサーバーを紹介します。

8月
24

By admin // 1 Comment

ホームページ作成にかならず必要。ホームページのアドレスを決めるドメイン。

ホームページを作るにあたって欠かせないものの一つがドメイン。ドメインとはホームページ上の土地のようなもので、つまり住所ということ。普段よく聞くURLというものとドメインとの関係はどのようになっているのだろう。

8月
23

By admin // 1 Comment

これがあればとっても便利。ホームページを作るためのソフト。

ホームページを作るのに便利なソフトはたくさん出ています。趣味のホームページを作っている人はホームページビルダーが多いのではないでしょうか。

8月
23

By admin // No Comments

この流れを覚えよう！ホームページの構造はHTML、デザインやレイアウトはCSSを使う

ホームページを構成している要素はたくさんありますが、大きくホームページの構造をあらわすHTMLとデザインやレイアウトを制御するCSSというものがあります。この２つを覚えて使えるようになればホームページは作れます。

8月
22

By admin // 1 Comment

自分のパソコンのローカル環境でホームページを作る、見る

ホームページを作ってみんなに公開する前に、自分のパソコンでホームページを作って確認することができます。いきなり公開するのは躊躇するかもしれませんが、自分のパソコンで確認できれば気軽に作れますね。まずはそこからやってみましょう。

8月
21

By admin // 1 Comment

HTMLを構成しているものをタグといいます

HTMLはテキストの集まりですが、このテキストの集まりはタグというものに分解されます。このタグというものが非常に重要で、HTMLを勉強する大部分がこのタグを勉強するということになります。

8月
20

By admin // 2 Comments

まずは初歩から。ホームページを構成しているものをHTMLといいます。

ホームページは何でできているのだろう、普段何気なく見ているホームページですが、自分にも作ることができてその方法を学ぶためには何でできているのかを知ることが必要です。

8月
20

By admin // No Comments

ホームページの作り方ブログ制作中

只今、ホームページの作り方のブログを制作中です。今更感はありますが、まだまだホームページを自分で作りたい人も多いと思います。お役に立てるホームページを作っていきます。

人気の記事

カテゴリー

アーカイブ