Sass_3-1-2 子孫セレクタ以外のセレクタを使うには
子孫セレクタ以外を使う場合の記述の方法をやった。
CSSとSassの比較。
#main section + section { margin-top: 50px; } #main section > h1 { font-size: 140%; }
CSSで書くとこうなるけれど、Sassの場合はこうなる。
#main { section + section { margin-top: 50px; } section > h1 { font-size: 140%; } }
隣接セレクタと子セレクタを使った。
CSSの場合は長くなってしまうけれど、今回もネストすることで短く記述できる。
参考
ルールのネスト（Nested Rules） | Web制作者のためのSassの教科書 - 公式サポートサイト
隣接セレクタ (E + F)｜セレクタ｜CSS HappyLife ZERO
子セレクタ (E > F)｜セレクタ｜CSS HappyLife ZERO
Sass_3-1-1 ネストのルール
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で書くとこんなに長ったらしくなるけれど、Sassで書くと下のようになる。
#main { section { margin-bottom: 50px; h1 { font-size: 140%; } p, ul { margin-bottom: 1.5em; } p.notes { color: red; } } }
こんなに短縮して書くことが出来る。
Sassはセレクタをネスト（入れ子）にして書くことができる。
ネストして記述することで、親子関係が分かりやすい。
参考
progate_php_24 サニタイジング
今日でこのprogateを使ったPHPの勉強も最後。
今日はサニタイジングという事をした。
<div class="main"> <div class="display-contact"> <div class="form-title">お問い合わせいただきありがとうございます。</div> <div class="form-title">入力内容</div> <div class="form-item">■ 名前</div> <?php echo htmlspecialchars( $_POST['name']); ?> <div class="form-item">■ 年齢</div> <?php echo htmlspecialchars( $_POST['age']); ?> <div class="form-item">■ お問い合わせの種類</div> <?php echo htmlspecialchars( $_POST['category']); ?> <div class="form-item">■ 内容</div> <?php echo htmlspecialchars( $_POST['body']); ?> </div> </div>
入力データをそのまま表示すると、悪意あるJavascriptが実行される恐れがあるらしい。
なので、特殊な記号を文字に変換する作業をサニタイズというらしい。
htmlspecialchars()を使って上のように囲んであげる。
参考
全部のレッスンを受け終わると、実際に作ったフォームからメッセージを送ることが出来た。
ちょっと感動した。
progate_php_23 $_POST
今日はフォームで送信した値を受け取るために$_POSTを使った。
<div class="main"> <div class="display-contact"> <div class="form-title">お問い合わせいただきありがとうございます。</div> <div class="form-title">入力内容</div> <div class="form-item">■ 名前</div> <!-- この下でnameを受け取りechoしましょう --> <?php echo $_POST['name'] ?> <div class="form-item">■ 年齢</div> <!-- この下でageを受け取りechoしましょう --> <?php echo $_POST['age'] ?> <div class="form-item">■ お問い合わせの種類</div> <!-- この下でcategoryを受け取りechoしましょう --> <?php echo $_POST['category'] ?> <div class="form-item">■ 内容</div> <!-- この下でbodyを受け取りechoしましょう --> <?php echo $_POST['body'] ?> </div>
$_POST[ ]は連想配列になっていて、[ ]の中にinput, textarea, selectで指定した名前をいれるとそれぞれの値を受け取れる。
参考
今まで参考で貼ってきたものは理解できないこともなかったけれど、PHPの公式の例が初めて分かりやすいと思った。
自動グローバル変数またはスーパーグローバルと呼ばれるものらしい。グローバルって事は全体で使えるってことかな？
参考
progate_php_22 送信ボタン
今日は送信ボタンを作った。
<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>
<?php
for ($i = 6; $i <= 100; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
<div class="form-item">お問い合わせの種類</div>
<?php
$types = array('Progateに関するお問い合わせ', 'Progateに対する意見', '採用に関するお問い合わせ', '取材・メディア関連のお問い合わせ', '料金に関するお問い合わせ', 'その他');
?>
<select name="category">
<option>選択してください</option>
<?php
foreach ($types as $type)
{
echo '<option value="'.$type.'">'.$type.'</option>';
}
?>
</select>
<div class="form-item">内容</div>
<textarea name="body" placeholder="内容を入力してください"></textarea>
<!-- この下にsubmitタグを書いていきましょう -->
<input type="submit" value="送信"＞
</form>
やったところが異常に短くてびっくりした。
けれども、徐々にフォームが出来てきていてちょっと嬉しい。
参考
progate_php_21 セレクトボックス
今日はフォームのセレクトボックスを作った。
使ったのはforとforeach。
<div class="form-item">年齢</div>
<!-- この下にselectタグを書いていきましょう -->
<select name="age">
<option>選択してください</option>
<?php
for($i=6;$i<=100;$i++){
echo '<option value="'.$i.'">'.$i.'</option>';
}?>
</select>
最初はfor。
6から100まで繰り返し表示するようになっている。
<?php $types = array('Progateに関するお問い合わせ', 'Progateに対する意見', '採用に関するお問い合わせ', '取材・メディア関連のお問い合わせ', '料金に関するお問い合わせ', 'その他'); ?> <!-- この下にselectタグを書いていきましょう --> <select name="category"> <option>選択してください</option> <?php foreach ($types as $type){ echo '<option value="'.$type.'">'.$type.'</option>'; } ?> </select>
最後にforeach。
$typesに入っている順に$typeへ値がはいる。
$typesの中身がなくなるまで繰り返される。
progate_php_20 テキストボックスをつくろう
今回もhtmlのimputとtextareaを使った。
<form method="post" action="sent.php">
<div class="form-item">名前</div>
<!-- この下にinputタグを書いていきましょう -->
<input type="text" name="name" placeholder="名前を入力してください">
<div class="form-item">内容</div>
<!-- この下にtextareaタグを書いていきましょう -->
<textarea name="body" placeholder="内容を入力してください"></textarea>
</form>
placeholderには未入力の場合に表示する文字を入れる。
参考
