☆☆ 新着記事 ☆☆

2018年6月29日金曜日

PHP 基礎




// ・・・これを書いた行の行末までがコメント扱いとなります。

例1. $abc = 'あいうえお';//コメントです。
例2.//コメントです。
この場合、「コメントです。」部分がコメント化(無効化)されます。

# ・・・これを書いた行の行末までがコメント扱いとなります。

上記の「//」と同じです。

/*~*/ ・・・複数行にわたってコメント化できます。

CSSのコメント方法と同じです。
例1.
/*
コメントです。
コメントです。
*/
複数行に渡る場合に主に使います。

条件分岐について

具体的には、以下のような書式で条件分岐を行います。
  
if (条件1) {
  条件1に一致した場合に実行する(TRUEの場合の処理) 
} elseif (条件2) {
  条件1に一致せず、条件2に一致した場合に実行する
} else {
  条件1と条件2の両方に一致しなかった場合に実行する(FALSEの場合の処理)
}
 

PHPは終了タグ?>を見つけると、それ以降に新たに開始タグ<?を見つけるまでの内容を出力するため、以下の例のように記述する事も可能です。
<? if($f=="morning"){ ?>
おはようございます
<? }elseif ($f=="noon"){ ?>
こんにちは
<? }else{ ?>
こんばんは
<? ?>





その他swich分などもありますが、やりたいこと、やることは同じです。
まずは特に覚える必要は無いでしょう。自分もほぼ使ってません。
逆に条件分岐はこのif分だけですべて片付きます。必要に応じてswichなども検討すればOKです。

変数

どのプログラミング言語でもこの「変数」は存在しますので、名前ぐらいは聞いたことがあるかもしれません。
よく物を入れる箱のようなものと言われますが、まさにそんな感じです。ここの「物」は実際には文字列や数値などです。
変数は必ず$マークから始まります。
例 $hensuu
変数名に日本語は使えません。半角英数字、アンダーバー「_」が使えます。
<?php
$hensuu = '変数です';
?>

「=」は代入を表します。この場合、変数$hensuuに文字列「変数です」を代入させています。
文字列(全角文字)は必ずシングルクォーテーション、またはダブルクオーテーションで囲む必要があります。
また、処理の最後尾には必ずセミコロン「;」が必要です。
これだけではなにも起こりません。変数に代入しただけだからです。

ブラウザに出力(表示)する

これを出力させるには
echo、またはprintを使います。
例 
<?php
echo $hensuu;
?>

でブラウザには「変数です」と表示されます。
echo、printはどちらでも構いませんが、PHPではechoが多数派と言われます。
厳密には若干違いもありますが、意識することはないでしょう。
またショートコードでechoを省略した
<?= $hensuu;?>
と書くこともできますが、前述のとおり使うべきではありません。たまに使う人がいるので知ってはおきましょう。
そういう方には「かっこいいすね!」と言ってあげましょう。
日本語などの文字列を出力する場合は、シングルクォーテーション「'」、またはダブルクオーテーション「"」で囲む必要があります。
echo ’変数です’;
また、HTMLタグを出力する際にも同じくシングルクォーテーション、またはダブルクオーテーションで囲む必要があります。
シングルクォーテーション、ダブルクオーテーションにはそれぞれ違いありますので、注意が必要です。し、とても大事なことなので、覚えておきましょう。
シングルクォーテーション = 変数は展開(変数に代入されたものが表示)されない
ダブルクオーテーション = 変数は展開(変数に代入されたものが表示)される
echo $hensuu;

echo "$hensuu";
は同じで「変数です」と表示されますが、
echo '$hensuu';
とすると変数が展開されないため、「$hensuu」と表示されます。
問題になりやすいのがHTMLを出力する際です。なぜならHTMLの属性にダブルクオーテーションが使われるからです。
echo "<p class="text">{$hensuu}<p>";
※変数をダブルクオーテーションで囲む場合には変数を{}で囲みます。囲まなくても問題無いことが多いですが、どこまでが変数名なのかを明示的に示すことで無用なエラーなどが起きませんので囲んでおきましょう。
この場合、一見問題無さそうですが、エラーとなり、画面にはエラーしか表示されません
ダブルクオーテーションの中にダブルクオーテーションがあるためPHPが解釈できずにエラーとなります。
ではシングルクォーテーションではどうでしょうか。
echo '<p class="text">$hensuu<p>';
一見これで良さそうですが、シングルクォーテーション内では変数が展開されないため期待通りの表示がされません。
ではどうするか。いくつか方法があります。
・ダブルクオーテーション内のダブルクオーテーションにエスケープ文字「¥」マークを付ける。
echo "<p class=\"text\">{$hensuu}<p>";
これで問題なく表示されます。ただ、コードの可読性、メンテナンス性などを考慮すると必ずしもこれが正解とは言えないかもしれません。なぜなら間違って「¥」マークを消してしまうとエラーになってしまい何も表示されません。
・シングルクォーテーションと文字列の結合「.」を複数使い、変数をシングルクォーテーションで囲まないようにする。
echo '<p class="text">'.$hensuu.'<p>';
これも問題なく表示されます。ただこれも正直可読性が良いとは言えません。長めのHTMLで変数も複数になるとさらに読みにくくなります。
・HTMLの属性の値をシングルクォーテーションで囲んでしまう。
echo "<p class='text'>{$hensuu}<p>";
これも問題ありません。ただ、シングルクォーテーションで囲むことが今後のHTMLでも使用可能かどうかわかりません。まぁたぶん大丈夫と思いますが。しかし、一般的にはダブルクオーテーションで囲むことがほとんどなので、これもあまり良い方法とは言えないかもしれませんね。
・ヒアドキュメントを使う(変数は必ず{}で囲む必要があります)
(ちょっと一見特殊な書き方です。HTML~HTML;までの間に記述します。HTMLの書き方そのままのルールで記述でき、かつ変数も展開するので一見これが最強?と感じます。)
echo <<<HTML
<p class="text">{$hensuu}<p>
HTML;

これで問題なく表示されます。ただ、上下に記述が増えてしまいます。このHTML部はアルファベットであれば何でもOKです。が、EOFやEOL、HTMLなどが使われることが多いです。また、HTML;の前には空白スペースがあっては行けません。なので、インデントができません。
・変数の箇所のみPHPタグで囲み出力する(多数派と思われ)
<p class="text"><?php echo $hensuu;?><p>
これも問題なく表示されます。ただ、変数箇所が多いとその分記述が増えるのが難点でもあります。が、この書き方がおそらく一番多いと思われます。
う~ん、で?結局どれを使えばいいねんw。となるのですが、正直自分にもどれが最適なのか分かりません(笑)
いろいろな人のコードを見て来ましたが、書く人によって異なるというのが現状かと思います。
会社によってはコーディング規約などで決まってることもあるでしょう。
ただ、最後のものが多いかなと思います。
自分の場合、ちょっとした出力(タグ1つとか)であれば
最後の変数箇所のみphpタグで囲む。
記述が長い場合には「ヒアドキュメントを使う」にすることが多いです。
どれを使うにしろ書き方は統一するのが良いでしょう。
その他PHPでインデントのためにタブスペースや半角スペースを多く使いますが、全角文字(スペース含む)は絶対に書いてはいけません。PHPエラーになります。
特に全角スペースは一見気づきにくいので注意が必要です。エラーが治らない・・・と思ったら全角スペースが入っていたなんて初めのころはよくやります。 スペースは必ず半角スペース(またはタブ)です。
コードの可読性のためにもインデントは入れることをおすすめします。
自分はHTMLの場合はあえてインデントさせず左寄せにしていますが、プログラムを書く場合はインデントを入れてます。入れ子が複雑になると分けわからなくなることもあります。
ちなみにDWには「カッコ内を選択する」という便利な機能が付いてます。この(から)はどのif文のものかなどが一発で分かります。

賛否あるかと思いますが、個人的にHTMLには別に必要無いと考えています。制作会社である以上プロなんだから見りゃわかるでしょ的な。また、インデント方法を統一するのも難しいなどがあります。DWの「ソースフォーマットの適用」で一発で入れることもできますが。

配列

一つの変数に複数の値を持たせたい場合に使います。これもよく使います。
$hensuu[0] = '変数1です';
$hensuu[1] = '変数2です';

変数名の後に添字(キー)を記述します。
この場合、
echo $hensuu[1];
とした場合、「変数2です」が表示されます。
またこの添字(キー)は省力出来ます。(というか省力することがほとんどですが)
その場合、0からの連番で自動付与されます。
$hensuu[] = '変数1です';
$hensuu[] = '変数2です';

とした場合、
echo $hensuu[1];
で同じく「変数2です」が表示されます。
ただ、この指定方法だと多くなった場合には記述が増え面倒です。
$hensuu[]= '変数1です';
$hensuu[] = '変数2です';
$hensuu[] = '変数3です';

・・・
そこでarray関数というのを使います。
$hensuu = array('変数1です','変数2です','変数3です');
左から順番に添字(キー)が付与されますので、これで
echo $hensuu[1];
で同じく「変数2です」が表示されます。
なぜ配列をわざわざ使うのか。
これは配列で書いたほうがコードを少なくできるからに尽きるでしょう。
たとえばフォームなどでよく都道府県のプルダウンを使うことはあるでしょう。
ここではすべて書くと大変なので、東北6県だけにします。
変数も何もPHP自体使わない場合
<select name="都道府県">
< option value="青森県">青森県</option>
< option value="岩手県">岩手県</option>
< option value="秋田県">秋田県</option>
< option value="宮城県">宮城県</option>
< option value="山形県">山形県</option>
< option value="福島県">福島県</option>
< /select>

まぁこうなります。当然47都道府県あればその分必要になります。
変数を使い配列を使わない場合。
<?php
//配列に県名を入れる
$aomori = '青森県';
$iwate = '岩手県';
$akita = '秋田県';
$miyagi = '宮城県';
$yamagata = '山形県';
$hukusima = '福島県';
?>
< select name="都道府県">
< option value="<php echo $aomori;?>"><php echo $aomori;?></option>
< option value="<php echo $iwate;?>"><php echo $iwate;?></option>
< option value="<php echo $akita;?>"><php echo $akita;?></option>
< option value="<php echo $miyagi;?>"><php echo $miyagi;?></option>
< option value="<php echo $yamagata ;?>"><php echo $yamagata;?></option>
< option value="<php echo $hukusima;?>"><php echo $hukusima;?></option>
< /select>

なんか気づきませんか?PHP自体使わない場合と記述量は一緒ですね・・・。
いや、変数を定義している分増えてしまっています。当然47都道府県あればその分増えることになります。
もちろん万が一「青森県」が県名が変わって「緑森県」になった場合、直す箇所は一箇所で済みますので、
やらないよりはましかもしれませんが・・・。

配列を使った場合
<select name="都道府県">
<?php
//配列に県名を入れる
$kenmei = array('青森県','岩手県','秋田県','宮城県','山形県','福島県');
//配列の数だけループする
foreach($kenmei as $val) {
//出力する(「”」内にタグの属性「”」を書く場合はその前にエスケープ処理「¥」マークが必要です)
echo "<option value=\"{$val}\">{$val}</option>";
}
?>
< /select>

たったこれだけで済みます。コメントを書いているので多く見えますが、4行で済みます。
foreachはループ処理です。配列の数だけ自動で添字(キー)0から順番にループしますので、配列ループ時にはよく使います。asの後の$valに配列の各要素が順番に代入されますので、青森県、岩手県・・・と表示されます。
同じくループ処理に使われるfor文があります。こちらは聞いたことがあるかもしれません。
これでも書くことができますが、配列のループの場合はforeachのほうが手っ取り早いです。
for文で書く場合
<select name="都道府県">
<?php
//配列に県名を入れる
$kenmei = array('青森県','岩手県','秋田県','宮城県','山形県','福島県');
for($i=0;$i<count($kenmei);$i++) {
//出力する(「”」内にタグの属性「”」を書く場合はその前にエスケープ処理「¥」マークが必要です)
echo "<option value=\"{$kenmei[$i]}\">{$kenmei[$i]}</option>";
}
?>
< /select>


countは文字通りカウントする関数です。この場合、変数の数を数えています。
配列の詳細については以下マニュアル等を参考下さい。
http://php.net/manual/ja/language.types.array.php

定数

定数とは、変数と似ていますが、変数は上書きできるが、定数は一度定義したらその値は変わらないという特徴があります。PHPでは、定数を定義するために、define()関数を使い、定数名とその値を引数とします。以下が定数を定義するための公式です。
define("定数名", "値");
例 define("hensuu", "変数だよ");

変数の場合、
$hensuu = '変数だよ';
$hensuu = '変だよ';
とした場合、後に読み込まれる「変だよ」が代入されますが、
定数の場合はこれができません(しても無効です)。これが大きな違いです。
ただ、とりあえず定数は使わずともOKです。
なぜならすべて変数で指定してまえるからです。
また、配布中のプログラムでも定数は一度も使ってません。すべて変数にしていますが、
設定箇所の変数の値は変化しませんので、定数で定義してもいいでしょう。
実務では定数を使うことがありますが、個人的にはコードの可読性なども含め、必須とは考えてません。
変数は先頭にドルマーク「$」がつきますが、定数の場合付きませんので、一見すると関数と区別しづらいという点があります。
ただ、他の人のコードなどを見る際などのために、または今後のためにもこういうのがあるということは知っておく必要があります。

関数

PHPは関数で作ると言ってもいいでしょう。実際には主に関数、変数、条件分岐からなります。
関数名(引数);
の形で記述します。
例 メールを送信するための関数(mail関数)
mail($to,$subject,$body,$header);
PHPは、あらかじめ1000以上にも及ぶ「関数」が定義されています。これを使ってプログラムを組んでいくことになります。ただ、実際すべて覚える必要は無く、実際によく使う関数は限られています。
たとえば文字の置換用の関数:str_replace('変換前の文字列','変換後の文字列','変換元の文字列');
使用例
$honbun = 'テストです';
$hensuu = str_replace('テスト','本番',$honbun);

//文字列はシングルクォーテーション(またはダブルクオーテーション)で必ず囲みます
echo $hensuu;

とした場合、「本番です」と表示されます。
この「引数」の順番、数は決まっていますので、ちゃんと決まりに沿って記述する必要があります。
この場合、「php str_replace」で検索すればマニュアルページがありますのでそちらで確認して下さい。

PHPにあらかじめ組み込まれている関数については、以下のサイトなんかが参考になります。
http://www.scollabo.com/banban/php/reference.html
また、「PHP逆引きレシピ」という本がすごく良いです。必携の書と言っても良いかもしれません。

演算子

計算を行うための記述です。
演算子意味例示機能
+加算12 + 52つ以上の値の足し算を行う
-減算12 - 52つ以上の値の引き算を行う
*乗算12 * 52つ以上の値の掛け算を行う
/乗算12 / 52つ以上の値の割り算を行う
%剰余12 % 5割り算したときの割り切れなかった数を求める

比較演算子

これもとにかく必須です。必ず使います。
if($tounyu_kingaku >= $juice_nedan)
でジュースの値段と投入金額を比較しています。
この場合、投入金額がジュースの値段以上であれば~という条件分岐です。
比較演算子
名前結果
$a == $b等しい型の相互変換をした後で $a が $b に等しい時に TRUE
$a === $b等しい$a が $b に等しく、および同じ型である場合に TRUE
$a != $b等しくない型の相互変換をした後で $a が $b に等しくない場合に TRUE
$a <> $b等しくない型の相互変換をした後で $a が $b に等しくない場合に TRUE
$a !== $b等しくない$a が $b と等しくないか、同じ型でない場合に TRUE
$a < $bより少ない$a が $b より少ない時に TRUE
$a > $bより多い$a が $b より多い時に TRUE
$a <= $bより少ないか等しい$a が $b より少ないか等しい時に TRUE
$a >= $bより多いか等しい$a が $b より多いか等しい時に TRUE

 

2018年6月28日木曜日

PHP: XAMPP

localhostのルート・ディレクトリ

C:\xampp\htdocs\php_test

PHP Contact Form

1. 基本

*これでレンタルサーバー上から送れることは確認。

1) htmlサイド
<html>
 <head>
  <meta charset="utf-8" />
  <script type="text/javascript" charset="UTF-8"></script>
 </head>
 <body>
  <form action="./mail.php" method="post">
  <p>受信者</p><input type="text" name="to">
  <p>タイトル</p><input type="text" name="title">
  <p>本文</p><textarea name="content" cols="50" rows="5"></textarea>
  <p><input type="submit" name="send" value="送信"></p>
  </form>
 </body>
