電子工作作業報告書管理アプリその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を作ることにする