ryotankの備考録日記

趣味の電子工作についての備考録などなど

電子工作作業報告書管理アプリその28

CSS 解説編

Cascading Style Sheets (CSS)とは、HTMLなどのマークアップ言語で
書かれたWebサイトの見た目や書式を記述するための言語の事

Bootstrap は美しいWebサイトを開発するためのHTMLとCSSフレームワークとしてとても有名

Bootstrapのインストール

Bootstrap をインストールするため、.html ファイル (blog/templates/blog/post_list.html) をコードエディタで
開き の中にこれを追加しましょう

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

静的ファイルと呼ばれるものを詳しく見ていきましょう。 静的ファイルとは、CSSファイルや画像ファイルといった、動的な変更が発生しないファイルのことです。
そのため、これらのファイルはリクエストに依存せず、どのユーザに対しても中身は同じになります。

static ディレクトリの中に css というディレクトリを作成しましょう。 そして、その css ディレクトリの中に blog.css という新規ファイルを作ります。 準備OK?

djangogirls
└─── blog
└─── static
└─── css
└─── blog.css

ついにCSSを書くときが来ました! コードエディタで blog/static/css/blog.css ファイルを開きましょう。

h1 a, h2 a {
    color: #C25100;
}

h1 a はCSSセレクタと呼ばれるものです。 これは、h1要素内のa要素に
スタイルを適用していることを意味します。 h2 aセレクタは、h2要素に対して同じことを行います。
よって

<h1><a href="">link</a></h1>

となっているとき、
h1 a スタイルが適用されます。
この場合、その要素を #C25100 に、つまり濃いオレンジ色にしようとしています

CSSファイルには、HTMLファイルの各要素のスタイルを指定していきます。
まずは要素名でもって、その要素を識別します。 HTMLのタグ名は覚えがあるでしょう。
例えば a, h1, body などが要素名の例です。 また、class 属性や、id 属性によって
要素を識別することができます。 classやidは、あなたが自分で要素につけることができる名前です。
classは要素のグループを定義して、idは特定の要素を指定します。
例えば、次のタグは、タグ名 a、class名 external_link、id名 link_to_wiki_page、
どれを使ってもCSSによって識別されます。

CSSを追加したことをHTMLテンプレートに教えないといけない。
blog/templates/blog/post_list.html を開いて、先頭にこの行を追加しましょう

{% load static %}

次回は上記の解説に習ってewrn用のcssを作ることにする