[第7回] phpからはじめるプログラミング :if構文

if構文で数字を分類してみる。

奇数なら、「奇数です。」、偶数なら、「偶数です。」と表示されるようにする。

if構文はこのような形で書きます。
条件にあっていれば、{やってほしいこと}を実行します。
条件に合わなければ、何もしません。

次に、「奇数ならば」「偶数ならば」という条件を式に直してみます。

偶数は、2で割り切れる数ですね。
つまり、2で割ったら、余りが0です。

%(数字)は、その数字で割ったときの余りを計算します。
ここでは、$iを2で割ったときの余りという意味です。
このあまりが0なら、偶数ということですね。

では、if構文で書き直します。

ここで、少し簡潔に書く方法を説明します。

今は、「奇数ならば」と「偶数ならば」で{やってほしいこと}を分けました。
でも、ある数字が奇数ではなかったら、その数字は偶数に決まってますよね。
なので、こんな風に書き換えることができます。

if構文の説明は以上です。
自分でいろいろ場合分けしてみてください。

まずは言葉で考えて、それを式に直しましょう。

[第6回] phpからはじめるプログラミング :for文を使う。

九九の3の段を表示するには?

(かける数)を変数とするところまでは説明しました。
(かける数)=1~9ですね。
変数 a をかける数として置き換えます。

でもこんな書き方じゃだめです。僕らは理解できますけど、パソコンは理解してくれません。

これでもだめです。結局最後の「変数aに9をいれる」という処理で、aには9しか入っていません。プログラムは上から順番通り処理してるので。

ここでfor文です。

for文の機能は?

「同じことを繰り返す」です。

これがだいたいの書き方です。

これでもまだだめです。
ちょっと先に補足説明をします。

どうですか?次第にプログラムらしい文字が増えてきましたね。
わからなくなったら、しっかり読み直してください。
ここをほうっておくと、この先には進めません。

説明します。for文は、
for(条件A;条件B;条件C){やってほしいこと}
という構造になっています。

まず条件Aの部分。$aには1が入りました。($a=1)

つぎに、条件Bが正しいとき、$a<10つまり、$aが10より小さいとき)に、{やってほしいこと}を実行します。
今は、$aには1が入っているので、{やってほしいこと}をします。

{やってほしいこと}が終わったときには、条件C、つまり$aに1を足して、それを$aに入れることをします。

なかなか慣れない書き方ですが、$aに$a+1をいれるという意味です。
$a = 1は、$aに1を入れるという意味だったので、同じですね。ちょっとややこしく見えるだけです。

今は、$aに1が入っているので、頭の中では、$a = 1 +1 という感じです。つまり1つ足したものを入れる、ということで、1つずつ増やすということを表しているわけです。

そして、$aは1ずつ増えていくので、あるとき $a<10 という条件にあわなくなります。そしたら{やってほしいこと}はせずに、終わります。

[第5回] phpからはじめるプログラミング :変数に値を代入する。

変数の書き方

ちなみに、前回も書きましたが、変化しないものを変数とするのは意味がありません。
なので、この例で a に10を入れましたが、あんまり使い道はありません。
この例は単に、変数の書き方のお作法です。

これはダメな書き方です。
パソコンは、1~9という書き方では許してくれません。

これもだめです。上から順にパソコンが処理していくので、「変数aに1を入れる」をしたあとに、 「変数aに2を入れる」と順々に処理をしていきます。
最後に残るのは、9だけです。

なので「3×(変数a)」だけで、九九の3の段を書くのは今のところ無理です。これでは、「3×9」になってしまいます。不便ですね。

なので、もっと別の書き方をしないといけません。

というわけで次は、for文です。

[第4回] phpからはじめるプログラミング :変数ってどんなところで使うの?

変数の使い道

前回は、九九を使って変数の説明をしました。

ここまでが前回の概説です。

では、変数の使いどころはどこかと考えます。
Amazonや楽天のショッピングサイトを例に挙げます。

ショッピングサイトでは、ログインすると「ようこそ、○○○さん」とか「○○○さんのポイントは、いくらです」と表示されます。

このように名前を変数にしておいて、表示するときは、実際の名前が出力されるようにすれば便利ですね。

まあ、いろいろ変化する数や、文字を変数にしておくと便利だということです。

教科書でよく見かけますが、これは全く意味のない変数です。
「これで、こんにちはと何度も書かずに済む」と説明されるのですが、何度も変数を書いているため、本質的には何も変わっていません。コピペするので、手間としては、こんにちはでも、変数Aでも変わらないですよね。

変化するから、変数にするのです。変化しないものを変数に置いても意味がありません。

[第3回] phpからはじめるプログラミング:変数

変数って何?

変数は、文字通り、「変化する数」のことです。

ここで変化している数字は、かける数ですね。
「×1」、「×2」、「×3」と続いて、最後は「×9」になります。答えもそれにあわせて増えていきます。

別にこのままでもいいんですけど、書きやすいように、(かける数)をAという文字に置き換えます。

上の例でいう、AやBを変数と呼びます。

一方、かけられる数の3は、ずっとそのままです。
こちらは、定数といいます。一定ですから。

[第2回] phpからはじめるプログラミング :関数とは

前回わからなかったところ

前回書いたのは、上のようなコード。
では、書き方を見ていく。

まず、「<?php?>」が、「ここがphpですよ」という合図です。
なので、どんなプログラムでもこれは書かなきゃいけない。
「<?php」と「?>」の間を空けてるのは、単に書きやすいからです。

次は、<?php?>の中身です。
これは、エコー関数といいます。

