ホームページの作り方 - にししふぁくとりー

おすすめ記事（24本）

公開している400本以上の記事の中から、おすすめの記事を24本ほど掲載しています。
なお、新着記事を新着順にチェックするには、All About ホームページ作成ガイドサイト新着記事一覧ページへお越し下さい。

ウインドウ幅に合わせて画像サイズを変化させる方法

HTML＋CSSだけで、表示領域の横幅に合わせて画像サイズを変化させる方法を解説。レスポンシブWebデザインを採用したページや、画面サイズに合わせて自動で画像を(縦横比を維持したまま)拡大縮小させたい場合に活用できます。HTMLのimg要素で画像を掲載し、CSSを使って画像サイズが自動で画面サイズに合うようにするだけの簡単な書き方をご紹介。

掲載日：2018年06月22日
無料のウェブ作成ソフトMicrosoft Expression Web 4

Microsoft製のホームページ作成ソフト「Microsoft Expression Web 4」が開発終了に伴って無料公開されています。HTMLやCSSだけでなくJavaScriptやPHPも含めたソース補完機能、入力支援機能、文法チェック機能などを備えた、統合ホームページ作成フリーソフトです。この機会に使ってみてはいかがでしょうか。Windows10でも動作し、HTML5で記述することもできます。日本語版のインストール方法と各種機能をご紹介いたします。

掲載日：2018年06月01日
スタイルシートの class と id の使い分け

HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。classとidの違いと、使い分け方法をご紹介いたします。

掲載日：2018年06月18日
HTMLで使えるスペース(空白文字)の入れ方いろいろ

ウェブページ内でスペース(空白文字)を連続表示させる方法を解説。HTML中で半角スペースを連続して打っても、表示される空白は1つ分だけです。しかし「＆nbsp;」などの文字実体参照という特殊な記述方法を使えば、複数の連続した空白も入れられます。しかも、「半角スペースより細い空白」や「半角と全角スペースの中間くらいの空白」など4種類の空白文字があります。

掲載日：2018年06月20日
移転先へ自動移動(転送/リダイレクト)させる方法

ホームページを別のURLへ移転した際に便利な、指定したページへ自動的に移動(リダイレクト)させる方法を解説。すぐに自動転送するほか、旧サイトの全ページに同じ「新しいホームページへの引っ越し案内」を一括表示する方法も説明。.htaccess・HTML・JavaScriptの3通りでリダイレクトする書き方を紹介しています。

掲載日：2017年10月06日
Basic認証(基本認証)でアクセス制限をかける方法

ウェブサイト内の特定ページやディレクトリにアクセス制限を施す設定方法として、Basic認証(ベーシック認証／基本認証)の使い方を初心者向けに解説。ユーザー名(ID)とパスワードの入力が必要な会員制ホームページの作り方をご紹介。簡単にログイン機能を付加して秘密のコーナーを作ってみましょう。

掲載日：2018年06月04日
.htaccessファイルの書き方と設定・設置方法

ウェブサイト上に「.htaccess」という特殊な設定ファイルを設置すると、アクセス制限・ユーザー認証・リダイレクト(自動転送)・エラーページのカスタマイズ・デフォルトファイル名の変更など、特殊な設定が実現できます。「.htaccess」の書き方(作り方)と設置方法をご紹介。テキストエディタで簡単に作成できます。設置した結果としてInternal Server Errorが出てしまう場合の対処方法なども解説。

掲載日：2018年06月12日
複数の画像がふわっと切り替わるスライドショーを作る

複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーをWeb上で作る方法を解説。画像を掲載する短いHTMLに、配置と重なり順序を調整するCSSを加え、jQueryでスライドショーを制御することで簡単に作れます。画像はリンクにもできるため、クリックすると詳細ページへ飛ぶスライドショーを作ることもでき、シンプルながら活用範囲の広いスライドショーになります。

