CSSに関する世界観です。HTMLも参照のこと。
基本の要素として、
h2 {
margin: 40px 0 30px 0; /* 上マージン40px、右マージン0、下マージン30px、左マージン0 */
color: #6c5776; /* 文字色を#6c5776に */
padding: 8px 10px; /* 上下パディング8ピクセル、左右パディング10px */
border-left: 10px solid #6c5776; /* 左ボーダーを、10pxの直線、線色#6c5776に */
border-bottom: 1px dashed #6c5776; /* 下ボーダーを、1px幅の破線、線色#6c5776に */
font-size: 180%; /* 文字の大きさ */
background: #e8e6f3; /* 背景 */
}
などがある。CSSのコメントは/*～*/で記述する。
基本的にマージンとパディング（後述）を取り、文字色と線（ボーダー）と背景を設定する。
場合によっては幅や高さ、あるいはデコレーション要素などを記述することが多い。
CSSでセレクタを使うには、まず、HTMLの方で、
<div class="classname">テキスト</div>
とし、CSSの方で、
.classname {
padding: 10px;
margin: 30px 0 30px 0;
border: 1px dashed #9aadbe;
font-size: 13px;
}
などとしてやります。
領域内の特定の要素にスタイルをかける場合は、スペースを使って
.classname li {
...
}
などとします。
複数のクラスを一度に設定する場合は、
.classname1,.classname2 {
...
}
とします。
たとえば、以下のようにすることで、特定の領域のリンクの色を変えられます。
.tabs a:link {
color: #23466e;
}
.tabs a:visited {
color: #848a96;
}
クラスではなくidの場合は、「.」の代わりに「#」を使います。
pタグやdivタグへの適用の場合は、.classnameのような記述で構いませんが、tableタグのような場合ではタグ指定が必要です。この場合、
table.some_tables {
padding: 10px;
margin: 10px 8px 10px 8px;
border-collapse: collapse;
}
などとします。blockquoteなどについても同様です。
CSSのdisplayにはblock, inline, inline-block, noneを指定できる。
pタグやdivタグなど、左右ぴったりに伸びる領域を作るブロックのタグのデフォルトは
display: block;
aタグやspanタグなど、文字の中に挿入されるインラインのタグのデフォルトは
display: inline;
divタグで領域を作った時、領域の幅は画面の左右いっぱいに作られる。これを、widthで指定したサイズ、あるいは
width: auto;
で幅として必要なだけの幅に自動的に調整して表示したい時は、
display: inline-block;
を指定する。こうすると、左右の幅が自動的に調整されるだけでなく、たくさんの要素があった時にブロックを横に並べることができる。この並び方を上に整列するには
vertical-align: top;
を指定する。
また、右や左に回り込みをする時は
float: right;
やleftを指定する。この時、
clear: right;
やleftやbothを指定することで、複数のブロックが横に並ばないようにすることができる。
また、
display: none;
にすることで、要素を非表示にできる。レスポンシブデザインなどでスマホ向けのページにする時に、余計な要素を非表示にするなどの用途が考えられる。
marginはその要素の「外側」に出来る空き領域のことで、paddingはその要素の「内側」に出来る空き領域のこと。
borderを指定した場合、borderの外側にmarginができ、borderの内側にpaddingが出来る。
以下のサイトを参考に執筆しました。
後日注記：marginとpaddingはborderやbackgroundを設定する上で重要。線に囲まれた四角の領域があって、その内側の余白をpadding、外側の余白をmarginと呼ぶ。margin-leftやpadding-leftのように設定することもできる。
max-widthとmin-widthは、幅の最大値・最小値。これ以上大きく・小さくなることを制限できる。レスポンシブデザインなどで有効。
div要素だけではなくimg要素などにも適用することができて便利である。たとえば、
.block_box {
display: inline-block;
vertical-align: top;
margin-right: 15px;
width: 750px;
max-width: 90%;
}
.titleimage img {
max-width: 90%;
}
などとできる。
後日注記：max-widthとmin-widthは、上手く使うとJavaScriptを使わずに高度な画像などの拡大縮小ができる。たとえば、
width: 100%; min-width: 1000px; object-fit: cover;
とすることで、「画面いっぱいに拡大してほしいけど、1000pxのサイズより小さくなってほしくない」といったことができる。1000pxの部分にオリジナルの画像サイズを入れれば、「画像を小さくせず、100%の横幅の分だけ拡大してほしい」ということができる。object-fit: cover;は縦横の比率を変えないために設定する。
Flexboxは今までmarginやpadding, floatやdisplayで行ってきた「横並びの配置」を綺麗かつシンプルにできるCSS3の機能。
基本的に
<div class="index_container">
<div class="index_box">
...
</div>
<div class="index_box">
...
</div>
</div>
として、CSSで
.index_container{
display:flex;
flex-flow: row wrap;
}
.index_box {
flex: 1 0 50%;
}
とする。
後日注記：いろんな設定があるが、とにかくdisplay: flex;を設定しておけば内部のdiv要素を横列に揃えて段組みすることができる。レスポンシブなどでモバイル端末だけ解除したい場合は、@media screen and (max-device-width: 480px) { }の中でセレクタを使ってdiplay: block;と上書きすればいい。
疑似要素:beforeと:afterを使うことで、以下のようにタイトルの前に画像を置いたりなど、疑似的な要素を作ることが出来る。
h1:before {
content: url("cat2.png");
margin-right: 15px;
}
以下のサイトを参考に執筆しました。
:beforeと:afterやcontent、position:relative;やposition:absolute;、top/left/right/bottomなどを使い、border-*や丸要素のradiusや傾きのtransformを使いこなすことで、CSSだけでアイコンを作ることができる。
普段Adobe Illustratorを使っている僕からすると、backgroundやborderで塗りや線を表現する感じは、イラレに近いところがあるのかもしれないと思う。
後日注記：CSSでアイコンを作るには、before疑似要素あるいはafter疑似要素を設定する。
まず、display:block;を指定する。これを指定しないと、回転などの効果がかけられない。
position:absolute;を指定して、位置を絶対位置にする。
そして、線を作る時はborder、塗りを作る時はbackgroundを使い、位置はtop/left/right/bottom、大きさはwidth/heightで設定する。
曲線にしたい時はborder-radius, 三角形を作りたい時はborder: 10px transparent solid;などで線と線の境界線が斜めになる挙動を利用し（なぜこれで三角形が作れるのかはなぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた | 株式会社LIGなどを参考のこと）、四角形を作りたい時はbackground、回転をかけたい時はtransform: rotate(45deg);などで設定する。
上手くいかない時は、!important宣言や、もっと下の箇所で思わぬ記述があって上書きされていたりする（たとえばセレクタでliを設定していても、下の方の.hoge liが適用されていたりする）ので、ブラウザの検証ツールを使って間違っている箇所を発見しよう。
absoluteは絶対位置、relativeは相対位置で、要素を特定の位置に表示できる。現在の要素の位置に関係なく一番上に要素を載せたい時などに利用する。
position:static;
は、特に位置を設定しない。top, bottom, left, rightの値は適用されない。デフォルトの場合での初期値はこれになる。
position:relative;
は相対位置。top, bottom, left, rightの値だけ、標準の位置（position:static;の位置）よりもずらした場所への配置になる。
position:absolute;
は絶対位置。通常、親要素にposition:static;が設定されている場合は、ウィンドウ左上の絶対位置からtop, bottom, left, rightの値だけ、ずらした場所への配置となる。要素がどこにあるかに関係なく、絶対位置に要素を表示することができる。
ただし、子要素にposition:absolute;が指定されている場合でも、親要素にposition:static;以外の値が設定されている場合は、親要素の左上が基準位置となる。たとえば、親要素にposition:relative;が指定され、子要素にposition:absolute;が指定されている場合は、親要素の値を基準位置とした場所に要素が配置される。
要するに、position:absolute;が指定されていると普通は絶対位置になるが、その親要素にposition:relative;やposition:absolute;などが指定されている場合ではそこからの位置になる。
position:fixed;
は、absoluteと同じように絶対位置となるが、スクロールしてもその位置が固定される。
（以上はposition－スタイルシートリファレンス - HTMLクイックリファレンスを参考に執筆しました。）
後日注記：良く分からない方は、absoluteを指定する時は親要素にrelativeを指定しておくと表示できる位置を相対的に変えられる（そこからの位置にできる）、と覚えておくといいでしょう。
!importantは、CSSの優先順位を変えられる宣言。通常CSSは後に書いたものの方が優先されるが、!importantを書くことで優先順位を最優先にできる。
pre.prettyprint {
color: #ffffff;
border: 1px solid #1d695f !important;
border-top: 5px solid #1d695f !important;
}
HTMLやCSSでは、#から始まる6桁の16進数で色を表現する。
たとえば、#FF8822では、FFが赤、88が緑、22が青になる。FFが最も色が明るく、00が最も色が暗い。#FFFFFFが白で、#000000が黒。真っ赤にする時は#FF0000とする。
以下のサイトを参考に執筆しました。
レスポンシブとは、スマホなどの小ディスプレイのデバイスに共通するHTMLで対応すること。
スマホなどの小ディスプレイサイズのデバイスに対応するには、以下のように記述する。
基本的に、レスポンシブでは、ViewPortでブラウザの幅を設定する。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
もし、ここでwidth=300にした場合、ブラウザの横幅が300になる。デフォルトは980。300にした場合、980よりも約三倍ほど拡大される。width=device-widthにした場合は、スマホに応じて適切な幅となる。
CSSのほうで、レスポンシブに対応したCSSのメディアクエリの設定をする。これにより、スマホの場合だけ特別に適用するCSSを指定できる。
@media screen and (max-device-width: 480px) {
.sidebar_profile,.image {
margin: 10px 0 10px 0;
padding: 0px;
float: none;
}
.sidebar {
display:none;
}
#main-menu {
display:none;
}
.titleimage {
display:none;
}
body {
padding: 0;
}
.banner,.banner2{
padding: 0;
margin: 0 0 0 0;
background: #ffffff;
border: 0;
}
#toc {
padding: 0px;
margin: 10px 0 10px 0;
}
#toc ol li {
margin: 0px;
}
.sideiframe {
width: 100%;
}
.sideiframe_profile {
width: 100%;
}
}
詳しくは以下のページが参考になる。
Webブラウザ（Windows）も参照のこと。
2024.08.25編集
JavaScriptでCSSを操作するには、styleプロパティを使う。
たとえば、特定のdiv要素を任意のタイミングで非表示にするには、
document.getElementById('div_hoge').style.display = 'none';
とする。たとえばタブUIを実装したいなら、全てのdiv要素を非表示にして任意のdiv要素を表示するJavaScriptの関数を書いて、タブのクリック時に引数付きでこの関数を実行すればよい。
JavaScript（DOM/Canvas）も参照のこと。
CSSでは、アニメーションを簡単に実現できる。
まず、animationプロパティで、全体の時間の秒数や、アニメーションの仕方（連続的、ステップ、永遠に繰り返しなど）を指定し、@keyframesと結び付ける。
@keyframesでは、最初（from）と最後（to）の要素の状態を、transformプロパティで指定する。
たとえば、要素の移動する位置（translate）や拡大縮小するサイズ（scale）をtransformで指定する。
最初と最後だけでなく、時間をパーセントで指定すれば、全体の時間の中でたとえば25%, 50%, 75%の時間に、どこに動かすかも指定できる。
これにより、横スクロールによる、画像の自動切り替えを実現できる。
これとは別にJavaScriptでの方法として、一定時間ごとに関数を実行するには、setIntervalを使う。
setIntervalのコールバック関数で、transformプロパティをJavaScriptから操作すれば、同じことはできる。
以下は参考になるかもしれないサイト。
自分の書いたブログ「神々とともに生きる詩人」2021/01/21より。
CSSでは、Flexboxのほか、均等に揃えて要素を配置するグリッドが利用できる。1:2や3:4のような複雑な比率も可能。
CSS3では、色が徐々に変わっていくグラデーション、変形や角を丸くする、影の効果、ボックス形状のレイアウト、動くアニメーションなど、さまざまな視覚効果が追加された。
詳細は以下のページを参照のこと。
SassはプログラムのようにCSSを書くことのできる技術。
変数やmixin（関数のように引数を指定できる）が使え、セレクタの指定をネストできる。記法にはSASS形式とSCSS形式（よりCSSに近い）がある。
また、別ファイルの*.scssファイルをimportすることも可能。
2023.06.05編集
CSSを記述する上で、ブラウザの検証機能を上手く使いましょう。
Google ChromeやMozilla Firefoxには検証機能が備わっており、HTMLのタグを選択して、その要素にどんなスタイルが指定されているか、一目で分かります。
また、スタイルをその場で設定し直し、見た目がどのように変化するかも見ることができます。
CSSで見た目がどうしてもうまくいかない時や、見た目に不具合があってなぜなのか分からない時は、検証機能を使うようにしましょう。
Mozilla FirefoxやJavaScriptのツールも参照のこと。
僕は中学生の頃、CSSを使って（CSS3とかじゃない昔のCSS）、FF BATTLEというネットゲームのスキン機能を作っていました。ネットゲームを参照のこと。
2024.08.26
スライド。
CSS/JavaScriptでのホームページスタイル制作：
配色パターン：