top > useful > base 

ページで見えてる方のタイトル

更新日:

Webサイト用のベース。

このページがそのまま下記のWebサイト用ベースで作ってある。

CSSも。


サーバーにシンプルなHTMLとCSSをUPして確認するためのもの。これを叩き台として手を加えて行くもよし。


本文の内容をここにつらつらと書いて下さい。


一行は<P></P>タグでくくること。


改行は<br>タグ


ザッと書きたいなら改行をすべて<br>だけで書くもよし。


もっと手を抜きたいなら全体を<pre><pre/>でくくってしまってもいい。


日本語を書きながらタグを英字で入れるのは面倒臭いので、日本語変換辞書に「ぶらんく」と「ぴー」でタグが変換で出てくるようにしているよ。そうしておくと簡単だからね。


「ぎゃくぴー」で「</p><p>」これが出るようにも登録してある。

「改行せずに書いてみたけど、読み直してみたら別の行に分けた方がよさそうだ」と思うこともあるので、そういう時に便利。



HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="author" content="このサイトの著作権者の名前">
  <meta name="description" content="検索結果一覧に表示されるこのサイトの説明をここに書く">
  <link rel="stylesheet" type="text/css" href="css/base.css">
  <link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico">
  <title>ブラウザのタブやお気に入りブックマークに表示される部分</title>
</head>

<body>
  <!-- サイト全体ここから container -->
  <div class="container">

    <!-- directory -->
    <div id="directory">
      <span><a href="/index.html">top</a></span>>
      <span><a href="/useful.html">useful</a></span>>
      <span><a href="/base/index.html"></a>base</span>
    </div>
    <!-- /directory -->

    <!-- content -->
    <div class="content">

      <!-- wroteday -->
      <!-- 作成日でも更新日でもかまわない。書いた日を記述しておくのは重要。 -->
      <h2>ページで見えてる方のタイトル</h2>
      <p class="migi wroteday">作成日:
        <time>2018-XX-XX</time>
      </p>
      <!-- /wroteday -->

      <!-- entrytext -->
      <div class="entrytext">
        <p>Webサイト用のベース。</p>
          <br>
          <p>サーバーにシンプルなHTMLとCSSをUPして確認するためのもの。これを叩き台として手を加えて行くもよし。</p>
          <br>
          <p>本文の内容をここにつらつらと書いて下さい。</p>
          <br>
          <p>一行は<P></P>タグでくくること。</p>
          <br>
          <p>改行は<br>タグ</p>
          <br>
          <p>ザッと書きたいなら改行をすべて<br>だけで書くもよし。</p>
          <br>
          <p>もっと手を抜きたいなら全体を<pre><pre/>でくくってしまってもいい。</p>
          <br>
          <p>日本語を書きながらタグを英字で入れるのは面倒臭いので、日本語変換辞書に「ぶらんく」と「ぴー」でタグが変換で出てくるようにしているよ。そうしておくと簡単だからね。</p>
          <br>
          <p>「ぎゃくぴー」で「</p><p>」これが出るようにも登録してある。</p>
          <p>「改行せずに書いてみたけど、読み直してみたら別の行に分けた方がよさそうだ」と思うこともあるので、そういう時に便利。</p>
          <br>

      </div>
      <!-- /entrytext -->

    </div>
    <!-- /content -->

    <!-- コピーライトここから -->
    <div class="footer copyright">Copyright (c) 2018 "<a href="https://twitter.com/denkikaiden" title="ツイッターページを開く" target="_blank">でんきかいでん</a>" All Rights Reserved.</div>
    <!-- コピーライトここまで -->

  </div>
  <!-- サイト全体ここまで /container -->

</body>

</html>

ピンク文字部分を書き換えて使う。

HTMLはコピーして、メモ帳などに貼り付けて(最新のメモ帳はUTF-8などの文字コードにも対応していて優秀)拡張子を「.html」にすればいい。

CSSも同じようにコピーしてメモ帳などのテキストエディタに貼り付けて、「.css」という拡張子で保存する。


「&lt;」これは「<」これの特殊文字。

「&gt;」これは「>」これの特殊文字。

