0TweetWebプログラミングを始めて、CSSデザインを勉強してみようと思ったけど、ちょっと難しくて分からない...。今回はそんな方向けに簡単な解説をしたいと思います。初歩の初歩が分からないと、どんな解説サイトを読んでも何を言っているのかチンプンカンプンですが、基本さえ分かってしまえばCSSはちっとも難しくないですし、デザインの幅も広がってとても楽しいので、この機会にぜひ身に着けてみてください。CSSの基本まとめCSSの基本CSSは、HTMLで作ったサイトをデザインしたり、レイアウトする言語です。色やサイズの変更、形の変更、アニメーションなど、できることは様々です。CSSで装飾する方法HTMLの<head></head>部分に記述したり、HTMLとは別の外部ファイルを読み込んで使います。href="使いたいCSSファイル">の記述を入れることで使うことが出来ます。モバスペではhead間要素編集で記述することが出来ます。WordPressやブログサービスなどでは、ダッシュボードでCSSファイルを管理することが出来ますね。CSSでデザインをする時は、divタグやpタグなど様々なものにclassという属性を与えます。ブログの記事内に重要な記述をする時、その部分だけ赤い文字に変えたいことがあります。このdivまたはspanに記述した「example-class」という名前のclassをターゲットに、CSSを記述してデザインします。.example-class{color:red;}この短い一行を記述するだけで、サイト内の全てのexample-classというclassをもつ要素の文字が重要な記述と、このように赤くなります。classとidを使い分けるdivやspanなどの要素の指定の仕方はclassだけでなくidで指定することも出来ます。id="example-id">重要な記述</div>とclassと同じです。CSSの指定の方法は、classがドット(.)なのに対し、idはシャープ(#)で指定します。#example-id{color:red;}classとidはそれぞれの役割を知り、使い分けをしましょう。classの場合は一ページ内で複数使用している要素に種別名を付けるために使います。class=”html”>(コードの記述)</div>などとして、CSSファイルでデザインを指定しています。対してidは基本的にそのページに一つだけある要素に固有の名前を付けるために使います。サイトのヘッダーやフッターはそれぞれ一つですね。id="header">ヘッダー</div>とこのようにid=”header”と付ければ、役割がわかりやすいですし、このidを指定してCSSを記述すれば固有のデザインにできます。凝ったデザインをしてみる文字色の変更だけでなく、枠線を表示したり、背景色を変えたり、アニメーションを追加したり出来ます。class="example-class">重要な記述</div>にCSSを色々と記述すると、こんな風に見せることも出来ます。*/}CSSの基本まとめCSSを記述すれば、形や色、表示場所、そのほか色々なものを自由自在に決められます。HTMLで、デザインやレイアウトを適用したい要素にclassまたはidを付け、それに対してCSSを記述することで求める見た目を実現することが出来ます。簡単に説明しましたが、分からないことがありましたら、お気軽にご質問ください。]メールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。非表示のinput要素ではクリップボードへのコピーSlackの普及でデコメ絵文字の復権なるかシュガーラッシュのネット世界と、サマーウォーズのO個性的でオシャレなダーツボードを買うならZazzlGitのユーザ名を変える方法の使い分けについて。気になるサイトの更新通知はRSSリーダーで受け取ろう!マルチ商法の勧誘の問題点を知れば、仕事で成功するヒントが見えるこのサイトの運営者ノッテ92年うまれ。