</html>

2) phpサイド
<html>
 <head>
  <meta charset="utf-8" />
 </head>
 <body>
  <?php
   mb_language("Japanese");
   mb_internal_encoding("UTF-8");

   $to = $_POST['to'];
   $title = $_POST['title'];
   $content = $_POST['content'];
   $headers .= "Content-type: text/html; charset=UTF-8";
   if(mb_send_mail($to, $title, $content)){
    echo "メールを送信しました";
   } else {
    echo "メールの送信に失敗しました";
   }
  ?>
 </body>
</html>

https://youtu.be/iykJl6iXCao

***************************
これにバリデーションを入れる
***************************

<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">
 <script src="./xxx.js"></script>
 </head>
 <body>

<form role="form" action="mail.php" method="post">
<div class="form-group">
 <p><label for="exampleInputName1">Your Name</label>
  <input type="text" class="form-control" id="exampleInputName1" placeholder="Enter name" name="name" required>
 </P>

 <p><label for="exampleInputEmail1">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="email" required>
 </p>

 <p><label for="exampleInputText1">Message</label>
 <textarea class="form-control" rows="3" name="message" required></textarea>
 </p>

 <p><label for="radio"></label>
 <input type="radio" name="radio" value="0" />
 *内容を確認し、よろしければ左のボタンをチェックした後、下の送信ボタンを押してください。</p>