掲載日：2018年06月04日
ホームページ作成ソフトの選び方

これから新しくホームページ作成ソフトを購入しようと検討している方々のために、どんなソフトウェアをどうやって選べば良いのか、選び方を比較してご紹介いたします。ウェブ製作のスキルに応じた、おすすめのソフトを解説。

掲載日：2018年06月25日
スマホ対応サイトの作り方と6つの注意点

画面の小さなスマートフォンでは、スマートフォンで操作しやすいように作られたウェブサイトの方が閲覧しやすいでしょう。スマホ用サイトを作る前の準備として、製作前に知っておきたいポイントや、スマートフォン上のブラウザの仕様などについてを簡単にご紹介いたします。特殊な作り方は必要なく、ポイントさえ押さえておけばPC用サイトと同じ方法で簡単に作れます。ぜひ、スマートフォン対応サイトを作ってみて下さい。

掲載日：2018年07月03日
PC版とスマートフォン版サイトを自動で切り替える方法

PC用サイトにアクセスしてきたスマートフォン利用者を自動的にスマホ用サイトへ誘導できるように、アクセス者の端末(PC/SP)に応じて閲覧先を自動で切り替える機能の作り方をご紹介。閲覧者のユーザエージェント名(ブラウザや機種名)を判別し、「.htaccess」のmod_rewriteを使ってアクセス先を自動振り分けすることで、スマートフォンユーザだけをリダイレクトする方法を解説。

掲載日：2018年06月26日
ファビコン(favicon)の簡単な作り方と設置方法

ブラウザのタブやブックマークなどに表示されるアイコンである「ファビコン(favicon／サイトアイコン)」の簡単な作り方と設置方法を解説。複数サイズのアイコンを1ファイルに収めたfavicon.icoファイルをブラウザ上で簡単に作成できる「x-icon editor」を使う手軽な作成方法をご紹介。白紙(透過)状態からでも、既存画像からでも、楽にファビコンが作れます。

掲載日：2018年06月28日
ページ移動せずに内容を変更するタブ機能の作り方

ページを移動することなくボックス内の表示内容を切り替えられるタブ機能の作り方を解説。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブメニュー部分がクリックされれば一瞬で表示内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合などに便利です。

掲載日：2017年10月20日
タブやブックマークに独自アイコンを表示する方法

ブックマークアイコンやショートカットアイコンとして、ウェブサイト独自の画像を表示する方法を解説。PC用ブラウザの「タブ」や「アドレスバー」、スマホ用ブラウザの「ブックマーク」や「ホーム画面」などに自作アイコン画像を表示させてみましょう。favicon.icoやapple-touch-icon.pngなどのファイルを作成して、短いHTMLを書くだけの簡単な手順で実現できます。

掲載日：2017年08月31日
別窓を開かずにその場で拡大画像を表示する4つの方法

サムネイル画像(縮小画像)がクリックまたはタップされた際に、ページ遷移なくその場で拡大画像を表示できるLightbox系スクリプトは多数あります。jQueryを使う本家Lightbox2、スマホでの全画面表示に便利なIntense Images、画像以外にも使えるColorbox、jQueryなしで動作するLightbox Plusなど、選び方の参考として4スクリプトそれぞれの特長と使い方をご紹介。

掲載日：2017年08月25日
簡単に閲覧制限！JavaScriptでパスワード認証を設定

HTMLにほんの数行のJavaScriptを加えるだけでパスワードによる認証機能を作る方法を解説。「ウェブ上でパスワードの入力を求めるアクセス制限を施したい、でもBasic認証やCGIを使う複雑なことはしたくない」という場合には、JavaScriptを使った手軽なパスワード認証方法はいかがでしょうか。完全な制限にはならない分、とても簡単にホームページの閲覧制限ができます。

掲載日：2017年10月24日
メディアクエリで画面サイズ別にCSSを切り替える方法

