多くのホームページ（最初のページ）には画面上部に『ヘッダー』があります。サイトのロゴやタイトルのほか、ナビゲーション要素のメニューやパンくずリストが配置されていることがあります。
ナビゲーション要素のメニュー、ブログのカテゴリーや履歴などを中心に、ヘッダーを表示しないときはサイトのロゴやタイトルを配置します。スマートフォンなど縦長の携帯端末では配置しません。
著作権表示や、本文に関連するページへのリンクを配置します。
長いリストのうしろのほうを隠しておき、ボタンが押されたら開くようにします。
<div class="cp_box">
<input id="cp01" type="checkbox">
<label for="cp01"></label>
<div class="cp_container">
<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>
/* ここに複数行を書く */
<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>
</div>
</div>.cp_box label {
z-index: 1;
position: absolute;
bottom: 0;
width: 100%; /* グラデーションの幅 */
height: 6em; /* グラデーションの高さ */
cursor: pointer;
text-align: center; /* ボタン内の文字の位置 */
background: linear-gradient(to bottom, #FFFFFF00 0%, #FFFFFFFF 100%); /* 背景をサイトに合わせる */
}
.cp_box input:checked + label:after {
content: '閉じる'; /* ボタンの名前（開いたとき） */
}
.cp_box label:after {
z-index: 2;
content: '続きをよむ'; /* ボタンの名前（閉じたとき） */
position: absolute;
line-height: 2.5em; /* ボタンの高さ */
bottom: 0;
left: 50%;
width: 16em;
transform: translate(-50%, 0);
letter-spacing: 0.05em;
border-radius: 20px;
color: #FFFFFF; /* ボタンの文字色 */
background: #5AA25A; /* ボタンの背景色 */
}
.cp_box {
position: relative; /* ボタンの位置を内容にあわせる */
}
.cp_box input:checked + label {
background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box input {
display: none;
}
.cp_box .cp_container {
overflow: hidden; /* 閉じているときに下の部分を隠す */
height: 20em; /* 閉じているときの高さ */
}
.cp_box input:checked ~ .cp_container {
height: auto; /* 開いたり閉じたりするときに高さが変更されるようにする */
padding-bottom: 2.5em; /* 閉じるボタンを下へ調整 */
}
Web デザインと開発を学ぶすべての人向けに設計されています。
ベスト プラクティス設計を計画する方法と、Web 標準を使用してコーディングする方法を示します。
基本的な概念を説明する迅速かつシンプルな記事もあれば、より複雑なトピックを探求する詳細なアプローチを採用している記事もあります。
これらはすべて、初心者および中級の Web デザイナーや開発者に適しています。
デビッド・ワトソンによる開発者向けの説明 ～より良い Web の構築を支援する～
とても分かりやすいと感じました
カミュプリィのホームページの上部にある『カミュプリィ』は左寄せ、『個人情報保護方針』は右寄せになっています。
<div class="top">
<div class="commuply"><a href="./index.html">カミュプリィ</a></div>
<div class="privacypolicy"><a href="./aboutus/privacypolicy.html">個人情報保護方針</a></div>
</div>.top {
display: flex;
justify-content: space-between;
}
.top div {
margin: 0 1rem; /* 外側の余白: 上下左右*/
list-style: none;
height: 2rem;
line-height: 2rem;
text-align: center; /* 文字の位置: 中央寄せ */
}
.top .commuply {
text-align: left;
}
.top .privacypolicy {
text-align: right;
}
カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の４つのタブを等間隔で並べています。
<div class="menu">
<div class="current"><a href="./index.html">ホーム</a></div>
<div><a href="./site-create/index.html">ウェブ</a></div>
<div><a href="./system-keep/index.html">維持</a></div>
<div><a href="./aboutus/index.html">ついて</a></div>
</div>.menu {
display: flex;
justify-content: space-between;
}
.menu div {
list-style: none;
width: 25%;
height: 2rem;
line-height: 2rem;
text-align: center; /* 文字の位置: 中央寄せ */
border: 1px solid white; /* 枠線 */
background-color: #f7b977cc; /* 背景色 */
}
.menu div:hover {
background-color: #f7b97777; /* 背景色 */
}
.menu a {
display: block;
color: black; /* 文字色 */
text-decoration: none;
}
.current a {
border: 2px solid; /* 枠線 */
border-color: black white white black;
background-color: #f7b977ff; /* 背景色 */
} タグのなかにstyle=”設定”と書く方法、<html>の<head>内に<style>～</style>と書く方法、別のファイルに書いて<html>の<head>内に<link rel=”stylesheet” href=”ファイル名.css”>と書く方法の３種類があります。
いずれにしても、①どこへ適用するのか、②どの設定か、③どんな値かということを書いていきます。改行をいれて見やすくすることができますが必須ではありません。
①適用範囲 { ②設定: ③値; } タグ名はそのまま入力します。クラス名は先頭に『.（ピリオド）』を付けます。アイディ名は先頭に『#（シャープ）』を付けます。全要素にするときは『*（アスタリスク）』です。
複数の名前を空白で区切ると[または（OR）]という意味になり、適用範囲を広げられます。
複数の名前を『,（カンマ）』で区切ると[かつ（AND）]という意味になり、適用範囲を小さくします。
区切記号は他にも『>（不等号記号）』『+（プラス）』『~（チルダ）』があります。
そして『[]（角括弧）』や『:（コロン）』でさらに条件を付けることができます。
設定できる項目は決まっています。
CSSで色を指定できるところは、文字色（color:）、背景色（background-color:）、枠の色（border-color:）があります。
カミュプリィのホームページではみかん色（#F08300）やあんず色（#F7B977）を多く使用しています。CSSでの指定は『color: #f08300』のようになります。
色の番号は色見本のサイトで調べることができます。
同じ色の濃淡が必要なときは『color: #f08300cc』『color: #f0830077』のように濃さ（透過）の設定を加えます。透過を指定しない『color: #f08300』は『color: #f08300FF』と同じです。
色の設定とは別に、濃さ（透過）のみ（opacity:）を設定することができます。画像の透過に役立てそうです。値は0から1までの数値か、0%から100%までの割合で設定できます。1または100%が透過しないという意味になります。
つぎのようにすると文字を太字にすることができます。本当は細かく太さを設定できるのですが、実際には普通と太字しか表示できないようです。
font-weight: bold; /* 太字 */
font-weight: normal; /* 標準 */CSSを使用してHTMLの一部分をかくすことができます。
display: none;状況にあわせて内容を表示するのに使えるかもしれませんね。
次のようにクラス名に空白が含まれるものがあります。
これはクラス名 abc と def の２つを持つという意味になります。
class="abc def"
このクラスにスタイルを設定するときは次のように．（ピリオド）に続けたクラス名を２つ空白を入れずに併記します。
クラス名 abc と def の両方を持つばあいの設定を指定しますという意味です。
.abc.def {
設定: 値;
}
ちなみに２つのクラス名の間に空白を挟むと、左側のクラス名のなかにある右側のクラス名の部分という意味になります。