</div>
 <p><button type="submit" value="SEND MESSAGE" class="btn btn-default">Submit</button>
 </p>
 </form>

</body>
</html>



<PHP>

<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_message = $_POST['message'];
$mail_to = xxxxx@gmail.com(**送信先のメールアドレスを入力)';
$subject = 'Message from a site visitor '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        window.location = 'http://www.mossymob.net';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        alert('メッセージ送信に失敗しました。こちらのメールアドレスへお問い合わせください。test@gmail.com(※自分のメールアドレス)');
        window.location = 'index.html(※送信失敗後に移動するページ)';
    </script>
<?php
}
?>


*************************************
Security対策はしときませんと
*************************************
 https://teratail.com/questions/71592

サニタイズ
https://gray-code.com/php/make-the-form-vol5/

*************************************
これも本格的な企業の問い合わせ
*************************************

 https://it-tantou.com/3406/

2018年6月27日水曜日

.htaccess アクセス制限


1. ディレクトリ全体にアクセス制限

1行だけ。

deny from all
「ディレクトリ内をまるごとアクセス拒否する」設定は、CGIが内部で利用するだけのデータが格納されたディレクトリなどで、第三者に勝手にダウンロードされると不都合がある場合に活用。」
例えば、
(1) CGIの設定やパスワード記述ファイルが格納されているディレクトリ
(2) ブログツールのデータベース格納用ディレクトリ

2. 指定ファイルにアクセス制限


■記述 (※単一のファイルをアクセス拒否)
この場合は、先ほどの記述に「対象ファイルを指定する記述」を加えます。 例えば、以下のように記述します。
 
<Files 対象ファイル名> deny from all </Files>
「対象ファイル名」部分には、アクセスを拒否したいファイル名を記述します。 例えば、「 password.dat 」ファイルを指定する記述は、以下の通りです。
 
<Files password.dat> deny from all </Files>

■記述 (※複数のファイルをアクセス拒否)
特定の拡張子が付いたファイルをすべてアクセス拒否したいなら、以下のように記述します。
 
<Files ~ ".dat$"> deny from all </Files>

ファイル名の代わりに、「 ~ 」(チルダ記号)を記述すると、その後に正規表現を記述できます。 その正規表現にマッチするファイルがすべてアクセス拒否の対象になります。
上記は、拡張子「.dat」のファイルを指定した例です。
もし、複数種類の拡張子を対象にしてすべてアクセス拒否したいのであれば、以下のように記述できます。
 
<Files ~ ".(dat|pm|ini)$"> deny from all </Files>

上記は、拡張子「.dat」と「.pm」と「.ini」の3種類のファイルを対象にした例です。
このように書いておくだけで、該当するファイルへは、自分も含めて誰もアクセスできなくなります。
※サブディレクトリにあるファイルに対してもアクセス拒否は有効です。

3.IPアドレスによるアクセス制限

