『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。CSSはじめてCSSの学習をされる初心者の方向けにCSSの概要について解説しています。Sheets)の略で、Webページのデザインを詳細に設定するための記述をするものです。Webページは、HTMLとCSSをセットとしてデザインしていきます。「HTMLには文書構造のみを記述する。「CSSでデザイン・レイアウトに関する記述をする。」というようにキッチリと分けて考えましょう。外部リンク式head内でのスタイルシートの指定スタイルシートの書き方を覚えよう概要スタイルシートの基本スタイルシートをHTML文書に適用させる3つの方法スタイルシートの書き方を覚えよう補足・ポイントHTMLとCSSの関係HTMLは、見出しや段落などの文書構造を記述するためのものでした。CSSは、このHTML文書に対して、文字の大きさやカラー、配置等のデザイン・レイアウトを指定するためのものです。HTML文書内の「どんな要素に対して、どういったスタイルを適用するのか」を記述します。複数のHTMLページを一括で管理できることがスタイルシートの魅力の一つです。スタイルシートでHTML文書の要素をデザインしておけば、それを必要な箇所に何度も繰り返して適用することができます。スタイルシートをHTML文書に適用させる3つの方法インライン式body要素の中にある個別のタグに対して、直接スタイルを適用させる方法です。文書構造のみの記述であるHTMLが複雑になるため、最近はこの方法はあまり推奨されていません。埋め込み式head要素内にstyle要素を記述し、その中にスタイルシートを記述する方法です。埋め込み方式は、そのページ独自のスタイルを指定したい時などに利用されます。外部リンク式HTMLファイルとは別にスタイルシートのファイルを用意して、HTMLファイルからスタイルシートのファイルにリンクする方法です。head要素内にlink要素を記述して、スタイルシートファイルを読み込み、HTMLファイル全体に適用させます。スタイルシートの指定には、link要素のhref属性の値としてスタイルシートファイルへのパスを記述します。Webサイトが複数ページで構成されている場合には、とても便利な方法で、この外部リンク方式で制作されることが多いです。href="styles.css">スタイルシートの書き方を覚えようスタイルシートでは、「セレクタ」というスタイルを適用する対象にスタイルの種類を表す「プロパティ」を指定しその「値」を記述することで定義します。プロパティが複数の場合は、以下のような記述になります。FukumotoフリーランスWebデザイナー・Webスクール講師。子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。フリーランスでWebデザイナーを目指す方々のサポートに注力している。『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。