私の場合はこれを「かっこひだり」と「かっこみぎ」でIMEに辞書登録してある。

この特殊文字を使って書かれたWebページ上のコードは、コピペしてそのまま.htmlのファイル形式にすれば使える。

たまに大文字で書く人も居るが、あれだとコピペしたそのままでは使えない。


で、更に


Webページ上で上記2つの特殊文字を見られるようにするためには、特殊文字中の1字「&」を更に特殊文字で書くことによって見えるようにしている。

「&」の特殊文字は「&amp;」これ。


で、更に


この「&」(アンパサンドと読む)の特殊文字をWebサイト上に見えるようにするためには、上記と同じようにアンパサンドの特殊文字「&amp;」の一部のアンパサンドを特殊文字に置き換えて書くことで、Webサイト上でも見られるようにしている。



CSS

@charset "utf-8";

/* reset */

body,
h2,
p,
img,
time {
  padding: 0;
  margin: 0;
  border: none;
}

/* main */

body {
  max-width: 720px;
  margin: 0 auto;
  background: #f2f2f2;
  word-break: break-all;
  color: #333;
  font-family: meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
}
h2 {
  padding: 10px 15px 6px;
  border-top: 1px solid #09f;
  border-right: 1px solid #09f;
  border-bottom: 1px solid #09f;
  border-left: 15px solid #09f;
  background: #fcfcfc;
  color: #777;
  font-weight: bolder;
  font-size: 110%;
}
h3 {
  margin: 1rem 0;
  padding: 10px 15px 6px;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-left: 15px solid #aaa;
  background: #fcfcfc;
  color: #999;
  font-size: 100%;
  vertical-align: bottom;
}
h4 {
  margin: 5px 0 1em;
  padding: 5px 15px;
  border-bottom: 1px solid #ccc;
  border-left: 15px solid #ccc;
  color: #aaa;
  font-size: 100%;
}
.wroteday {
  padding: 5px;
  color: #666;
  font-size: 0.8rem;
}
#directory {
  padding: 3px;
  font-size: 0.9rem;
  color: #aaa;
}
#directory a {
  text-decoration: none;
}

/* frame */

.container {
  margin: 10px;
  padding: 0 1rem 1.5rem;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
}
.content {
  margin: 0;
  padding: 1rem 1.4rem;
  background-color: #eee;
  border: 1px solid #ddd;
}
.entrytext {
  margin: 0;
  padding: 1rem;
}

/* aside */

.nakayose {
  margin: 0 auto;
}
.mannaka {
  margin: 0 auto;
  text-align: center;
}
.migi {
  text-align: right;
}

/* box */

.box250px {
  width: 250px;
}
.box270px {
  width: 270px;
}
.dddbox {
  background: #ddd;
  padding: 18px;
  width: 270px;
  border: 1px solid #aaa;
  border-radius: 10px/10px;
}

/* code */

pre {
  margin: 0;
  padding: : 0;
  white-space: pre-wrap;
  font-family: inherit;
}
code {
  word-break: break-all;
  word-wrap: break-word;
  font-family: 'consolas', 'courier new', 'courier', 'monaco', monospace;
}
.codebox {
  margin: 5px 0;
  padding: 1em;
  border: 6px solid #666;
  border-radius: 10px/10px;
  color: #ddd;
  font-size: 80%;
  line-height: 1.2em;
  background: #333;
}

/* font */

.pink {
  color: #f6c;
}
.deeppink {
  color: deeppink;
}
.usuji {
  color: #666;
}
.futoji {
  font-weight: bold;
}

/* copyright */

.footer {
  padding-top: 18px;
  text-align: center;
}
.copyright {
  font-size: small;
}
.copyright a {
  text-decoration: none;
}


文字サイズ指定(の単位)には「px」「ex」「em」「%」「small,middle,large」「rem」などがあるが、各親要素から影響を受け続ける相対的な単位よりも、常に最上位要素からの相対サイズである「rem」を使う方がどういうサイズになるかわかりやすいのでオススメ。


bodyで62.5%を設定しておくことでわかりやすい10pxに固定し、そこから1.6rem(16px)などという風に使うのが流行ってるらしい。