投稿

ラベル（Web）が付いた投稿を表示しています

Javascriptの勉強 1 : 要素の表示、非表示を切り替える処理

-
 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 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の勉強 1 : 段落や行中の文を指定する要素について(div, span)

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

CSSの勉強 7 : Textarea要素の指定

-
 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 Textarea要素とは  Textarea要素とは以下のようなテキストインプットフォームのこと。 これがTextarea要素  このTextareaは掲示板サイトやアンケート、各種項目入力のコメント入力に用いられている。通常は送信ボタンが付いていて、それを押すことでサイト側に入力したテキストが渡される。 CSSでTextarea要素を設定するには  簡単には以下のように指定する。 textarea {    font-size: 20px; }
コメントを投稿
続きを読む

CSSの勉強 6 : 子孫結合子(Descendant combinator)について(グループ化とは異なる)

-
 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 セレクタをグループ化で作るとき .aaa, .bbb {   font-size: 20px;   color: green; } のようにセレクタはカンマ(,)で区切って作る。この場合、セレクタを使うときclass="aaa"とclass="bbb"は同じ設定となる。 それと似た以下のような書き方がある。 .aaa .bbb {   font-size: 20px;   color: green; } こちらはカンマ区切りではなく、半角スペースで区切られている。これはカンマを書き忘れたのではなく、 子孫結合子(Descendant combinator) を用いるときの書き方となる。 子孫結合子(Descendant combinator)とは 子孫結合子とは、セレクタを作るときにいくつかある結合子の中の一つ。子孫結合子によってセレクタを作ると、そのセレクタの有効となる条件も合わせて決まる。条件とは、始めのセレクタが適用されている要素内でその次のセレクタを適用した要素を作ることで有効となる。  上の例で作ったセレクタだとHTMLに <要素1 class="aaa">   <要素2 class="bbb">    子孫結合子のテスト   </要素2> </要素1> と書いた場合に要素2の中で .aaa .bbb のセレクタが有効となる。 どちらか一方だけでは有効とはならない。また順序が逆の場合も有効とはならない。 グループ化の書き方と似ているが、働きは異なるので注意。
コメントを投稿
続きを読む

CSSの勉強 5 : 各種セレクタについて

-
 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 CSSの各種セレクタについて 要素セレクタ <p>や<h1>などHTMLの要素に対して適用するもの。 要素セレクタは要素名としてCSSに記述する。 HTMLファイルの要素に対してそれが適用される。 IDセレクタ ある限定した要素に対してスタイルを適用したい場合に用いる。 使用条件として、一つのページで重複してIDセレクタを用いることは出来ないらしい。 実際、重複して使った場合にどうなるかは分からない。ブラウザ側での解釈次第？ よく分からない場合は後述するクラスセレクタを用いるのが無難の模様。 IDセレクタは以下のように名前の頭にハッシュ(#)記号が付く。 #tetete 使うときは <p id="tetete"> idセレクタのテスト </p> のように用いる。 クラスセレクタ ある限定した要素に対してスタイルを適用したい場合に用いる。IDセレクタとは異なり、一つのページで重複しても用いることが出来る。 クラスセレクタは以下のように名前の頭にドット(.)記号が付く。 .momo 使うときは <p class="tetete"> 暮らすセレクタのテスト </p> のように用いる。 また複数のクラスセレクタを要素に適用することも可能。".momo"と".mumu"の二つのクラスセレクタを適用するには <p id="momo mumu"> クラスセレクタ複数使用のテスト </p> とする。
コメントを投稿
続きを読む

CSSの勉強 4 : コメントの書き方

-
 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 CSSでのコメントの書き方 コメントにしたい箇所を /* と */ で囲む。 例えば これはこめんとです をコメントにすると /* これはこめんとです */ となる。 複数行のコメント なおコメントは複数行に対しても有効で /* comment1 comment2 comment3 */ のように3行をまとめてコメントにすることも出来る。 単にコメントを書くだけでなく、一時的に無効にしておきたいコードに対して用いることにも使える。
コメントを投稿
続きを読む

CSSの勉強 3 : どこにCSSを書いておくか

-
 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。 CSSをどこに記述しておけばよいか  CSSをただファイルに書いていっても、それだけではなにもならない。ブラウザの方にCSSを適用して表示させるには、HTMLファイルの方にCSS読み込みの設定を書いておく必要がある。 CSSを適用する3つの方法 CSSを読み込んで適用するのにはいくつか方法がある。以下、1つずつ取り上げていく。 CSSファイルに書いておく CSSを書いて次のファイルとして保存する。 style.css そして、それを適用するHTMLファイルの<head>タグ内に  <link href="style.css" rel="stylesheet" type="text/css"></link> という記述を書いておく。ここではHTMLファイルとCSSファイル(style.css)は同じディレクトリに置いておく(パスは要確認)。  HTMLファイルをブラウザで開けば、CSSに書いたスタイルが適用される(はず)。 HTMLファイル内に<style>タグで内部スタイルシートとして記述する  こちらの方法はHTMLファイル内にCSSに関する記述を書いておくというもの。ファイルが1つで済むので管理が楽ですね、というわけでもなく、複数のHTMLファイルに1つのCSSファイルを適用するという管理には向かないと思われる。始めは楽だけど、拡張していくと後々めんどうになりそう。  方法としてはHTMLファイルの<head>タグ内に<style>タグを作り、その中にCSSに関する記述をする。 HTMLの各要素にStyleとして個別に適用する この方法ではHTMLの各要素に対して以下のように個別にCSSを適用する。  <h1 style="color:blue;">タイトル</h1> 個々の要素に設定出来るためカスタマイズ性が高い。その反面、後から一括して設定を適用す...
コメントを投稿
続きを読む

スポンサーリンク