無料ホームページ作成情報 トップ > CSS（スタイルシート）入門
ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。
CSS（スタイルシート）入門について
HTMLでは設定できない、文字の大きさや色などを設定するために必要なCSS（スタイルシート）に関する説明です。
CSS（スタイルシート）入門メニュー
- 3-1）CSS（スタイルシート）の基本
- 3-2）CSS（スタイルシート）の記述方法
- 3-3）CSS（スタイルシート）の長さの単位
- 3-4）CSS（スタイルシート）でページを設定
- 3-5）CSS（スタイルシート）でリンクを装飾
- 3-6）CSS（スタイルシート）でスクロールバーとマウスポインタを変更
- 3-7）CSS（スタイルシート）でボックスを設定
- 3-8）CSS（スタイルシート）でボックスレイアウト
- 3-9）CSS（スタイルシート）で文字を設定
- 3-10）CSS（スタイルシート）で段落や配置を設定
- 3-11）CSS（スタイルシート）の擬似要素で1行目と1文字目を設定
- 3-12）CSS（スタイルシート）でリストを設定
- 3-13）CSS（スタイルシート）で画像を設定
- 3-14）CSS（スタイルシート）で表を設定
- 3-15）CSS（スタイルシート）でフレームを設定
- 3-16）CSS（スタイルシート）でフォームを設定
CSS（スタイルシート）入門
3-1）CSS（スタイルシート）の基本
CSSとは「Cascading Style Sheets」の略で、一般的に「スタイルシート」と呼ばれるもので、HTMLだけでは設定できない細かな書式も設定できる便利な機能です。
代表的な例は、HTMLでは文字の大きさを6段階で設定できますが、フォントサイズ「pt」では設定できませんが、スタイルシートを使用するとフォントサイズ「pt」で設定できます。
ホームページの書式設定などは、W3Cという国際団体で推奨方法というものがあり、推奨されない設定方法は将来的に使用できなくな ると言われています。HTMLはインターネット創成期から、様々な表現ができるように常に進化してきましたが、その進化の結果、HTMLは複雑になり特に デザイン重視のページのHTMLは、ファイルサイズが大きく複雑なものになりやすくなりました。そこで、現在HTMLで設定できる書式設定も、できるだけ CSSで設定するように推奨されています。
しかし、CSSは閲覧者のブラウザのソフトウェアやバージョンによってうまく表示されないことがあります。その為、メジャーなブラウザでは共通して使用できない設定は使用しないか、もしくは対応しないブラウザのために特別な追記を行う必要があります。
3-2）CSS（スタイルシート）の記述方法
CSS（スタイルシート）の基本的な記述方法を確認していきます。
3-3）CSS（スタイルシート）の長さの単位
CSS（スタイルシート）では、長さや大きさを指定できます。
HTMLでは、指定できない値まで指定できるので、自由なデザインを実現できます。
まずは、絶対的な単位です。日常生活では、「mm」や「cm」がよく使用されますが、Wordなどのソフトウェアでは「pt」がよく使用されます。
3-4）CSS（スタイルシート）でページを設定
CSS（スタイルシート）でページを設定します。
3-5）CSS（スタイルシート）でリンクを装飾
CSS（スタイルシート）でリンクを設定します。
なお、リンクは標準で青色、訪問済みのリンクは紫で表示されます。また、一般的にリンクには下線が表示されていることが多いです。 閲覧者は、この配色や下線になれているため、青い文字で下線があると無意識でリンクがあると判断します。この色を変更するということは、閲覧者にリンクの 存在を伝えにくくするということで、アクセスがしづらいということも言えるので注意が必要です。
3-6）CSS（スタイルシート）でスクロールバーとマウスポインタを変更
CSS（スタイルシート）でスクロールバーとマウスポインタを設定します。
3-7）CSS（スタイルシート）でボックスを設定
CSS（スタイルシート）で書式を設定するための、最も基本的な設定の1つにこのボックスの設定があります。これには、HTMLタグにはない設定も多く。これを正しく理解するかどうかで、スタイルシート全体の理解度にも影響する重要な設定です。
ここでは、範囲を設定する<div>タグに「．box-tokyo」というクラスを作成して、ボックスのプロパティを設定していますが、<h>タグや<p>タグなどにも設定できます。
3-8）CSS（スタイルシート）でボックスレイアウト
ボックスの設定を使用すると様々なレイアウトを行うことができます。
3-9）CSS（スタイルシート）で文字を設定
CSS（スタイルシート）を利用して、文字の色や大きさなどを設定します。
文字の設定は、<p>タグや<h>タグに設定できる他、<span>タグを使用すれば1文字単位でも設定可能です。
3-10）CSS（スタイルシート）で段落や配置を設定
CSS（スタイルシート）を利用して、段落の設定します。
段落の設定は、<p>タグや<h>タグに設定できる他、<div>タグを使用すれば複数の段落に一度に設定可能です。
3-11）CSS（スタイルシート）の擬似要素で1行目と1文字目を設定
CSS（スタイルシート）の擬似要素を利用して、段落の1行目や1文字目の設定します。
擬似要素を使用すると、要素の一部分にスタイルを設定することができます。
3-12）CSS（スタイルシート）でリストを設定
CSS（スタイルシート）を利用して、リストの設定します。
3-13）CSS（スタイルシート）で画像を設定
CSS（スタイルシート）を利用して、画像の設定します。
3-14）CSS（スタイルシート）で表を設定
CSS（スタイルシート）を利用して、表の設定します。
3-15）CSS（スタイルシート）でフレームを設定
CSS（スタイルシート）を利用して、フレームの設定します。ここではインラインフレームを使用して説明します。
基本的には、「3-7）CSS（スタイルシート）でボックスを設定」の設定と同じです。また、SEO対策を考慮すると、できるだけボックスレイアウトを使用したほうが良いでしょう。
3-16）CSS（スタイルシート）でフォームを設定
CSS（スタイルシート）を利用して、フォームの設定します。ここではインラインフレームを使用して説明します。
フォームのHTMLは「2-10）フォームを設定するHTML」を設定します。
ホームページ制作実績一覧
- 「八千代市の水道工事・管工事なら八千代市管工事協同組合」八千代市の水道事業としての指定工事店の団体です。申請代行業務を始め、市内の漏水修理も当番制にて当組合員で修理工事を受けています。
- 「千葉市緑区にある打ちっぱなしのゴルフ練習場・レッスンプロによるゴルフスクールも充実」誉田ゴルフセンターは、千葉県千葉市緑区にある150打席・250ヤードの開放感抜群の打ちっぱなしのゴルフ練習場です。レッスンプロによるゴルフスクールも充実。
- 「グローバルキャリアステップアップの海外リモートインターンシッププログラム」海外リモート インターンシップ・バーチャルインターンシッププログラム「グローバルキャリアステップアップ」は、大学生・大学院生向けの、外資系企業への就職・就活へ有利となる、海外リモート インターンシッププログラム。
- 「埼玉県さいたま市西区の足場工事・架設工事・鳶職人・運送業」埼玉県さいたま市に拠点を構え、関東一円で足場架設工事を主たる業務として手掛けております。安心安全を心掛け、若くてエネルギッシュなメンバーとともに、足場作業を行っております。
- 「鉄道事業者・電気事業者向けの制御装置・計測装置なら昭和電子工業」負荷管理や過渡現象を捉える計測装置や電力設備の制御装置、鉄道事業者や電気事業者や人々の安心安全をサポートする機器の開発、製造、販売を行っております。昭和電子工業のキャリア採用サイト・新卒採用サイト（神奈川県相模原市）。
- 「建物の解体の上村組（京都府京都市）」京都市（京都府、滋賀県、大阪府）を中心に「ビルから町屋・家屋まで」あらゆる建物の解体、建設廃棄物（建廃）の産業廃棄物（産廃）の適正処理を行っています。
- 「千葉市緑区古市場の車のカスタムとラッピングや中古車販売と買取」千葉県千葉市緑区古市場を中心に輸入車・国産車のカスタム・改造・ドレスアップとラッピング、中古車の販売と買取・在庫一覧ならLIG Factoryへ。
- 「マクロビ・フッ素樹脂加工のメールアドバイス・コンサルティング」マクロビ（マクロビオティック）・天然酵母パン、フッ素樹脂加工のメールアドバイス・コンサルティングならオフィス誉田。
- 「千葉県市川市を中心に不動産コンサルティング・新築分譲・不動産再生・サブリースなど」NKコンサルティング株式会社、千葉県市川市を中心に不動産のコンサルティング・新築分譲・不動産再生・サブリース・不動産仲介・建築企画・建物管理などご相談ください。
- 「プロサッカー選手 中村敬斗（Keito Nakamura）」株式会社 Keito-ism。プロサッカー選手の中村敬斗（Keito Nakamura）のオフィシャルサイトです。
- 「東金市山武市九十九里町大網白里市のトリミング・シャンプー」愛犬（わんちゃん）のトリミング・シャンプー・エステ・マッサージなら千葉県東金市のペットサロンぴょんぴょん（Pet Salon Pyon Pyon）。
- 「漢方と鍼灸なら集英堂漢方薬局・鍼灸院 千葉県四街道市」千葉県四街道市にある漢方薬局と鍼灸なら「集英堂漢方薬局・鍼灸院」まで。漢方煎じ薬や鍼やお灸など。
- 「4スタンス理論のゴルフレッスン（ゴルフ場・練習場）愛知県・三重県。」愛知県や三重県で4スタンス理論によるゴルフレッスンを提供。ゴルフ練習場でのレッスンやゴルフ場（コース）でのラウンドレッスンならオリジナルフォームアカデミー。
- 「企業・学校法人向け英語研修・通信教育・オンラインレッスン・講師派遣のリンゲージ。」真に、世界で戦える語学力。ワンストップでお約束できるのは、リンゲージ。受講者の目的や予算に合わせて、グローバルな人材育成につながる企業・学校法人向けの英語研修をご提案しています。
- 「オンライン留学（バーチャル留学）・オンライン英語学習（英会話）。」グローバルスタディ海外留学センターがオススメするオンライン留学（バーチャル留学）。パソコンやタブレット・スマホでオンライン英語学習（オンライン英会話）。
- 「英語でのオンライン会議・Web会議＆商談に特化した英会話研修。」Work Smarter（ワークスマーター）。Linguage の企業研修プログラム。アフター＆ウィズコロナの新時代に急増する、英語でのオンライン会議・Web会議＆商談に特化した研修。
- 「きよみ幼稚園 東京都板橋区高島平の私立幼稚園」私立学校の特質に鑑み、理想とする幼児教育・保育を行うことにより、調和のとれた高い人格を持ち、健全な社会生活を営め、社会に貢献できる人間の育成を目的と致します。
- 「ポメラニアン専門ブリーダーとトリミングなら千葉県香取市のキャンドルドック」キャンドルドッグ（Candle dog）は、千葉県香取市にあるポメラニアン専門ブリーダー・子犬販売、愛犬の美容室・シャンプー・トリミング（全犬種）・ペットホテルのお店です。
- 「千葉の別荘や房総エリアの海が見える田舎暮らしなら千葉県富津市のアイビーホーム」千葉・房総エリアの海が見える別荘・土地・田舎暮らし物件・リゾート物件・不動産物件検索なら千葉県富津市にある株式会社アイビーホームへお任せ下さい。
- 「司会者検索やMC育成・司会講師のグレースMC 東京横浜千葉埼玉から全国」結婚式・披露宴・ブライダル・パーティ・イベント・セミナーの司会者検索（MC・進行役）。司会者育成や講師、ナレーションや声のタレントなど。東京都・東京23区・神奈川県・横浜市・千葉県・埼玉県から全国対応。
- 「司会者認定資格やMC育成講座なら日本プロフェッショナル司会者協会」一般社団法人日本プロフェッショナル司会者協会（JPMC）はプロの司会者の技術を認定したり、認定講師による各種講座などで司会者を育成します。認定資格・ディプロマ（認定証）発行など。
- 「山梨県都留市の土地探し不動産物件検索なら三洋」山梨県の土地や建物の売買物件・賃貸物件など不動産物件情報検索なら、都留市の不動産会社の有限会社三洋へお任せ下さい。
- 「埼玉県桶川市の水回りのリフォームならフジケン」川越・鴻巣・上尾・浦和などのトイレ・洗面所・キッチンなど水回りのリフォームなら、埼玉県桶川市のリフォーム会社。
- 「日本と中国のアニメやゲームの企画・制作・プロデュース。IP（知的財産）の管理と投資。」日本と中国のアニメやゲームの企画・制作・プロデュース。IP（知的財産）の管理と投資なら株式会社アクセスブライト・アニメーション。
- 「キャンピングカー駐車場で車中泊 代官屋敷 静岡県伊豆の国市」富士山が見えるキャンピングカー駐車場で車中泊するための有料駐車場です。トイレや洗面所・電源やゴミ処理などの施設があります。敷地内にそばやうなぎなどの食事処「代官屋敷」があります。
- 「中国市場への進出（舞台・ライブ・映画・ゲーム・グッズ）をサポート」株式会社アクセスブライトは、上海に中国法人を持ち日本企業やアーティストの中国市場への進出をサポート。舞台・ライブ運営、映画配給、グッズ・ゲーム開発・販売・配信に実績が多数。
- 「千葉の別荘や房総エリアの海が見える田舎暮らし」千葉・房総エリアの別荘や土地・建物、海が見える田舎暮らしなら千葉県富津市の不動産会社の株式会社アイビーホームへお任せ下さい。
- 「LINEで安否確認で孤独死や突然死を回避ならエンリッチ見守りサービス」数日ごとにLINEを使って安否確認、あなた（自分）を家族（親・子など）に変わって見守ります。日常生活の中でも単身者による孤独死や突然死のリスクを回避。
- 「Panasonicの電気屋さん「e-Life タケダ」千葉県山武市」「e-Life タケダ」は、千葉県山武市にあるパナソニック（Panasonic）の電気屋さんです。家電・AV製品の販売や、太陽光発電・リフォームなどを提供しております。武田電機株式会社。
格安です！ホームページ制作をご依頼ください！！
ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ（SEO対策）などわかりにくいことがあればお気軽にお問い合わせください。
