CSSの初歩

[プログラミングスクールの復習](https://qiita.com/typ2/items/e505f212295cdf34a5e0)　のPart6

HTMLの書き方をざっくり学んだら文字に装飾をつけていく。
いい感じに見たことあるページっぽい感じにできるといいな

# CSSとは
Cascading Style Sheetsの略。
Cascadeは「滝状の流れ」の意味で、上から下へスタイルを引き継いでいくイメージ

例えば

“`html:html

[HTMLその3] HTMLだけのページを作ってみる

[プログラミングスクールの復習](https://qiita.com/typ2/items/e505f212295cdf34a5e0)　のPart5

あんまり難しいことはないのでコピペして実際の表示確認していく感じで

クリックでサンプルコードの展開

“`html:index.html

今日の日記

朝

「阿部寛のホームページ」はHTML界のシーラカンスである

(2022/4/12) 英語版を書きました。よろしければ拡散お願いいたします。

https://medium.com/@toshiakinagayama1990/this-page-might-be-the-sword-of-damocles-for-the-web-ecd4f1e600a5

説明する必要も無いと思うが、阿部寛さんと言えば日本を代表する名優の一人であり、数々の作品でその巨躯以上の存在感を見せつける、映像業界にはなくてはならない存在だ。**実写に疎い**私ですら、「TRICK」のポンコツだがプライドは一人前な上田教授、「テルマエ・ロマエ」の『未来』の日本に驚嘆し、その工夫を当時の技術で貪欲に取り込むローマ人温泉技師ルシウス、「下町ロケット」の熱血でより良い製品の開発に力を注ぎ、町工場の高みを目指す佃社長と、その名演はふと思い出せるくらい、**語らずにはいられないくらい**記憶に刻まれている。

その[阿部さんのホームページ](http://abehiroshi.la.coocan.jp/)は、その**懐かしいデザイン**と、**軽量高速なこと**であまりにも知られてい

【６日目】メモ帳アプリの作成 [３]

# １．本日の課題
本日も前回から作成しているメモアプリに機能を付け加える。前回では、localStrageの中に複数のメモ内容を保存できるようにした。
次は保存した日付と削除ボタンを付け加える。
まずは連想配列を使ってメモ内容と日付を結びつける。

See the Pen
Memo2 by mizmizsan2 (

[HTMLその2] タグのチートシート

[プログラミングスクールの復習](https://qiita.com/typ2/items/e505f212295cdf34a5e0)　のPart4

前回はブラウザで”aaa”とだけ表示する1行だけのコードを書いた。
今回は“`“`内で使用する種々のタグと使い方を整理していく。

スクールで学ぶ上では使っていなかったタグについて知ることも兼ねているので、
説明不足、理解があいまいなものも多い。

完全にマスターする必要はない。
HTMLでwebページを作成する、というだけなら極論ほとんどを“`

“`タグで作ることができる。
しかし、googleなどの検索で適切に見つけてもらうためであったり、個人開発でもソースコードの可読性を高めるために、ある程度使い分けのルールを自分で持てるようにしておきたい。

タグの順番は[公式ドキュメント](https://html.spec.whatwg.org/multipage/)に準拠
特に記載ない場合、基本的には“`“`のように対応する閉じタグが必要。

# セクションに使うタグ
ページの中でも大きめのく

jqueryでタグの絞り込みを実装する

# 実装したもの

See the Pen
siborikomi by yoshida (@yoshi090)
on CodePen.

【コンポーネント】コンテンツを開閉させるもっと見るボタン

長いコンテンツを省略して表示し、ボタンを押すとすべて表示させるアノUI。

スマホでは省略表示、それ以外は全表示という実装が多いのですが、これが毎回地味に大変…:sweat:

というわけで、汎用的に利用できるコンポーネントを作成しました。

## 仕様

* 表示・非表示 * `` のチェックの有無で管理 * 省略時のコンテンツの高さ * CSS変数（Custom Properties）で管理 * スライドアニメーション * CSS の `transition` で `max-height` をアニメーション * `max-height` の値は JavaScript で高さを取得、CSS変数に設定

## HTML

:::note info 親要素の `div` に設定している `class=”js-showMore”` は JavaScript のトリガーです。 アニメーションさせない場合は不要です。 :::

“`html:html

jqueryを使用したシンプルな「もっと見る」ボタンの実装

# 実装したもの

See the Pen Untitled by yoshida (@yoshi090) on CodePen.

```
手順

１、window.innerHeightで画面全体の高さを取得
２、＄fto.ffset().topでfooterまでの高さを取得
３、＄ftr.outerHeight()でfooter自身の高さを取得
４、＄ftr.offset().topと＄ftr.outerHeight()を合計する
５、4の合計よりwindow.innerHei

マークアップ言語

###### マークアップ言語
* テキストの中にマーク(タグ)を埋め込み、文書の構造などを示す言語
* 専用のエディタがなくても編集可能

###### SGML(Standard Generalized Markup Language)
* 電子商取引で利用するためにISOが標準化
* 独自タグを定義でき、文書構造などを示す

###### HTML
* SGMLをベースにしたWebページ用の言語

###### XML(Extensible Markup Language)
* SGMLをベースに簡略化して、Webで利用するために作られた言語

* 利用者が**独自タグ**を定義して、文書の**論理構造**を示すことができる

【５日目】メモ帳アプリの作成 [２]

# １．本日の課題
本日は前回作ったメモアプリを、一つだけ保存できるものから複数を保存できるものに改良する。
まずは前回作ったプログラムのおさらい。

See the Pen
Untitled by mizmizsan2 (@mizmizs

DOM、Node、Elementを理解する

# 概要
JavaScriptで動的にHTMLを操作することが増え、より深く仕組みを知ってみたいと思い、理解した内容を記載する。
※結論、タイトルとは逆の順で理解した方がわかりやすかったので、その流れで記載する。

# Element(要素)
* Element(要素)とは、`

要素の内容

`のように`「タグ」+「内容」`の組み合わせのこと。
* 各要素は、共通したインターフェースを継承し、さらに細分化したインターフェースを実装している。
* また、これらは`文書を構成する要素(Object)`と考えることもできる。

> ここでいう**インターフェース**とは
> プロパティ(情報)、メソッド(処理のまとまり)などを定義しているもの。
> 継承すると継承元で定義されているプロパティや、メソッドなどを参照・実行できる。
> また、これらは`DOMインターフェース`と呼ばれる。

## 例：pタグ、imgタグが継承しているインターフェース
「pタグにはsrc属性が指定できないが、imgタグではsrc属性が指定できる」という事象をもとに考えてみる。

* pタグは「

HTMLの基本を解説２

今回は実際にブラウザーに表示される＜ｂｏｄｙ＞内に記述するタグを解説していきます。
タグの種類が多いので、よく使うタグのみ解説します。解説するタグだけでも簡単なWebサイトを作成できますので、頑張って覚えましょう。

## 基本文法とタグ
＜＞や＜/＞はタグと呼ばれるもので、HTMLでは基本的に文字列をこのタグで挟んで記述します。タグには様々な種類があり「どのタグで挟むか」によってその部分の役割が変わってきます。
　また、＜＞は最初に書かれる方を「開始タグ」、＜/＞は後から書かれる方を「終了タグ」と言います。基本的に二つセットで使われますが、場合によっては終了タグのないものもあります。開始タグから終了タグまでの一つのかたまりを要素と言います。

## タグの解説
* 見出し＜１ｈ＞～＜ｈ６＞タグ
* 段落を表示する＜ｐ＞タグ
* 画像を表示する＜ｉｍｇ＞タグ
* リンクを貼る＜ａ＞タグ
* 箇条書きリストを作る＜ｕｌ＞タグ＋＜ｌｉ＞タグ

### 見出し＜ｈ１＞～＜ｈ６＞タグ
見出しには＜ｈ１＞～＜ｈ６＞タグを使います。＜ｈ１＞、＜ｈ２＞、＜ｈ３＞、＜ｈ４＞、＜ｈ５＞、＜ｈ６＞と６種類