記述 (※IPアドレスを指定)
この場合は、「一旦すべてのアクセスを拒否する」記述と、「例外としてアクセスを認める」記述を加えます。 例えば、以下のように記述します。
order deny,allow
deny from all
allow from 202.222.92.201
この3行の意味は、以下の通りです。
[1行目] 拒否設定→許可設定の順で解釈させる
[2行目] あらゆるアクセスを拒否する
[3行目] IPアドレス「202.222.92.201」からのアクセスだけを許可する
上記のように記述すると、IPアドレス「202.222.92.201」からアクセスした場合だけアクセスが許可され、 それ以外のIPアドレスからのアクセスはすべて拒否されます。
ここに自分が利用しているIPアドレスを記述しておけば、自分だけがアクセスでき他人からのアクセスを拒否できるわけです。
なお、大学や会社など、大きなネットワークが利用しているIPアドレスを記述した場合、同一のIPアドレスを用いてインターネットに接続しているユーザすべてからのアクセスを許可してしまうことになりますので注意して下さい。
(このことを利用して、ある特定の組織内からだけアクセスを許可する設定も可能です。)
■注意点
※プロバイダ提供の回線にダイアルアップ接続している場合は、インターネットに接続するたびにIPアドレスが変化してしまうことが多いため、この記述を活用することは難しいでしょう。 ADSLやFTTHのような常時接続環境であれば、あまりIPアドレスは変化しないので、(自分に割り当てられたIPアドレスが変化するまでは)この記述を活用できます。
※IPアドレスが頻繁に変更される環境を用いている場合は、基本認証を使った(IDとパスワードによる)アクセス制限を施す方法が現実的でしょう。
※自宅内でLANを構築している場合(=インターネット接続にブロードバンドルータなどを用いている場合)、各PCに割り当てられているIPアドレスは、たいていグローバルIPアドレスではなくプライベートIPアドレスです。 その場合、「.htaccess」ファイルへは、ルータなどに割り当てられている「グローバルIPアドレス」の方を記述しなければなりませんので注意して下さい。 (プライベートIPアドレスを記述しても意味がありません。)
■記述 (※ホスト名を指定)
IPアドレスのほか、ホスト名を記述することもできます。
order deny,allow
deny from all
allow from .allabout.co.jp
上記だと、allabout.co.jp ドメインからのアクセスだけが許可されます。
※abc.allabout.co.jp や xyz.allabout.co.jp などからもアクセスできます。
なお、許可するIPアドレスやホスト名の記述は、以下のように必要なだけ列挙できます。
order deny,allow
deny from all
allow from 202.222.92.201
allow from 115.30.0.33
allow from .allabout.co.jp
allow from .about.com
■対象を限定
前ページでご紹介したように、アクセス拒否対象を限定して以下のように記述することも可能です。
<Files password.dat>
    order deny,allow
    deny from all
    allow from 202.222.92.201
</Files>
■用途
自分が利用しているIPアドレスを記述しておけば、自分以外のユーザからのアクセスを拒否できます。 また、自分の属する組織が利用しているIPアドレスやホスト名を列挙しておけば、その組織内からのアクセスだけを許可し、それ以外のアクセスを拒否できます。
自分だけが利用できればよいファイル置き場や、組織内だけで利用する掲示板を関係者などに活用できるでしょう。

参考)

https://allabout.co.jp/gm/gc/23976/1/

2018年6月24日日曜日

Javascript: Variables


Global Variable: functionの外で定義された変数
                 どのfunctionの中でも使う事ができる。
Local Variable : any variables defined inside of the body of the function.

(global variable)
<script type=#text/javascript">
      var fish = "Tuna";
       function sea(){
             document.write (fish);
        }

  sea(); // -> fishが出る
  document.write (fish);// -> fishが出る
</script>

(local variable)

<script type=#text/javascript">
       function sea(){
      var fish = "Tuna";
             document.write (fish);
        }
  sea(); // -> fishが出る
  document.write (fish);// -> fishは出ない
</script>



----------------------------------------------------------------------
ということは

1. Global Variableを2つの別の関数で使う

<body>
 <form name="form1">
   <label>num1</label><input class="tb_fmt1" type="text" name="name1" value="2">
   <label>num2</label><input class="tb_fmt1" type="text" name="name2" value="3">
   <input type="button" onclick="calc1(),calc2()" value="calc1"/> //複数のfunction実行
   <label>result1</label><input class="tb_fmt1" type="text" name="result1">
  </form>

 <form name="form2">
   <label>num3</label><input class="tb_fmt1" type="text" name="name3">
   <label>num4</label><input class="tb_fmt1" type="text" name="name4">
   <input type="button" onclick="calc2()" value="calc2"/>
   <label>result2</label><input class="tb_fmt1" type="text" name="result2">
   </form>

<script type="text/javascript">
   var a = parseFloat(document.form1.name1.value);
   var b = parseFloat(document.form1.name2.value);

  function calc1(){
   var c = a + b;
   document.form1.result1.value= c;
  }

  function calc2(){
   var c = a * b;
   document.form2.result2.value= c;
  }
</script>

で、
Calc1の結果 :"5"。 (parseFloatがないと23となる。) Calc2は"6"と表示される。

<Takeaway>
 *Functionの中で定義した変数は、別のFunctionの中で同じ名前の変数が定義されていても
 そちらに影響を与えない。

-----------------------------------------------------
function calc1(){
  var c = a + b;
  document.form1.result1.value= c;
 }

 function calc2(){
  var d = c + a;
  document.form2.result2.value= d;
 }
-----------------------------------------------------
を、実行しても function calc2()の cは未定義 となって結果がでない。

2018年6月23日土曜日

CSS : テーブル装飾<テーブル内のテキスト 中央寄せ>


◆<td><th>のサイズ指定
 <td width="200" height="100"></td>
  ピクセル数またはパーセント
 *HTML 4.01では非推奨


◆テーブル内の文字の大きさを指定

<table cellpadding="15" border="3" style="font-size:10px">

◆Text位置の調整
センタリングしたいものがインライン要素の場合は text-align を用います。

<td align="left"> 左寄せ。</td>

. <div style="text-align:center;"> <span>あああ</span> </div>. センタリングしたいものがブロック要素の場合は、センタリングしたい要素自体に margin: 0 auto; を指定します。

センタリングしたいものがブロック要素の場合は、センタリングしたい要素自体に margin: 0 auto; を指定します。左右のマージンを自動配分することでセンタリングを実現します。Internet Explorer の場合は、text-align でもブロック要素がセンタリングされることがありますが、これは Internet Explorer のバグです。センタリングに関してはブラウザやモードによって差異があるので注意しましょう。

<style type="text/css">
<!--
.center {
  text-align: center;
}
.center * { margin-right: auto; margin-left: auto; }
-->
</style>

<div class="center">
  ...
</div>

<div style="text-align=center">文字文字文字</div> <- 効かない

<div align="center">中央寄せしたい文字</div>

<p style="text-align: center">テスト・テスト</p> <-これは効いた!!


pタグの親要素(例えばdiv)で、text-align:centerを指定しても、p全体は中央配置にならない。
なぜなら、pタグなどのdisplay: blockの要素に対しては、text-alignは適用されない仕様となっているからです。これはCSSのルールです。
◆CSSでの記述

<div class="container">
  1行のテキストで縦の中央寄せ。
</div>

<style> .container{

line-height:200px; text-align:center; background-color:#fff2fa; }
</style>

2018年6月22日金曜日

CSS3 responsive design

htmlサイド

<head>
 <meta charset="utf-8">
 <meta name="viewpoort" content="width=device-width, initial-scale=1.0">
 <link href="loancalc.css" rel="stylesheet" type="text/css">
 <script src="./loancalc.js"></script>
</head>

CSSサイド
@media screen and (max-width:959px{   // notepadのサイズ
#container{
 width: 100%;}     //cssにcontainerのサイズをどのように決めていても、959pxより
           小さくなれば画面サイズの100%を取得しろ、という命令。
#left-column{
 width: 70%;} 
}

@media screen and (max-width:640px{   // iphone 6とかのサイズ

#left-column{    // コラムが上下に表示される
 width: 100%;}

#right-column{
 width: 100%;}
 
}

@media screen and (max-width:320px{   // iphone 4とか(最少?)のサイズ

#container{
 width: 320px;}
}

2018年6月21日木曜日

Javascript: 外部ファイルと内部scriptを併記する場合


1. html内

<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
  <script src="./loan5.js"></script>
 
 </head>
 <body>
 <form name="F1">
 <li><input class="tb_fmt1" name="h_feet" type="text" />feet</li>
 <li><input class="tb_fmt1" name="h_inch" type="text" />inch </li>
 <li><input type="button" value="submit" onclick="calc()"></li>

 <li><input class="tb_fmt2" name="result" type="text" /> result </li>

