スタイルシートとは？

ページの構成や定義を調べるには

• Firefox では Firebug アドオンをインストールします。F12 キーを押すと、Firebug の画面が表示されます。
• Google Chrome では、Ctrl + I キーを押すとデベロッパーツールが表示されます。
• Internet Explorer では、F12 キーを押すとデベロッパーツールが表示されます。

既存のデザインを変更するには

ページデザインの変更例

• 文字を丸ゴシックで表示（フォントの変更）
• アバター（プロフィール画像）を丸く表示
• 文字を通常の125%で表示（文字を大きく表示）
• 通知の未読数バッジを赤く表示
• 選択中の Proteus タブを四角く表示（左上と右上の丸みを無効化）
• テーブルを横いっぱいに伸ばす（幅100%で表示）
• テーブルの見出し行の背景色を灰色し、上下に境界線を入れ、太字で表示
• テーブルの偶数行（2行目と4行目）の背景色を薄い灰色に変更
• コメント欄上部のマージンを無効化
• その他

body {
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
#main {
  font-size: 125%;
}
#main{
box-shadow: none;
}
ul#primary-tabs li.current a{
margin-top: 0;
border-radius: 0;
}
.avatar * img, .avatar img {
border-radius: 50%;
}
#comments {
  margin-top: 0;
}
.ii table {
  width: 100%;
  border-collapse: collapse;
}
.ii table tr th {
  font-weight: bold;
  padding: 4px;
  background-color: #f0f0f0;
  border-top: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}
.ii table tr td {
  padding: 4px;
}
.ii table tr:nth-child(2n-1) td {
  background-color: #f8f8f8;
}
.notifications-count {
  background-color: crimson;
}