どうも、橙葵です。CSSの勉強中です。
先日、HTMLの紹介記事を作ったんですが、あれを書いているときは、「はてなブログでCSSってどうやって使うの？」という状態でした。
一応、CSSがHTMLのレイアウトを決めるスタイルシートであること、CSSの記述方法は三種類あることを学んでいました。
CSSの記述方法三種類は、以下の通りです。
- style属性を使用して、要素に直接定義する：内部参照
- style属性を使用して、あらかじめheadで定義する：内部参照
- 外部ファイルに記述して、CSSを定義しているファイルをlink要素で読み込む：外部参照
内部参照でやるとうまく記述できないし、外部参照するにはCSSファイルをどこかに置かないとだけどそれもわからない……ということで、前回は断念しました。
いやしかし、できるんですね。これが。
こちらでご紹介されている通り、「デザインCSS」にCSSファイルとして保存していた中身を全部貼り付けたところ、以下が実現できました。
一つ目は、ボタンです。
デザインはこちらを参考にしています。
二つ目は、アコーディオン式のパネルです。
押すとちょっと伸びる。また押すと縮む。
内容が表示される
中身は段落扱い
たくさん書くこともできる
これだけ、と思うかもですが、やろうとしたときは大変だったんです。
今回はコピペでほぼ終了でしたけど。
参考はこちらです。
CSSの書き方がわかったので、がぜんやる気も出てきました。
また気が向いたときにでも、変なボタンとかぽちぽち置いてみようと思います。
やってみて成果が出るのっておもしろいですね。