</form>

  <script type="text/javascript" >
 /**************************
 * カンマ編集を行うFunction
 **************************/
function toComma(obj){
  if((obj.value).trim().length != 0 && !isNaN(obj.value)){
    obj.value = Number(obj.value).toLocaleString();
  }
}

/**************************
 * カンマ編集を解除するFunction
 **************************/
function offComma(obj){
  var reg = new RegExp(",", "g");
  var chgVal = obj.value.replace(reg, "");
  if(!isNaN(chgVal)){
    obj.value = chgVal;  //値セット
    obj.select();        //全選択
  }
}

window.onload = function(){
 var elements = document.getElementsByClassName("tb_fmt1");
 for(var i=0;i<elements.length;i++){
    elements[i].onfocus = function(){offComma(this);}
    elements[i].onblur = function(){toComma(this);}
 }
}
function calc(){

 // カンマ編集を解除するFunction

 var a = parseFloat(document.F1.h_feet.value.replace(/,/g,''));
 var b = parseFloat(document.F1.h_inch.value.replace(/,/g,''));
 var result = a + b;
 function thousands_separators(result) {
    var num_parts = result.toString().split(".");
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return num_parts.join(".");
  }

 document.F1.result.value =thousands_separators(result);
}

 </script>


</body>
</html>


2.js.ファイル内

function calc(){
 var num1 = parseFloat(document.F1.h_feet.value);
 var num2 = parseFloat(document.F1.h_inch.value);
 var num3 = num1+num2;

 document.F1.result.value =num3;

}

3.結果

Javascript : フォームの桁カンマ



簡単バージョン(シングルフォーム:個別適用タイプ)



<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function thousands_separators(num) {
    var num_parts = num.toString().split(".");
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return num_parts.join(".");
  }
console.log(thousands_separators(1000));
console.log(thousands_separators(10000.23));
console.log(thousands_separators(100000));
</script>

 </head>
 <body>
 </body>
 </html>

適用してみるとこうなる。
<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <form name="F1">
 <li><input class="tb_fmt1" name="h_feet" type="text" />feet</li>
 <li><input class="tb_fmt1" name="h_inch" type="text" />inch </li>
 <li><input type="button" value="submit" onclick="calc()"></li>

 <li><input class="tb_fmt2" name="result" type="text" /> result </li>

 <script type="text/javascript">

 /**************************
 * カンマ編集を行うFunction
 **************************/
function toComma(obj){
  if((obj.value).trim().length != 0 && !isNaN(obj.value)){
    obj.value = Number(obj.value).toLocaleString();
  }
}

/**************************
 * カンマ編集を解除するFunction
 **************************/
function offComma(obj){
  var reg = new RegExp(",", "g");
  var chgVal = obj.value.replace(reg, "");
  if(!isNaN(chgVal)){
    obj.value = chgVal;  //値セット
    obj.select();        //全選択
  }
}

window.onload = function(){
 var elements = document.getElementsByClassName("tb_fmt1");
 for(var i=0;i<elements.length;i++){
    elements[i].onfocus = function(){offComma(this);}
    elements[i].onblur = function(){toComma(this);}
 }
}
function calc(){

 // カンマ編集を解除するFunction


 var a = parseFloat(document.F1.h_feet.value.replace(/,/g,'')); <- この段階でaは、小数点を含む
                                               カンマなしの数字になる。

 var b = parseFloat(document.F1.h_inch.value.replace(/,/g,''));<- この段階でaは、小数点を含む
                                        カンマなしの数字になる。
 var result = a + b;
 function thousands_separators(result) {
    var num_parts = result.toString().split(".");                ←小数点で分離
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); ←再度、カンマつきに
    return num_parts.join(".");                         ←小数点を結合
  }

 document.F1.result.value =thousands_separators(result);
}

 </script>
 </script>
</body>
</html>



簡単バージョン(複数フォーム 一括適用)


<!DOCTYPE HTML>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <link href="xxx.css" rel="stylesheet" type="text/css">



 </head>
 <body>
 <form name="F1">
 <li><input class="number" name="h_feet" type="text" />feet</li>
 <li><input class="number" name="h_inch" type="text" />inch </li>
 <li><input type="button" value="submit" onclick="calc()"></li>

 <li><input class="number" name="result" type="text" /> result </li>



 <script type="text/javascript">

 /**************************
 * カンマ編集を行うFunction
 **************************/
function toComma(obj){
  if((obj.value).trim().length != 0 && !isNaN(obj.value)){
    obj.value = Number(obj.value).toLocaleString();
  }
}

/**************************
 * カンマ編集を解除するFunction
 **************************/
function offComma(obj){
  var reg = new RegExp(",", "g");
  var chgVal = obj.value.replace(reg, "");
  if(!isNaN(chgVal)){
    obj.value = chgVal;  //値セット
    obj.select();        //全選択
  }
}

window.onload = function(){
 var elements = document.getElementsByClassName("number");
 for(var i=0;i<elements.length;i++){
    elements[i].onfocus = function(){offComma(this);}
    elements[i].onblur = function(){toComma(this);}
 }
}
function calc(){

 // カンマ編集を解除するFunction


 var a = parseFloat(document.F1.h_feet.value.replace(/,/g,''));   <-- 計算時にカンマを取り除く
 var b = parseFloat(document.F1.h_inch.value.replace(/,/g,'')); <-- 計算時にカンマを取り除く
 var result = a + b;
 document.F1.result.value =result;
}

 </script>
 </script>
</body>
</html>


https://javascript.programmer-reference.com/js-textbox-format-comma/

============================================================
よいけど、複数の数値入力フォームがある時は?


<html>

<input id=numData type="text">

<Script>

/**
* 数値の3桁カンマ区切り
* 入力値をカンマ区切りにして返却
* [引数]   numVal: 入力数値
* [返却値] String(): カンマ区切りされた文字列
*/
 function addFigure(numVal) {
 // 空の場合そのまま返却
 if (numVal == ''){
  return '';
 }
 // 全角から半角へ変換し、既にカンマが入力されていたら事前に削除
 numVal = toHalfWidth(numVal).replace(/,/g, "").trim();
 // 数値でなければそのまま返却
 if ( !/^[+|-]?(\d*)(\.\d+)?$/.test(numVal) ){
  return numVal;
   }
 // 整数部分と小数部分に分割
 var numData = numVal.toString().split('.');
 // 整数部分を3桁カンマ区切りへ
 numData[0] = Number(numData[0]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 // 小数部分と結合して返却
 return numData.join('.');
 }

/**
 * カンマ外し
 * 入力値のカンマを取り除いて返却
 * [引数]   strVal: 半角でカンマ区切りされた数値
 * [返却値] String(): カンマを削除した数値
 */
 function delFigure(strVal){
 return strVal.replace( /,/g , "" );
 }

/**
 * 全角から半角への変革関数
 * 入力値の英数記号を半角変換して返却
 * [引数]   strVal: 入力値
 * [返却値] String(): 半角変換された文字列
 */
 function toHalfWidth(strVal){
 // 半角変換
 var halfVal = strVal.replace(/[!-~]/g,
  function( tmpStr ) {
  // 文字コードをシフト
  return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
  }
 );
  return halfVal;
}

/**
 * 処理を適用するテキストボックスへのイベント設定
 * onBlur : カンマ区切り処理実施
 * onFocus : カンマ削除処理実施
 */
var elm = document.getElementById('numdata1','numdata2');
elm.addEventListener('blur', function(){ this.value = addFigure(this.value) }, false);
elm.addEventListener('focus', function(){ this.value = delFigure(this.value) }, false);

 }

