P.1HTMLとCSSについて、初心者の方向けに記事を書いていきます。私も独学で学びましたが、その際につまずいた箇所や注意する点など、なるべきわかりやすく書いていきますので参考になればと思います。PhotoshopVIPHTMLとCSSの関係性HTMLとCSSはとても重要な関係性にあります。ホームページなどはこの2つでほとんどが成り立っているといっても過言ではありません。一つずつ理解していきましょう!HTMLについてWEBサイトに文字などを表示する為に必ず必要なデータになります。ヘッダー、サイドバー、フッターなどもHTMLに打ち込むことで存在しています。HTMLにはバージョンがあり、今はHTML5が主流になっています。バージョンによっては、新しい機能や文章構造が増え、それにより需要のなくなったものが使えなくなっていくという感じです。HTMLのバージョンを宣言する言語です。この中にHTMLを記述します。文字化けを防ぐために記述します。このHTMLのタイトル/ページ名を記述します。CSSはHTML内にも記述できます。その際はこの中に記述します。javascriptを使用する際はこの中にコードを記述する必要があります。※省略できますお気づきだと思いますが、HTMLでは開始タグ(<セレクタ>)と閉じタグ(</セレクタ>)を使うことがほとんどです。開始タグと~閉じタグで挟んだものに、セレクタごとの指令を出す。下図のようにマークアップとタグとテキストによってWEB表示されるイメージ。<div>とはタグで囲んだ単体・複数に名前を指定しグループを作ることができる万能タグです。指定する種類は「id」や「class」がありますが、2つには違いがあります。「id」は1つのHTMLページで1度しか使えませんが、「class」は何度も使うことができます。HTMLは上に記述したものから処理を行っていきますが、その中で何度も使うグループか、そうでないかで使い分ければいいと思います。CSSについてHTMLに記述をしたもの、idやclassをつけたものに対し、大きさや色など様々な視的効果をつけるのがCSSです。外部CSSファイルをHTMLと関連付ける必要があります。下図のように同じフォルダに入れてあげます。imageフォルダにはサイト内で使用する画像を入れておきます。HTMLに外部CSSを関連付けるコードはコチラ。/>CSSにそれぞれの値を入れておけば、例えば下図のような表示になります。この例では、ヘッダー・コンテンツ・サイドバー・フッター、それぞれの幅や高さと背景色を指定しています。ちなみにCSSにもバージョンがあり、今はCSS3が主流になっています。PhotoshopVIPWebデザインにおける文字テキストデザインは、これまでにないスタイリッシュなエフェクトが登場しています。新しいCSS3プロパティを利用し、JavaScriptでカスタマイズすることで、より魅力的な作品に仕上げます。今回は、今後のデザインプロジェクトで活用したい、CSS3を利用した美しいテキストエフェクトをまとめてご紹介します。