Zenn
🖼️

プログラミング学習中のメモ用

2022/05/07に公開
CSS
HTML
#
メモ
tech

今回は、学びのあったことをメモ用で残そうと思う。

ダミーテキストを挿入

HTMLでコードを書いている時、ダミーテキストを記入する機会あると思います。
簡単にダミーテキストを記入できる方法を紹介します。

1 ダミーテキストを記入したい場所に以下の文字を入力

lorem

2 「tab」 or 「return」　キーを押す。すると、以下のダミーテキストが表示される。

 Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dolores at reiciendis ratione neque porro quia illo earum velit pariatur libero tempore rem et, aut suscipit dolore, delectus provident qui!

timeタグ

timeタグは、「日にち・時間」を表す際に使用されるHTMLタグ。
使い方は簡単。表示したい日時を<time></time>タグで挟むだけ。

<time>2022-5-6</time>

timeタグを使用するメリットは、検索エンジンに日時を把握してもらう事ができる。
つまり、検索順位UPに繋がる。

CSS設計のコツ 【BEM】

最小モジュール（ボタン・見出しなど）を作成する際、
mixで作成した要素にスタイリングを行うと、コーディングの手間が楽になる。
なぜなら、使い回す際にスタイリングを打ち消す手間がなくなるから。
前提として、最小モジュールはサイト全体で使い回す要素。
例えば、ボタンの場合

<a href="#" class="btn">
  ボタン
</a>

.btn{
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 10px 0;
  color: #000;
  text-align: center;
  margin-right: 30px;   //スタイリング要素
  margin-bottom: 10px;　　　　//スタイリング要素
}

btnクラスに、marginが付与されている。
もし他の場所でbtnクラスを使う際、
marginが邪魔で打ち消すCSSを書く必要があるかもしれない。

解決策 【例：背景が青いボタンを作成したいとき】

<a href="#" class="btn　btn__blue"> 　　　　　　　<!-- .btn__blueを追加 -->
  ボタン
</a>

.btn{
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 10px 0;
  color: #000;
  text-align: center;
}
.btn__blue{
  margin-right: 30px;          //スタイリング要素
  margin-bottom: 10px;　　　　       //スタイリング要素
  background-color: #0000ff;　　  //背景を青
}

コードの解説

  1. .btnをmixさせて、.btn__blueを作成。
  2. .btn__blueにmargin-right・margin-bottomなどのスタイリング。

まとめると、
・ボタン要素を形成する.btnベースを作成。
・スタイリングや背景・文字色を変更したボタン要素を作成したい場合は、mixさせる。
・wixした要素にスタイリングを行う
こうすることで、．btnを他の場所で簡単に使い回す事が可能になる。

Discussion