2018年6月20日水曜日

Javascript : 小数点の扱い方


1. 切り捨て
コード: var a = Math.floor( 1.66666 ) ;
結果: a = 1

2.切り上げ
var a = Math.ceil( 1.1111 ) ;
a = 2
 
3.四捨五入
var a = Math.round( 4.7111 ) ;
a = 5
 
 
4.小数点第N位まで
var n = 2 ; // 小数点第n位まで残す

Math.floor( 1.4444444 * Math.pow( 10, n ) ) / Math.pow( 10, n ) ;

*Math.powは、べき乗を演算するメソッド。

小数点2桁、3桁なら、こっちの方が簡単。
(Math.round(monthly_pmt*100))/100

Javascript : javascript内でのhtmlの記述

function calculate(loan_amt,months,rate,extra){

 i = rate/100
 var comp_int = Math.pow((1+i/12),months)
 var monthly_pmt = loan_amt*(i/12)*comp_int/(comp_int - 1);
 alert (Math.round(monthly_pmt*100)/100);

 var info ="";

 info +="<table width ='250'>"
  //htmlコードを書くという書式

 info +="<tr><td> Loan Amount: </td>";
 info +="<td align='right'>"+loan_amt+"</td></tr>";

 info +="<tr><td> Monthly Payment: </td>";
 info +="<td align='right'>"+Math.round(monthly_pmt,2)+"</td></tr>";

 info +="</table>";

 document.getElementById("loan_info").innerHTML = info;
              //html内のdiv id = loan_infoに書き出せというコマンド}

2018年6月18日月曜日

Javascript 2つのFunction間でのvalueの引き継ぎ

<script type="text/javascript">
function validate(){
   var x = 2;
   document.write(x + '\n'); //output: 2
   add(x)   //add()をCall
   console.log(x); //output: 2
   }

  function add(x){
  var y = 1;
  var z = x+y;
  document.write(z); //output: 3
  }

validate()
</script>

=============================================
もうひとつ、すごく苦労した受け渡し
=============================================


function startOver() {

 document.loan_form.loan_amt.value="0";
 document.loan_form.months.value="0";
 document.loan_form.rate.value="0";
 document.loan_form.extra.value="";
 document.getElementById("loan_info").innerHTML = "";
 document.getElementById("table").innerHTML = "";
}
function validate(){
 var loan_amt = document.loan_form.loan_amt.value;
 var months = document.loan_form.months.value;
 var rate = document.loan_form.rate.value;
 var extra = document.loan_form.extra.value;

 if(loan_amt <= 0 || isNaN(Number(loan_amt))){
  alert("please enter a valid loan amount.");
  document.loan_form.loan_amt.value = "0";
  }

 else if (months <=0 || parseInt(months) != months){
  alert("please enter a valid number of months.");
  document.loan_form.months.value = "0";
 }

 else if (rate <= 0 || isNaN(Number(rate))){
  alert("please enter a valid interest rate.");
  document.loan_form.loan_amt.value = "0";
  }

 else if (extra < 0 || isNaN(Number(extra))){
  alert("please enter a valid extra payment.");
  document.loan_form.loan_amt.value = "0";
 }

 else{
  alert("validation complete");


  alert(parseFloat(loan_amt) +'/n'+ parseInt(months))
  calculate(parseFloat(loan_amt),parseInt(months),parseFloat(rate),parseFloat(extra));
  // calculate function()に渡すvaluewを()内で指定
  //str型から其々の数字に
 }
}
function calculate(loan_amt,months,rate,extra){
 console.log(loan_amt + 1000 + 'hello'+ months + 'add' + rate+'extra'+extra);

}

Javascript Loan 月額支払計算式


1. 定期支払額

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript">
 var rate = 0.04;
 var loan_amt = 100000;
 var months = 60;

 var month_rate = rate/12
 var compound_int = Math.pow (1 + month_rate, months);
 var monthly = (loan_amt*compound_int*month_rate)/(compound_int-1)

 console.log(monthly)
 </script>

</head>
<body>


</body>
</html>


====具体例===

function startOver() {

 document.loan_form.loan_amt.value="0";
 document.loan_form.months.value="0";
 document.loan_form.rate.value="0";
 document.loan_form.extra.value="";
 document.getElementById("loan_info").innerHTML = "";
 document.getElementById("table").innerHTML = "";
}
function validate(){
 var loan_amt = document.loan_form.loan_amt.value;
 var months = document.loan_form.months.value;
 var rate = document.loan_form.rate.value;
 var extra = document.loan_form.extra.value;

 if(loan_amt <= 0 || isNaN(Number(loan_amt))){
  alert("please enter a valid loan amount.");
  document.loan_form.loan_amt.value = "0";
  }

 else if (months <=0 || parseInt(months) != months){
  alert("please enter a valid number of months.");
  document.loan_form.months.value = "0";
 }

 else if (rate <= 0 || isNaN(Number(rate))){
  alert("please enter a valid interest rate.");
  document.loan_form.loan_amt.value = "0";
  }

 else if (extra < 0 || isNaN(Number(extra))){
  alert("please enter a valid extra payment.");
  document.loan_form.loan_amt.value = "0";
 }

 else{
  alert("validation complete");


  alert(parseFloat(loan_amt) +'/n'+ parseInt(months))
  calculate(parseFloat(loan_amt),parseInt(months),parseFloat(rate),parseFloat(extra));
  // calculate function()に渡すvaluewを()内で指定
  //str型から其々の数字に
 }
}
function calculate(loan_amt,months,rate,extra){

 i = rate/100
 var monthly_pmt = loan_amt*(i/12)*Math.pow((1+i/12), months)/(Math.pow((1+i/12), months)-1);
 alert(round(monthly_pmt,2));


}
function round(num,dec){ //小数点での四捨五入
 return (Math.round(num*Math.pow(10,dec))/Math.pow(10,dec)).toFixed(dec);
}

}

2. 最大借入額

 <head>
    <!--  Forumula-->
  P =(R/(1-(1+R)^-N))*Loan
  P is the constant payment you make every period
   R is the interest rate per period
  N is the number of periods
  Loan is the total loan amount 
 -->
 <script type="text/javascript">

  function month_pmt(){
   var R = 0.04/12;
   var N = 360;
   var Loan = 100000;
   var Compound_int = Math.pow((1+R),-N);
   P = ((R)/(1-Compound_int))*Loan
   document.write(P);
  }
 
  function reg_pmt(){   var r = 0.04/12;
   var n = 360;
   var p = 300
   var compound_int = Math.pow((1+r),-n);
 
   Loan = p/((r)/(1-compound_int));
   document.write(Loan);
  }
 month_pmt()
 document.write("aaa")
 reg_pmt()
 
 
  </script>
 </head>

Javascript Console 出力 基本構文

(基本構文)
 <script type="text/javascript">
 var rate = 4;
 var amount = 100;
 var ans = rate * amount;
 console.log(ans);
 </script>

(文字列と変数を混在)
<script>
var mystring = "Hello world!";
var mynumber = 1234;
console.log("The message is: " + "%s" + " %d", mystring, mynumber);
</script>

%sとは「文字列として出力する」、%dとは「10進数で出力する」という意味

2018年6月17日日曜日

Javascript 入力フォームのバリデーション




