ゆたりんブログ

 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 Javascriptで特定の要素の表示、非表示を切り替える処理  HTMLのコードに、以下のようなHTML要素(div)をあるときは表示、またあるときは非表示にすることを考える。 <div id="test01"> <h2>タイトル1 </h2> 本文1 </div>  また、ここで表示切り替えに以下のチェックボックスを用意する。 <input type="checkbox" onclick="func_show01()" checked>テスト<br> チェックボックスが押されたときに"func_show01()"関数が実行される。今回考える処理ではチェックボックスがONかOFFかは考慮せず、関数が実行されたときに表示、非表示が切り替わるようにする。 (今回はそうするというだけで、ON、OFF状態を取得して切り替えても良い)  そして、Javascript側の関数での処理は以下のようになる。  function func_show01() {   var s = document.getElementById("test01");   if (s.style.display === "none") {     s.style.display = "block";   } else {     s.style.display = "none";   } } 処理の流れとしては チェックボックスのON、OFFで関数"func_show01()"が実行 ↓ 関数内でまず要素divのidが"test01"のElementオブジェクトを変数sに取得 ↓ style.displayメソッドで変数sの表示、非表示状態を判定 ↓ ifにより表示の場合は非表示に、非表示の...

 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 段落や行中の文を指定する要素  HTMLである段落(任意の領域の文章)や行の中の文を要素として扱いたいとき、 div (段落) span (行中) を用いる。CSSで要素の装飾などしたいとき、これにidなど付けておけば特定の場所の文章を指定しやすくなる。

ちょっとテストでカードアイテムの作成をやってみました。flexboxとやらが便利そうだったので使いました。ブラウザはとりあえずfirefoxでしか確認してません。 今回はお試しで作っただけですが、今後何かのまとめで使っていくかも知れないです。 flexboxについての参考サイト Flexbox - Learn web development | MDN CSS3 Flexible Box CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門 - ICS MEDIA カードアイテムの作成についてはこちらのページを参考にしました。 How To Create a Card with CSS たんぽぽ 太陽と綿毛 何かの花 きれい しいたけ しいたけしいたけ 何かの花その２ たくさんのきれい つくし つくしんぼ 何かの草 おもしろいカタチ