レスポンシブWebデザイン
ブラウザがPCかスマートフォンかでレイアウトを変えることができます。
以下は実用的な意味はほとんどありませんが、 ブラウザの横幅が600px以上、400-600px、400px未満によって設定を変えているサンプルです。 

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (min-width:0px){
  div.desc {
    width: 100%;
  }
}
@media screen and (min-width:400px){
  div.desc {
    width: 95%;
  }
}
@media screen and (min-width:600px){
  div.desc {
    width: 400px;
  }
}
</style>


CSS div定義のテンプレート

<style type="text/css">
<!--
div#sample1 {
  /* 色の指定 */
  color: #700040;
  background-color: #dddddd;

  /* top,leftなどの指定をするときにはposition:を
   * absoluteかrelativeにします。(デフォルトはstatic)
   */
  position: absolute;
  top: 100px;
  left: 50px;
  margin-top: 1em;
  margin-left: 1em;

  /* ボックスの大きさ指定 */
  max-width: 200px;
  max-height: 200px;

  /* 境界線の指定 */
  border-color: #c00040;
  border-style: groove;
    /* solid groove ridge inset outset dashed dotted */
  border-width: 4px;
    /* 2px */
  padding: 0.3em;

  /* その他 */
  text-indent: 0.5em;
}
-->
</style>


CSS fieldset定義のテンプレート

fieldset.searchForm {
  /* 境界線の指定 */
  border-color: #000060;
  border-style: groove;
  border-width: 3px;
  padding: 0.5em;
  width: 75%;
}

fieldset.searchForm legend {
  background-color: #ccccff;
  border: 1px solid #000060;
  padding: 0.2em;
}


CSS table定義のテンプレート

table.default {
  border-collapse: collapse;
  empty-cells: show;
  border: 3px ridge #808080;
}

table.default tr th {
  padding: 2px;
  border: 1px solid #000000;
  background-color: #cccccc;
}

table.default tr td {
  padding: 2px;
  border: 1px solid #000000;
  background-color: #ffffee;
}

td.head1 { background-color: #a0a0cc; }
td.main1 { background-color: #ddddff; }
td.head2 { background-color: #cca0a0; }
td.main2 { background-color: #ffdddd; }

Misc. Topics Top

(first uploaded 2003/06/08 last updated 2020/04/26, URANO398)