js スクリプト
var loan_amt = document.loan_form.loan_amt.value;
 var months = document.loan_form.months.value;
 var rate = document.loan_form.rate.value;
 var extra = document.loan_form.extra.value;

 if(loan_amt <= 0 || isNaN(Number(loan_amt))){
  alert("please enter a valid loan amount.");
  document.loan_form.loan_amt.value = "0";
  }

 else if (months <=0 || parseInt(months) != months){
  alert("please enter a valid number of months.");
  document.loan_form.months.value = "0";
 }

 else if (rate <= 0 || isNaN(Number(rate))){
  alert("please enter a valid interest rate.");
  document.loan_form.loan_amt.value = "0";
  }





b

Javascript -StartOver Function


1. .js fileでの記載方法

<htmlサイド>


<form name="loan_form">

    <table style="margin:10px;">
     <tr>
      <td>Laon Amount</td>
      <td><input type="text" name="loan_amt" value="0" size="10"/></td>
     </tr>
  </table>
 </form>


 <div id="loan_info">
  </div>
 


<js.サイド>

1) Form入力値の初期化

document . loan_form .loan_amt.value = "0" ;      
     ①フォーム名の指定   
              ②入力フィールド名の指定
                      ③アクションの指定


2) <div>内 入力内容の初期化
(記述開始)

document.getElementById ( " loan_info " ). innerHTML =   " ";
     ①要素の取得コマンド
             ②アクセスするID名の指定
                                            ③ID内のhtmlを変更することの宣言                                    
                                   ④アクションの指定

2018年6月15日金曜日

CSS基本 Boxのポジショニング margin/padding/float


参考)
http://webdesignrecipes.com/css-visual-formating-model/

基本型:1つのBox を1つのBoxに組み入れて2つのBox
- 大きなBoxの定義(<div>タブ)で小さなBoxの<div>を挟む -

1. html
<html>
<head>
 <link href="boxp.css" rel="stylesheet" type="text/css">
</head>
<body>
 <div id="box_1">
  <h2> Box  Practice</h2>

  <div id="box_2">
  </div>

 </div>
</body>
</html>

2. CSS
#box_1{
 width: 650px;
 height: 600px;
 border: 1px solid black;
 }
#box_2{
 width: 250px;
 height: 220px;
 border: 1px solid blue;
 }

<Tag>
1. postion
position: static;(初期値)



               relative;通常の位置を基準とした相対的な配置
      absolute; ウィンドウまたは親ボックスを基準とした絶対的な配置
               fixed; ウィンドウを基準とした絶対的な配置 + 位置の固定

(1) 位置の指定
   top、right、bottom、left は、位置決めされた要素に適用できます。

        例: {position: relative; left: 80px; }

        Paddig:  Box内のコンテンツとBox線との間の余白(padding)
         (書き方)
     1) 値を1つ指定
              上下左右の余白(padding)を指定
                  padding: 20px;(上下左右に20pxの余白)
        2) 値を2つ指定
         記述した順に「上下」・「左右」の余白(padding)を指定できます。
        padding: 30px 50px; (上下に30px、左右に50pxの余白)
             3) 値を3つ指定
                 「上」・「左右」・「下」の余白(padding)を指定
             4) 値を4つ指定
                  「上」・「右」・「下」・「左」の余白(padding)を指定
 
   margin: 定義されたBoxと外部(ボックス,Window枠)との間の余白





 
 
 p 要素の配置場所や大きさは、p 要素自身ではなくて、div 要素が決めている


(中央寄せ)

親ボックスで"text-algin = "center"' を指定しても、ボックス内のボックスは動かない。
p要素の文字列はセンターに寄る。

この場合、中央に寄せたいboxの定義内で
「 margin: 0 auto; 」を指定。


(回り込み)

float: left; 指定されたボックスを’左’に寄せて配置し、文字を回り込ませます。
float right;指定されたボックスを’右’に寄せて配置し、文字を回り込ませます。

但し、boxの場合、最初に記述したboxだけにfloat:leftを記述すると、後に記述されているboxは
前のBoxに重なってしまい、かつ前のBoxの背後に配置されてしまう。
(下記、ピンクの部分が後ろのbox)



後ろのBoxにfloat: rightを書くと、左右に分かれる。


float:left; float:rightは、margin: 0 auto; よりも優先されて実行されるので、効かない。

やっぱり、入れ込む2つのBoxの大きさの和に合わせて、中央に寄せるBoxを作って、その中できっちり float: left; float: right; をしても良いように作るしかないですね。


CSSは、こんな感じ。


#box_1{
 width: auto;
 height: 600px;
 border: 1px solid black;
 padding: 10px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 }
#center{
 width: 550px;
 height: 300px;

 margin: 0 auto;
}

#box_2{
 width: 250px;
 height: 220px;
 border: 1px solid blue;
 float: left;
 background-color: white;
 padding-right: 5px;
 }

#box_3{
 width: 250px;
 height: 240px;
 border: 1px solid blue;
 background-color: pink;
 float: right;

 }

2018年6月14日木曜日

CSS基本 -htmlでの参照方法

CSSの記述方法をまとめておきます。


1.CSSの記載場所
<html> 
< head>
<!--
html header内で、外部スタイルシートを参照する時の記述-->

<link rel="stylesheet" type="text/css" href="./css/bmi.css">
 

<!--
html header内でそれぞれを記載する時の記述-->
<style>
  p {
                  
  text-align: center; color:red;
   
  }
                   
</style>
 </head>

< body>

<!--
bodyタグ内で、装飾したい箇所にそれぞれを記載する時の記述-->
< p style="text-align:center">NIPPON</p>

< /body>

< /html> 
 

・外部のCSSファイルを参照するLinkの記述を<head></head>内で記述した場合、個別のCSS<head></head>内に記述しても、効果がない。
Linkの記述していもて、bodyタグ内で個別にスタイルを指定するのは効果がある。

2.
基本の書き方
(
記述する場所)
<!-- html header内で、外部スタイルシートを参照する時の記述-->
<!-- html header内でそれぞれを記載する時の記述-->
<!-- bodyタグ内で、装飾したい箇所にそれぞれを記載する時の記述-->

(記述の方法)
例えば

body { text-indent: 1em;
    font-family: "
MS P明朝", "リュウミンライト-KL", "MS 明朝", Micho, serif; }

等と書く。 それぞれの要素の名前は
セレクタ { プロパティ:値 }
となる。

複数の ”プロパティと値” の組み合わせを指定したい場合は、セミコロン () でつなげる。

セレクタ { プロパティ:値 ; プロパティ:値; プロパティ:値 }

セレクタには、(1) タグ名 (2) id (3) class名で指定する方法がある。

(1)   タグ名で適用先を指定。
p { color: orange} と指定しておけば、html内で <p>こんにちは </p> と記載すれば良い。

(2)   id名で適用先を指定。
id名は、 CSS内では、#id{プロパティ:値} のように記載する
htmlでは<タグ名 id="id">のように指定する。但し、同じid名はページ内に1回しか使えない。
例)
CSS
# example{color : gray}
html
<div id=example> サンプルです。</div>

(3)   class名で適用先を指定。
class名でセレクタを指定する場合は.class{}ように.ドット(ピリオド)を前につる。

# example {color : red}
html
<div class=example> サンプルです。</div>


(注意)
同じデザインを適用させたいタグやclassidがいくつかあるときは、コンマ,で区切って複数指定することが可能。
p, #example1, .example2 { color : orange}

<!-- bodyタグ内で、装飾したい箇所にそれぞれを記載する時の記述-->

