HTMLとCSSの基礎知識 P.1

HTMLとCSSについて、初心者の方向けに記事を書いていきます。

私も独学で学びましたが、その際につまずいた箇所や注意する点など、なるべきわかりやすく書いていきますので参考になればと思います。


スポンサードリンク


 

HTMLとCSSの関係性

 

HTMLとCSSはとても重要な関係性にあります。 ホームページなどはこの2つでほとんどが成り立っているといっても過言ではありません。 まずは一つずつ理解していきましょう！  

 

HTMLについて

WEBサイトに文字などを表示する為に必ず必要なデータになります。 ヘッダー、サイドバー、フッターなどもHTMLに打ち込むことで存在しています。 HTMLにはバージョンがあり、今はHTML5が主流になっています。 バージョンによっては、新しい機能や文章構造が増え、それにより需要のなくなったものが使えなくなっていくという感じです。 例えば HTML4.01のマークアップ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> /* pagetitle */ </title>
<style type="text/css"> /* CSS */ </style>
<script type="text/javascript"> /* JavaScriptコード */ </script>
</head>
<body>

/* ココに記述したものがWEBサイトに表示される */

</body>
</html>

HTML5のマークアップ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> /* pagetitle */ </title>
<style> /* CSS */ </style>
<script> /* JavaScriptコード */ </script>
</head>
<body>

/* ココに記述したものがWEBサイトに表示される */

</body>
</html>

とても簡単になりましたね！  

  お気づきだと思いますが、HTMLでは開始タグ（<セレクタ>）と閉じタグ（</セレクタ>）を使うことがほとんどです。

  HTMLとCSS。  

 

開始タグと～閉じタグで挟んだものに、セレクタごとの指令を出す。といった感じです。   下図のようにマークアップとタグとテキストによってWEB表示されるイメージ。

HTML記述

<div>とはタグで囲んだ単体・複数に名前を指定しグループを作ることができる万能タグです。 指定する種類は「id」や「class」がありますが、2つには違いがあります。 「id」は1つのHTMLページで1度しか使えませんが、「class」は何度も使うことができます。 HTMLは上に記述したものから処理を行っていきますが、その中で何度も使うグループか、そうでないかで使い分ければいいと思います。    

 

CSSについて

 

HTMLに記述をしたもの、idやclassをつけたものに対し、大きさや色など様々な視的効果をつけるのがCSSです。 まずは、外部CSSファイルをHTMLと関連付ける必要があります。 下図のように同じフォルダに入れてあげます。

名称未設定-2

 

imageフォルダにはサイト内で使用する画像を入れておきます。 HTMLに外部CSSを関連付けるコードはコチラ。（同じ階層にある場合）

<link rel="stylesheet" href="./style.css" type="text/css" />

/* HTML5ではtypeを省略可能 */
<link rel="stylesheet" href="./style.css" />

  CSSにそれぞれの値を入れておけば、例えば下図のような表示になります。

HTML記述2

 

この例では、ヘッダー・コンテンツ・サイドバー・フッター、それぞれの幅や高さと背景色を指定しています。 ちなみにCSSにもバージョンがあり、今はCSS3が主流になっています。 CSS3ではどんなことができるのか、こちらの記事をご覧いただくとビックリですよ！

 

CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ – PhotoshopVIP

Webデザインにおける文字テキストデザインは、これまでにないスタイリッシュなエフェクトが登場しています。新しいCSS3プロパティを利用し、JavaScriptでカスタマイズすることで、より魅力的な作品に仕上げます。 今回は、今後のデザインプロジェクトで活用したい、CSS3を利用した美しいテキストエフェクトをまとめてご紹介します。どのようなスタイリングがされているのか確認することもでき、 コピー＆ペーストで実用できる点もポイント です。 詳細は以下から。 10 Stunning Hover Effects with SCSS HTMLとCSSのみで表現された、アニメーション豊かなホバーエフェクト10種類。 Magnettype カラフルなアルファベットが、ふわりと浮かびあがってくる、HTML/CSSテキストエフェクト。 CSS Text Filling with Water コップに水が注がれているようなエフェクトを、アルファベットで表現したテキストエフェクト。 Nice SCSS Typography Underline フォントのベースラインに沿って引かれた下線は、フォントに被らないように工夫されています。 Scotch Digital Logo ドット状に表現されたアルファベットに、マウスカーソルを合わせると爆発エフェクトが。 Jelly Letters マウスをぐるぐると動かすことで、文字テキストを操ることができるユニークな仕掛け。 3D Text Effect スクリーン上でマウスを動かした方向に、テキストに立体的なエフェクトが追加されます。 GSAP IS: 並べられた英単語にマウスホバーすることで、影付きで立体的に浮かび上がるエフェクトで、text-shadowプロパティを利用しています。 The Correct Pronounciation ほんのりとドロップシャドウを利用した、質感高いテキストエフェクトのひとつで、シンボル記号をローテーション回転させ利用しています。 CSS3 text-shadow Effects こちらも複数のtext-shadowプロパティ値を設定することで、リアルな影を表現しています。 80s Typography レトロなタイポグラフィエフェクト、クロムとネオンスタイルをCSSで表現。キラリと光が反射します。

 

ちなみに、このサイト右上の追尾してくる5つのコンテンツボタンは、CSSのみで作っています！※PC画面のみ こういった動的な構築ができるのは、ページに個性を出せる１つのポイントですね！   次の記事では、実際のHTMLとCSSの記述に関して書いていきますので、ぜひ続きをご覧ください。




投稿日: 2016-03-01
カテゴリー: Design | 投稿者: NOR
«previous
next»
　

関連記事

【Photoshop】宇宙のような加工画像の作り方
【Photoshop】煙のようなエフェクトの作り方
WordPressでサイトをつくる～備忘録P.1～
Facebookの記事シェア時に画像が表示されなかった時の対処
WordPressでサイトをつくる～備忘録P.2～
Photoshopで簡単にストライプ（ボーダー）柄を作る

全コンテンツ新着記事

  • iPhone Xに機種変更して気付いたiTunesの落とし穴

  • 2017年11月3日発売だったiPhoneX（アイフォーン10）。

    予約開始が同年10月27日16:01からだったので、私は15:59から携帯を握りしめ、16:00:45から予約ページの更新を繰り返しながら、ページが表示されるとすぐ予約の申込みを完了しました。

    その成果あってか、発売日の11月3日の午前中には受け取りにいくことができました。

     

    続きを読む

  • mac for excel クラッシュ時の一時保存フォルダの場所

  • macのexcelで作業をしている時、何かのエラーを叩いてしまった際、excelが急にクラッシュして強制終了なんてことがよくあります。

    そんな時、Office製品はしっかり一時保存データを残してくれています。

    macでの一時保存フォルダを備忘録で残しておきます。

    続きを読む

  • Photoshopで簡単にドット柄を作る

  • 最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にドット柄の作り方を備忘録で残しておきます。

    私の環境はPhotoshop CS6 for Macです。

    続きを読む