「HP初心者」の記事一覧

ページ内の特定の場所へジャンプさせるリンクの張り方

リンクを張るためにはaタグを使いますが、同じページ内の特定の位置にジャンプさせたり、異なるページの特定の位置にジャンプさせる方法がわからないという方も多いと思います。 Web制作者であれば当然知っていることですが、初心者・・・

CSSのz-indexの使い方

CSSの「z-index」は、重なりを変更するためのプロパティです。Y軸は縦方向、X軸は横方向ですが、Z軸は重なりを表しています。 <div class="kasanari"><div class="b・・・

CSSのfloatプロパティの基本

image02

CSSのfloatプロパティは、初心者の方が覚えるのに苦労する部分かもしれません。仕組みがわかってしまえば難しいことはないのですが、floatを使うことでレイアウトが崩れてしまったり、親要素の背景が無くなってしまったりと・・・

overflow: auto;でBOXにスクロールバーを付ける

image01

トップページに新着情報を載せているサイトも多いですが、新着情報は数が増えてくるので載せる数を制限するか古い情報は見えないようにする対策が必要です。 10個ぐらいであれば全て見えるようにしておいても良いと思いますが、あまり・・・

CSSの疑似クラスの使い方

CSSには擬似クラスと呼ばれるセレクタが用意されています。擬似クラスというのは、閲覧者のアクションに合わせてスタイルを適用させる仕組みのことです。 サンプル このサンプルというリンクにマウスを載せると文字の色が変わり、ク・・・

CSSのclassとidの基本ルール・id名とclass名の付け方

特定のHTMLタグに対してCSSを適用させたい場合には、そのタグにclass名やid名を付けます。 p {    line-height: 20px;    } たとえばこのように書いた場合、サイト内の全てのpタグに対し・・・

CSSの外部参照・内部参照・インラインの書き方

CSSを使うことでサイトデザインや修正作業が非常に楽になりました。HTMLを修正する必要はなく、たとえばh1に対して外部CSSでデザインしていた場合、CSSの一部を修正するだけで全てのページのh1のデザインを変えることが・・・

UTF-8、Shift_JIS、EUC-JPなどの文字コードの指定

image02

HTML文書を作成する際に、その文書がどの文字コードで書かれているのかという事を宣言する必要があります。文字コードを宣言することで、ブラウザはその文字コードで書かれた文章であることを理解します。 文字コードを指定しなくて・・・

HTMLとXHTMLの違いとDOCTYPE宣言

ホームページを作るためにはHTMLを理解しなければなりませんが、正直しっかり憶えてなくても自分のサイトは作れます。タグ打ちで作る場合は別ですが、多くの人が一般的な部分のコードは既存サイトのコピペで対応しています。 いきな・・・

!importantによる優先度の変更とコメントアウトによる無効化

WordPressの無料テーマや、無料配布されているCSSテンプレートなどをカスタマイズして使うような場合、CSSを編集することになりますが、元々書かれているCSSを修正するのではなく、新たなCSSを追加していくような形・・・

CSSの親要素と子孫要素や継承について理解する

CSSを覚える際に親要素と子孫要素という概念を理解する必要があります。 <body><div id="main"><p>ここに文章が入ります。</p><p>ここ・・・

CSSのフォントの種類「font-family」について

image01

CSSではフォントの種類を指定することができます。当サイトはWindowsで見た場合、メイリオかMS Pゴシックで表示されるようになっています。 そのパソコンに存在するフォントでしか表現することができませんので、特殊な文・・・

CSSの値の単位「px、em、pt、%」など

CSSの「width、height、margin、padding、font-size」といったプロパティにおいて「値」を入力しますが、その際に数値が0の場合を除き「単位」を指定する必要があります。 #main {    ・・・

CSSの基礎の基礎を学ぶ

image01

HTMLの基礎の基礎を学んだら、次にCSSの基礎の基礎を学びましょう。 個人的に、テーブルレイアウトからCSSレイアウトへ移行する時に、結構手こずった記憶がありますが、今はテーブルレイアウトを覚える必要がありませんので、・・・

HTMLの基礎の基礎を学ぶ

image01

最近はWordPressのような初心者でも扱いやすいCMSがあることで、HTMLが良くわからない人でも簡単に自分のオリジナルサイトが作れるようになっています。 ただ、HTMLでサイトを作る場合でもWordPressでサイ・・・

ボックスに影を付けるCSS・ボックスを角丸にするCSS

前回、「文字に影を付けるためのCSS」をご紹介しましたが、今回はボックスに影を付けるためのCSSをご紹介します。文字のCSSと同じようにブラウザのバージョンによっては確認することができませんが、画像を使わないので手間がか・・・

CSSで文字に影をつける・マウスを載せると画像が変わる

image01

当サイトではレンタルサーバーの紹介を行なっていますが、その中で以下のようなボタンを使っています。 エックスサーバーの使い方はこちら 全て画像のように見えるかもしれませんが、これはCSSでテキストに影をつけて、背景として画・・・

Windowsのペイントで写真や画像を縮小する方法

image01

ホームページやブログに写真や画像を載せたいという方も多いと思いますが、初心者の方の場合、デジカメで撮った写真をそのまま載せてしまっているケースを良く見かけます。 無料ブログやWordPressを使う場合、通常は自動的に画・・・

Webサイト制作やSEOに役立つ便利なツール

Webデザインのプロであれば自分のサイトを簡単に作ってしまうと思いますが、全くの初心者の方がクオリティの高いサイトを作るのは難しいと思います。 私自身、サイトを作り出して5~6年経ちますが、いまだにまともなサイトを作るの・・・

おすすめテキストエディタはサクラエディタとTeraPad

Windowsであれば「メモ帳」が付いていますので、メモ帳でホームページを作ることもできますが、メモ帳では作りにくいと思いますので、おすすめの無料テキストエディタをご紹介します。 私自身、ホームページはDreamweav・・・

サブコンテンツ

このページの先頭へ