div style
div style
を使えば、CSSファイルをHTMLファイルに埋め込むことなくCSSを適用できる. <span></span>でも良い。
<div style=”プロパティ:;  プロパティ2:2;></div>
例)
<div style=
color:blue; background-color:#90ddb4; padding:30px; display:inline-block;>
< p>Hello World</p>
< /div>

3.
子孫セレクタ(絞り込み指定)
「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」ときに使うものです。タグ名やid名、class名を半角スペースで区切って並べると、どんどん適用先が絞り込まれていきます。
.main p span{ color : red }
Mainクラス内の pタグ内の spanタグ内だけデザインが適用される。

4. 代表的なプロパティ
{font-size: ◯◯px or ◯◯em}
{text-align: center or right}
{ background-color: 色名orカラーコード }
{border: 線の太さ 色 種類}
上にだけ線を引く:border-top:
下にだけ線を引く:border-bottom:
左にだけ線を引く:border-left:
右にだけ線を引く:border-right:
position: relative; (relative or absolute)
overflow: hidden;
margin: 0 auto 1.6%;
transition: height 0.3s ease;
border-radius: 3px;
font-family:
transform: rotate(-26deg);
4. ::after :: before (疑似要素)の使い方
::after::beforeは、疑似要素と呼ばれるものの1つです。これを使うと「HTMLには書かれていない要素もどきCSSで作ることができる。
::beforeは、タグで囲まれた要素の前に “content” に記載された内容を挿入。
::afterは、タグで囲まれた要素の後に “content” に記載された内容を挿入。

(書き方)
p::before {
  content: 'Hello! ';
  color: red}
<html>
<p> World!</p>
<表示結果>
Hello! World!
5. 中央寄せ
(注意)
<p>
<div><h1><h6>などのタグはdisplayの初期値がblockとなっています。text-alignでは、これらの中身の「文章」や「画像」を中央揃えにすることはできますが、要素自体を真ん中に寄せることはできない。


display:block
の要素に対しては、margin-leftmargin-rightのそれぞれの値をautoすることで水平方向に中央寄せ。

.example {
  margin: 10px auto;
  width:50px;;

4.
参考
◇テーブル表記
■タイトル■

1.ここに本文
2.ここに本文
3.ここに本文


■タイトル■

1.ここに本文
2.ここに本文
3.ここに本文


***
横に並べられる***横にならべたら、末尾に
<div style="clear:both;"></div>
を書いておく。
********************


< !--
見出し-->
< div style="float:left; width:200px;">
< div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);
            background-color:#d94057; border:1px solid #d94057; padding-left:10px;
            font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;
            width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
< font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">
■タイトル■</font>
< /div>
< !--
本文-->
< div style="background:#ffffff;border:1px solid #d94057; padding:10px; font-size:1em;
            border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;
            margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
            1
.ここに本文<br>2.ここに本文<br>3.ここに本文</div></div>


< !--
見出し-->
< div style="float:left; width:200px;">
< div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);
            background-color:#d94057; border:1px solid #d94057; padding-left:10px;
            font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;
            width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
< font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">
■タイトル■</font>
< /div>
< !--
本文-->
< div style="background:#ffffff;border:1px solid #d94057; padding:10px; font-size:1em;
            border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;
            margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
            1
.ここに本文<br>2.ここに本文<br>3.ここに本文</div></div>

6. ブログカードをCSSだけで作ってみる。

css

.cp_card01 {
           font-size: 14px;
           line-height: 1.45em;
           position: relative;
           overflow: hidden;
           margin: 0 auto 1.6%;
           -webkit-transition: height 0.3s ease;
                   transition: height 0.3s ease;
           border-radius: 3px;
           background: #ffffff;
           -webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
                   box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
}
.cp_card01::after {
           font-family: FontAwesome;
           content: '\f1b0';
           position: absolute;
           bottom: 60px;
           right: -20px;
           color: rgba(236, 239, 241, 0.7);
           font-size: 180px;
           transform: rotate(-26deg);
           z-index: 0;
}
.cp_card01:hover .details {
           left: 0;
}
.cp_card01 .photo {
           position: relative;
           height: 200px;
           overflow: hidden;
}
.cp_card01:hover .photo1 {
           -webkit-transform: rotate(5deg) scale(1.3);
                   transform: rotate(5deg) scale(1.3);
}
.cp_card01 .photo .photo1 {
           height: 100%;
           background: url('images.jpg') center no-repeat;
           background-size: cover;
           -webkit-transition: all 0.5s ease;
                   transition: all 0.5s ease;
}
.cp_card01 .details {
           font-family: 'Open Sans';
           position: absolute;
           top: 0;
           left: -100%;
           -webkit-box-sizing: border-box;
                   box-sizing: border-box;
           height: 200px;
           margin: 0;
           padding: 10px 15px;
           list-style: none;
           -webkit-transition: all 0.3s ease;
                   transition: all 0.3s ease;
           color: #ffffff;
           background: rgba(40,53,147, 0.6);
}
.cp_card01 .details > li {
           padding: 3px 0;
}
.cp_card01 .details li::before,
.cp_card01 .details .tags ul::before {
           font-family: FontAwesome;
           margin-right: 10px;
           vertical-align: middle;
}
.cp_card01 .details .author::before {
           content: '\f007';
}
.cp_card01 .details .date::before {
           content: '\f133';
}
.cp_card01 .details .tags ul {
           margin: 0;
           padding: 0;
           list-style: none;
}
.cp_card01 .details .tags ul::before {
           content: '\f02b';
}
.cp_card01 .details .tags li {
           display: inline-block;
           margin-right: 3px;
}
.cp_card01 .details a {
           color: inherit;
}
.cp_card01 .details a:hover {
           color: #283593;
}
.cp_card01 .description {
           position: relative;
           padding: 10px;
           z-index: 1;
}
.cp_card01 .description h1 {
           font-size: 1.4em;
           line-height: 1em;
           margin: 0 0 10px 0;
}
.cp_card01 .description h2 {
           font-size: 1em;
           line-height: 1.2em;
           margin: 1.2% 0;
           color: #9b9b9b;
}
.cp_card01 .description p {
           position: relative;
           margin: 0;
           padding-top: 20px;
}
.cp_card01 .description p::after {
           position: absolute;
           top: 6px;
           left: 0;
           width: 20%;
           height: 6px;
           content: '';
           background: #283593;
}
.cp_card01 .description a {
           float: right;
           margin-bottom: 10px;
           color: #283593;
           text-decoration: none;
}
.cp_card01 .description a::after {
           font-family: FontAwesome;
           margin-left: -10px;
           content: '\f061';
           -webkit-transition: all 0.3s ease;
                   transition: all 0.3s ease;
           vertical-align: middle;
           opacity: 0;
}
.cp_card01 .description a:hover::after {
           margin-left: 5px;
           opacity: 1;
}


html

<div class="cp_card01">
           <div class="photo"><div class="photo1"></div></div>
           <ul class="details">
                      <li class="author"><a href="#">copypet</a></li>
                      <li class="date">2018.06.21</li>
                      <li class="tags">
                                  <ul>
                                             <li><a href="#">css</a></li>
                                             <li><a href="#">html</a></li>
                                  </ul>
                      </li>
           </ul>
           <div class="description">
                      <h1>記事タイトル</h1>
                      <h2>サブタイトルやキャッチコピーなど</h2>
                      <p class="text">テキストテキストテキストテキストテキストテキストテキスト...</p>
                      <a href="#">Read More</a>
           </div>
</div>