sassは分割したscssを一つのcssファイルとして書き出す事が出来る。 ファイルを分割するには「_」から始まる名前にする必要がある。 また、そういった部分的なファイルをpartial と呼ぶらしい。 // _ を省略してインポート @import "module.scss"; // _ と …

sassの演算について勉強した。こんな風に書くことが出来る。 article { width: 560px - 14px; padding: 7px; } 実際に書きだすとこうなる。 article { width: 546px; padding: 7px; } マイナスした分の値が引かれているのが分かる。 下のように色々と足した…

sassは変数を作ることができる。変数を宣言したsass // 赤色の変数を宣言 $red: #cf2d3a; .notes { color: $red; } .notesBox { border: 3px double $red; } 書きだしたCSS .notes { color: #cf2d3a; } .notesBox { padding: 20px; border: 3px double #cf2d…

sassには二通りのコメントの書き方がある。cssにコメントが残らない書き方。 .box { //width: 350px; min-height: 300px; _height: 300px; // IE6対策 } cssにコメントが残る書き方。 .box { /* width: 350px; */ min-height: 300px; _height: 300px; /* IE6…

プロパティをネストした。CSSとsassの比較 .sample { border-top: 5px solid #ccc; border-bottom-width: 3px; border-bottom-style: dotted; border-bottom-color: black; } .sample_other { text-shadow: 1px 1px 0 #fff; text-align: right; z-index: 5; …

親セレクタを参照する場合の記述をやった。CSSとsassとの比較 #side { width: 240px; } body.top #side { width: 300px; } #side ul.bnr { margin-bottom: 10px; } a { text-decoration: none; } a:hover { text-decoration: underline; } ul.pageNav li { m…

@mediaを使う場合の記述を学んだ。CSSとsassの比較。 #main { float: left; width: 640px; } @media screen and (max-width: 640px) { #main { float: none; width: auto; } } CSSで書くとこうなるけれど、sassで書くとこうなる。 #main { float: left; widt…

子孫セレクタ以外を使う場合の記述の方法をやった。CSSとSassの比較。 #main section + section { margin-top: 50px; } #main section > h1 { font-size: 140%; } CSSで書くとこうなるけれど、Sassの場合はこうなる。 #main { section + section { margin-to…

Sassの勉強を始めた。 今回はネストのルール。CSSとSassの比較。 #main section { margin-bottom: 50px; } #main section h1 { font-size: 140%; } #main section ul, #main section p { margin-bottom: 1.5em; } #main section p.notes { color: red; } CSS…

今日でこのprogateを使ったPHPの勉強も最後。 今日はサニタイジングという事をした。 <div class="main"> <div class="display-contact"> <div class="form-title">お問い合わせいただきありがとうございます。</div> <div class="form-title">入力内容</div> <div class="form-item">■ 名前</div> <div class="form-item">■ 年齢</div> <…</div></div>

今日はフォームで送信した値を受け取るために$_POSTを使った。 <div class="main"> <div class="display-contact"> <div class="form-title">お問い合わせいただきありがとうございます。</div> <div class="form-title">入力内容</div> <div class="form-item">■ 名前</div> <div class="form-item">■ 年齢</div> </div></div>

今日は送信ボタンを作った。 <form method="post" action="sent.php"> <div class="form-item">名前</div> <input type="text" name="name" placeholder="名前を入力してください"> <div class="form-item">年齢</div> <select name="age"> <option>選択してください</option> '.$i.'</select></form>

今日はフォームのセレクトボックスを作った。 使ったのはforとforeach。 <div class="form-item">年齢</div> <select name="age"> <option>選択してください</option> '.$i.'</option>'; }?> </select> 最初はfor。 6から100まで繰り返し表示するようになっている。