メディアクエリ(Media Queries)とは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の細かな条件に応じて、適用するスタイルシートを切り替えられるCSS3の機能です。スクリプトを用いることなく「パソコンなどの広い画面で見るとき専用のCSS」・「スマートフォンなどの狭い画面で見るとき専用のCSS」のように閲覧環境別のデザインを簡単に用意できます。

掲載日：2018年06月27日
ホームページの作り方：4通りの作成方法から選ぶ

個人や小規模企業で初めてホームページを作成する場合、できるだけ簡単に＆費用を掛けずに作りたいですよね。ホームページの作り方には大きく分けて4通りの方法があります。それぞれのメリット・デメリットを初心者でもわかりやすいように簡単にご紹介。自身のスキルやホームページの目的に合わせて適した方法を選んでみて下さい。

掲載日：2018年03月15日
右クリックを禁止する方法と禁止を回避(解除)する方法

右クリックで表示されるメニュー(コンテキストメニュー)の表示を禁止しているウェブページがあります。右クリックで表示されるメニューを非表示にする方法はとても簡単ですが、禁止を回避する方法も簡単です。その両方の実現方法をご紹介。主にHTMLソースを見せたくない場合に活用されるのでしょうが、右クリックができなくてもソースは表示できます。単に不便になるだけなので、右クリックの禁止は避けましょう。

掲載日：2018年03月19日
レスポンシブWebデザインの簡単な作り方

レスポンシブWebデザインとは、アクセス者が使用している画面サイズやブラウザに応じて適用CSSを分けることで、閲覧環境に合ったデザイン・レイアウトでウェブページを表示する方法のことです。レスポンシブWebデザインのメリット・デメリットなどの基本から、初心者にもわかやすい簡単な作り方まで解説。大型・小型画面PC、タブレット、スマホ等のあらゆる端末に対して単一ページだけで一括対応させられる、楽で便利な方法です。

掲載日：2018年03月19日
ドロップダウンメニューをHTML＋CSSだけで作る方法

メインメニュー項目の上にマウスポインタを載せると、下方向にサブメニューが展開するドロップダウンメニューの作り方をご紹介。JavaScriptは不要です。HTML＋CSSだけでドロップダウン機能を作る方法を解説。サブメニュー項目からさらに孫メニューを右側に出すなど、3段階以上のドロップダウンメニューも簡単に作れます。

掲載日：2018年06月19日
HTML＋CSSで、table(表)の列幅を均等に設定する方法

table要素を使って表を作ると、標準では各セルの内容量に応じて自動的に行や列のサイズが決定されます。その結果、列幅が揃わずにバラバラになることがあります。しかし、列幅を均等に配分した方が見た目が良い場合もあるでしょう。CSSのtable-layoutプロパティを使えば、わざわざ各列の横幅を数値で指定しなくても、列幅(セルの横幅)を均等にできます。

掲載日：2018年06月15日
CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可

HTMLで書いた文章を、CSSで左寄せ・中央寄せ(センタリング)・右寄せする方法を解説。同一行内に左寄せと右寄せを共存させたり、左寄せ・中央寄せ・右寄せ全部を同じ行に横並びで表示させたりもできます。1行の文字寄せ方向を指定するだけならtext-alignプロパティを使うだけでとても簡単。複数の文字寄せ方向を混在させたい場合でも、CSSを少し工夫するだけで掲載できます。

掲載日：2017年12月08日
画像上の自由な位置に文字を重ねる方法

ウェブ上に表示した画像の上に文字を重ねる方法を解説。HTMLとCSSを使えば、表示位置(座標)を指定することで画像の上に任意の文字を重ねられます。画像そのものを加工する必要は一切ありません。HTMLで画像と文字を掲載し、スタイルシートで文字の配置を調整するだけの簡単な方法です。表示例に加えて、コピー＆ペーストで使えるサンプルソースと共に解説。

掲載日：2018年06月18日