「echo」と書いて、「’ ‘」(←シングルクオーテーション)で囲みます。
そして、最後に「; 」(←セミコロン)を書きます。セミコロンは忘れやすいので注意してください。
あとは、表示したい文字列をシングルクオーテーションの間に書けばOKです。

じゃあ、関数ってなんなの?

関数は、英語で言うと「function」です。
functionは、ふうつは「機能」という意味です。「関数」は数学の用語ですね。
なので、echo関数は、エコー機能とも言い換えられます。

じゃあ、エコー機能はどんな機能なのか。

エコー機能は、「’ ‘」(シングルクオーテーション)の間の文字を表示する機能です。

なので、なんとか関数とあったら、「何かしらの機能があるんだな」と思っていれば問題ありません。

[第1回] phpからはじめるプログラミング :ブラウザに表示させてみる。

ローカル環境の設定

環境の設定は、他のサイトを参考にしてください。
僕も調べたとおりに設定しただけなので解説はできないのです。すまぬ。

とりあえずブラウザに表示してみる

これで、画面には「こんにちは。」と表示される。
echoは、関数の一つだけど、まだ深く考えなくていいみたい。
とりあえず、表示されたらいい。

[自習] HTML5で定義されている全要素一覧

 要素名 役割と意味
 a リンク
abbr 略語
address 連絡先
 area  イメージマップの領域
article そのセクションだけで完結しているセクション
aside メインコンテンツ外のセクション
audio 音声データ
b 注目してほしい部分
base 相対パスとなるURL
bdi 双方向テキストから分離/独立させる範囲の設定
bdo  文字表記の方向
blockquote ブロックレベルの引用文
body  Webページの内容全体
br 改行
button ボタン
canvas ビットマップの動的グラフィック
caption 表のキャプション
cite 作品タイトル
code ソースコード
col 表の縦列
colgroup 表の縦列のグループ
data コンピュータが読み取り可能な形式の属性値付きデータ
datalist input要素の選択肢
dd dl要素の文章部分
del あとから削除された部分
dfn 定義の対象となっている用語
div ブロックレベルでのグループ化
dl 「名称」とそれに関連する「文章」のリスト
dt  dl要素の「名称」部分
em 強調
embed プラグインによるデータの組み込み
fieldset フォーム関連部分のグループ
figcaption 図版のキャプション
figure 図版
footer フッター
form フォーム
h1 大見出し
h2 中見出し
h3 小見出し
h4 見出し4
h5 見出し5
h6 見出し6
head ページ情報
header ヘッダー
hr 段落レベルでの内容の変わり目
html ルート要素
i イタリック体
iframe インラインフレーム
 img 画像
input フォームの入力・選択用部品のボタン
ins あとから挿入された文字
kbd ユーザーが入力する文字
keygen 公開鍵、秘密鍵の生成用フォーム部品
label フォーム関連部品のラベル
legend fieldset要素のキャプション
li リスト項目
link 関連ファイル
main メインコンテンツ
map クライアントサイドイメージマップの定義
mark 参照箇所を示すためにハイライトを表示する
meta メタ情報
meter メーター
nav 主要なナビゲーションのセクション
noscript スクリプトが動作しない環境向けの内容
object オブジェクト(様々な形式のデータを組み込む)
ol 番号付きのリスト
optgroup メニューの選択肢のグループ化
option メニューの項目
p 段落
param object要素のパラメーター
pre 整形済みテキスト
progress プログレスバー
q インラインでの引用文
rb ルビを振る対象のテキスト
rp  ルビが表示できない環境でフリガナの前後につける括弧
rt ルビのフリガナのテキスト
rtc rt要素のグループ化
ruby ルビ
s 正しくなくなった部分、関連がなくなった部分
samp 出力サンプル
script スクリプト
section 一般的なセクション
select メニュー
small 一般に小さな文字で示されるような付帯情報部分
source audio要素またはvideo要素の代替データ
span インラインでのグループ化、範囲の設定
strong 重要な部分
style スタイルシート
sub 下付き文字
sup 上付き文字
table
tbody 表の本体
td 表のセル
template 内容をスクリプトで挿入する範囲
textarea 複数行のテキスト入力欄
tfoot 表のフッター
th 見出し用の表のセル
thead 表のヘッダー
time 日付、時刻
tr 表の横一列
track audio要素、video要素に同期させるテキストトラック
u 慣用的に、下線付きで表示される部分
ul 番号なしのリスト
var 変数
video 動画データ
wbr 単語内の改行可能な位置

[自習] メディアクエリ

[2015-04-18]

メディアクエリ各種

メディアタイプの種類

メディアタイプ メディアの種類
screen 一般的なディスプレイ
print 印刷
handheld 携帯電話
projection プロジェクタ
tv テレビ
tty 文字固定デバイス
braille 点字ディスプレイ
embossed 点字プリンタ
speech 音声

画面の向きや大きさで適応CSSを変化させる

max-widthやmin-widthなどのプロパティを使用すると、出力デバイスの大きさによって、適応CSSを変更することができる。

 

@mediaのプロパティ

プロパティ 種類
width 出力デバイスの表示領域の横幅
height 出力デバイスの表示領域の高さ
device-width 出力デバイスの横幅
device-height 出力デバイスの高さ
orientation 出力デバイスの横置き、縦置きを指示
aspect-ratio 出力デバイスの縦横比
color
color-index カラー検索テーブルのエントリ数
monochrome 白黒での階調ビット数
resolution 解像度
scan TV出力の走査方式
grid 出力デバイスが、グリッドかビットマップかを指定