今日学んだこと～PHP～
今日は、PHPの勉強をしました。
今日も関数などをまとめていきます。
★PHPの関数
「imagecreatetruecolor」・・・画像を新規に作成。
「imagecolorallocate」・・・画像の色の情報(色のID)を作成。
「imagestring」・・・文字列を水平に描画。
「imagejpeg」・・・画像をブラウザに出力、またはファイルに出力。
「imagedestroy」・・・画像のメモリを解放。
「imagecreatefromjpeg」・・・JPEG画像ファイル(URL)から画像を作成。
「getimagesize」・・・画像の大きさを配列で取得。
「imagecopyresized」・・・画像を別の画像にコピーしてサイズを変更。
「setcookie」・・・Cookieをクライアント側に送信する。
「isset」・・・調べる変数に値がセットされているかどうかを調べる。
「session_start」・・・新規のセッションを開始、または継続する。
「session_destroy」・・・セッションに関するデータを破棄する。
「htmlspecialchars」・・・文字列に含まれるタグなどをタグでない別の文字列に変換する。
「preg_match」・・・正規表現と一致しているかチェックする。
「md5_file」・・・ファイル名からMD5のハッシュ値を計算。
「sha1_file」・・・ファイル名からSHA1のハッシュ値を計算。
★プリペアドステートメントで使うメソッド
「prepare」・・・executeメソッドで実行するSQL文を発行する。
「bindParam」・・・プレースホルダに実際の値を持つ変数をバインドする。
「execute」・・・プリペアドステートメントを実行する。
以上です！
今日学んだこと～PHP～
今日は、PHPの勉強をしました。
今日も、関数をいくつかまとめていきたいと思います。
★PHPの関数
「die」・・・()内を表示してスクリプトの実行を中止する
「my_select_db」・・・データベースを指定する
「mysql_query」・・・クエリを発行する
「mysql_fetch_array」・・・SELECTなどの結果セットを配列として返す
「require_once」・・・ファイルを一度読み込み、読み込めない時は処理を中止
「mail」・・・電子メールを送信する
「mb_send_mail」・・・電子メールを送信する(マルチバイトに対応)
「mb_language」・・・使用する言語("Japanese"など)を指定する
「mb_decode_mimeheader」・・・MIMEでデコード(復号)する
「mb_convert_encoding」・・・文字コード(文字エンコーディング)を変換する
「base64_encode」・・・base64でデータをエンコードする
「move_upload_file」・・・アップロードされたファイルを別の場所に移動
「header」・・・指定したHTTPヘッダを送信する
「readfile」・・・指定したファイルをクライアントに出力する
「dir」・・・指定したディレクトリのオブジェクトを返す
「mkdir」・・・ディレクトリを作成する
「is_dir」・・・ディレクトリの存在を調べる
「copy」・・・ファイルをコピーする
「is_file」・・・ファイルの存在を調べる
「unlink」・・・ファイルを削除する
「rename」・・・ファイル名を変更
「fopen」・・・ファイルを指定したモードで開く
「fgets」・・・ファイルから1行読み込む
「fwrite」・・・ファイルに文字列を書き込む
「fclose」・・・ファイルを閉じる
「getenv」・・・環境変数の値を取得
★MySQLの関数
「SUM」・・・指定したカラムの値を合計する
「AVG」・・・指定したカラムの値の平均値を計算する
「REVERSE」・・・指定したカラムの文字列を逆から表示する
「CONCAT」・・・引数に指定した複数の文字列を連結する
「NOW」・・・現在の日時情報を返す
「VERSION」・・・MySQLのバージョンを返す
以上です！
今日学んだこと～PHP～
今日はPHPの勉強をしました。
今日は、簡単な掲示板づくりだったので、関数を幾つかまとめていきたいと思います。
★PHPの関数
「nl2br」・・・文字列に改行が含まれる場合、改行コードの前に<br>を挿入する。
「define」・・・定数を定義する。
「time」・・・現在のタイムスタンプを取得する関数。
「date」・・・タイムスタンプを日時の書式のフォーマットで返す。
「printf」・・・フォーマット文字列の形式の文字列を変換指定子の値で置き換えた文字列を出力する。
「dechex」・・・10進数を16進数に変換する。
「round」・・・引数を四捨五入する。
「mb_internal_encoding」・・・内部文字エンコーディングを設定する。
「mb_strpos」・・・文字の位置を調べる。
「mb_substr」・・・対象の文字列の開始位置から文字数分の文字列を返す。
「mb_strrchr」・・・対象となる文字列から探す文字を探し、その前(もしくは後)の文字を取り出す。
「mb_strlen」・・・文字数を調べる。
「mb_convert_kana」・・・オプションに従って様々な変換を行う。
「mb_strtoupper」・・・小文字のアルファベットを大文字に変換する。
「mb_strtolower」・・・大文字のアルファベットを小文字に変換する。
「mb_convert_case」・・・オプションに従って、大文字・小文字の変換を行う。
「str_repeat」・・・文字列を繰り返す。
「list」・・・配列の要素と同じ順番で、値を[変数0]、[変数1]…に代入する。
「print_r」・・・$変数の内容を表示する。
以上です！
【今日学んだこと】HTML CSS Webデザイン
今日はWebデザインの勉強をしました。
今日の内容をまとめていきたいと思います。
★今日の内容
■YouTube動画を挿入する
○YouTube動画のコードを取得
まずはYouTubeのWebサイトから掲載したい動画を表示させる。動画の下にある「共有」ボタンをクリック。
表示されたパネルで「埋め込む」をクリックする。
「動画の埋め込み」として出てきたコードをコピーし、HTMLに貼り付ける。
動画の再生開始する位置を変更するには「開始位置」にチェックを入れ、何分何秒から開始したいかを入力。
■レスポンシブに対応させる
地図とSNSの部分をスマートフォンでも見やすいようにメディアクエリーを使って調整する。
○メディアクエリーで縦並びに
CSSのメディアクエリーを使って、スマートフォンサイズでは要素を縦並びにする。
Flexboxを使って横並びにしたので、「display: flex;」を指定したのと同じ要素に「flex-direction: column;」を追加。
幅も「100%」とし、画面いっぱいに要素が広がるようにする。
■OGPの設定をする
SNSで多くの人にWebサイトを見てもらうためにはコツもある。
シェアされたときに大きく見た目が変わるOGPの設定をする。
○OGPとは
OGPは「Open Graph Protocol」の略で、SNSでWebサイトがシェアされたときにWebページのタイトルや説明文、画像などの情報を正しく伝えるための仕組み。
OGPの設定があるのとないのとでは、見え方が大きく変わる。適切に設定することで、より多くのユーザーにWebサイトを見てもらいやすくなる。
○OGPの設定をする
OGPはHTMLファイルの「head」内に指定の<meta>タグを記述することで設定することができる。
◆主な設定項目
og:url・・・WebページのURL
og:type・・・ページの種類。websiteまたはarticleを指定
og:title・・・Webページのタイトル
og:description・・・Webページの説明文
og:image・・・シェアされた時に表示させたい画像のファイルパス
Facebookは画像サイズを横1200px、縦630pxを推奨している。事前にSNS上で表示したい画像を用意しておく。
OGPには他にも多くのオプション設定がある。必要であれば公式ドキュメントページを見ながらカスタマイズする。
○Facebookで確認する
きちんと設定できているかは実際にSNSに投稿してみれば分かるが、何度も投稿するのは気が引ける。
そんな時は公式の確認ツールを使うとよい。WebページのURLを入力し、「デバッグ」ボタンをクリックすると設定されている項目が表示される。
エラーがある場合はその箇所を指摘してくれる。
最初にチェックするときは「新しい情報を取得」ボタンをクリック。
○Twitterで確認する
Twitterでも同様に公式の確認ツールが用意されている。
WebページのURLを入力し、「Preview card」ボタンをクリック。
◆Twitterでのオプション設定
Twitter用にもオプション設定が用意されている。画像の表示方法のカスタマイズや、Twitterユーザー名の記載が可能。
必要であれば公式ドキュメントページを参考に設定する。
■外部メディアのカスタマイズ例
外部メディアでは決められたデザインがそのまま反映される。
カスタマイズ性は低いが、出来る範囲で自分好みのデザインに変更することもできる。
○Googleマップをカスタマイズする
Googleマップは比較的カスタマイズしやすい外部メディアです。
コードを触る必要もないので、クリックしながら手軽に始められる。
◆Googleマイマップの作成
まずはGoogleマイマップのページにアクセスする。
Googleアカウントにログインしていなければログインし、[新しい地図を作成]ボタンをクリックしてスタートする。
デフォルトでは「無題の地図」と書かれているので、そこをクリックしてタイトルや説明文を書く。[保存]をクリック。
続いて地図に表示させたい住所を入力し、検索する。するとその場所にマークがつく。
[地図に追加]をクリックすると場所が確定される。
◆アイコンを変更する
「スタイル」アイコンをクリックする。ここからアイコンの色や種類が選択できる。
スタイルをクリックするとカラーパレットや人気のアイコンが表示される。
スタイル内の「他のアイコン」ボタンをクリックすると、さらに多くのアイコンから選べるようになる。
アイコンを好みの画像に変更することもできる。他のアイコン内、左下の「カスタム アイコン」ボタンをクリックして表示させたい画像をアップロードする。
◆地図のスタイルを変更する
続いて地図全体の色を変更する。「基本地図」と書かれたところの下向き矢印をクリック。
「地図」「航空地図」「地形」「行政区域」「モノクロ都市」「シンプルな地図」「大陸(薄色)」「大陸(濃色)」「水域白表示」の9つのスタイルから選択できる。
◆地図を表示させる
デフォルトでは作成した地図が非公開設定になっている。誰でも閲覧できるよう公開範囲を変更する。
「共有」をクリックし、「アクセスできるユーザー」を変更する。
「リンクの共有」で、「オン - ウェブ上で一般公開」を選択し、保存する。
続いてHTMLの書きこむためのコードを取得する。マイマップのタイトルの右側にある3つの点をクリック。
「自分のサイトに埋め込む」をクリックすると埋め込みコードが表示される。これをHTMLファイルの表示させたい箇所に貼り付ければ完成。
以上です！
【今日学んだこと】HTML CSS Webデザイン
今日は、Webデザインの勉強をしました。
今日の内容をまとめていきたいと思います。
★今日の内容
■地図を表示する
地図はGoogleが提供している地図サービスである「Googleマップ」を埋め込んて使う。
○お店の情報を記述する
HTMLの<div id="contact" class="big-bg">の部分と「footer」の間に「location」というIDのついた<section>タグを追加しする。
そのなかの「location-info」クラスの付いた<div>タグの中にお店の情報を書く。
住所や電話番号などは<br>タグで改行させる。
地図を表示させるエリアは「location-map」というクラスの付いた別の<div>タグ内に書く。
○Googleマップを表示する
地図はGoogleマップを使用。
まずGoogleマップのWebサイトで表示したい場所の住所を入力。「共有」ボタンが表示されるのでクリック。
続いて表示されるパネルで「地図を埋め込む」をクリック。
コードが表示されるので、サイズを指定して、HTMLの表示したい箇所に貼り付け。
○見栄えを整える
お店の情報と地図が並んでいるので、CSSのFlexboxを使って横に並べる。各要素の幅や余白も調整する。
Googleマップを囲っている<iframe>タグが表示エリアからはみ出してお店の情報に重なっているので、幅を「100%」にしてきちんと収まるようにする。
■Facebookプラグインを挿入する
ページ下部にはFacebook、Twitter、Youtube動画を表示させる。
まずはFacebookプラグインから挿入。
○SNS部分のレイアウトを組む
HTMLで最初にそれぞれの埋め込みコードが入るボックスを作っておく。
地図を表示する<section id="location">の下に「sns」というIDのついた<section>タグを用意する。
その中にそれぞれのSNS用に「sns-box」というクラスの付いた<div>タグを書く。
CSSで背景色をつけたり、Flexboxで横並びの設定をする。
○Facebookプラグインのコードを取得
Facebookのページプラグインを生成するページにアクセスし、項目を設定する。
設定が終わったら下の「コードを取得」ボタンをクリックする。
表示されたパネルの上部にある「iFrame」タブをクリックする。
表示されたコードをHTMLの貼り付ける。
このままではレスポンシブには対応していない。
■Twitterプラグインを挿入する
○Twitterプラグインのコードを取得
Twitterプラグインの生成ページを開くと「Enter a Twitter URL」と書かれた入力欄が表示される。
そこにTwitterのURL(twitter.com/アカウント名)を入力、enterキーを押す。
Here are your display optionsの画面になり、何を表示させたいかを選べる。「Embedded Timeline」をクリック。
コードが表示されるが、サイズをカスタマイズするため「set customization options」リンクをクリック。
変更が完了したら、「Update」ボタンをクリック。コードが表示されるので、コピーしてHTMLに貼り付け。
このままでレスポンシブに対応している。
以上です！
【今日学んだこと】HTML CSS Webデザイン
今日はWebデザインの勉強をしました。
今日内容をまとめていきたいと思います。
★今日の内容
■タイル型レイアウトのカスタマイズ例
〇サイズが違う要素を配置する
「同じ大きさで配置していた要素の中で、特に目立たせたい」という部分のみ大きく表示してみる。
◆HTMLにクラスを追加
HTMLに大きく表示したい要素へ新しく「big-box」というクラスを追加。
この例では最初のメニューを大きく表示する。
◆大きいサイズのグリッドアイテムを指定
グリッドアイテムの範囲を指定する。
縦・横に並ぶグリッドラインをベースに範囲を指定する。
使用するプロパティは横の範囲を「grid-column」、縦の範囲を「grid-row」で指定する。
今回は横の範囲をグリッドラインの1～3番目を指定するので、「始まりのライン / 終わりのライン」というようにスラッシュで区切って「grid-column: 1 / 3;」と記述する。
同様に縦のラインも1～3番目を指定するので、「grid-row: 1 / 3;」と記述する。
〇画像の高さを揃える
大きい画像と小さい画像の高さがそろっていないので、画像に対してサイズを指定する。
〇画像をトリミングする
前のcssの指定ではimgに無理やりサイズを加えたため、画像が少し歪んでしまった。
これは、もとの画像が指定したサイズより横長だから起こる現象。
これを調整するために、指定したサイズからはみ出した部分を自動的にトリミングしてくれるobject-fitプロパティを使うと便利。
〇レスポンシブに対応させる
スマートフォンサイズで見ると、メニュー同士がちぐはぐな大きさで並べられている。
指定した「grid-column」や「grid-row」の値を「auto」にして解消し、画像の高さも「100%」を指定して元に戻す。
スマートフォンサイズではメディアクエリーを使って指定した範囲やサイズを元に戻す。
■お問い合わせページの制作の流れ
「CONTACT」ページではフォームの装飾のほか、Googleマップや各種SNSのプラグインを表示。
〇作成するページ
ページ上部では大きな背景画像とともにお問い合わせフォームを表示させる。
真ん中にはお店の情報と地図、そして下部にはSNSや動画を横並びにする。
〇制作の流れ
01.フォームの設置
<form>タグを使って基本的なフォームの部品を表示し、CSSで装飾する。
02.地図を表示する
お店の情報の横にGoogleマップを設置する。
スマートフォンでは情報と地図を縦に並べて見やすくする。
Googleマップや各種SNSを掲載するには、それぞれのコードを生成してHTMLファイルに書く。
03.Facebookプラグインを挿入
FacebookのタイムラインをWebサイト上に表示するため、コードを生成してHTMLファイルに記述する。
04.Twitterプラグインを挿入
Twitterのタイムラインを表示させるよう、コードを生成して設置する。
05.Youtube動画を挿入
Youtube動画を1つ、Webページ上に表示させる。
06.レスポンシブに対応させる
メディアクエリーを使って横並びににている地図やSNSプラグインを縦に並べる。
■フォームを設置する
「CONTACT」ページ上部では、大きな背景画像の上にお問い合わせ用のフォームを設置する。
〇ファイルの準備をする
「menu.html」を複製し、複製したファイル名は「contact.html」という名前で保存。
〇HTMLを編集する
共通部分は残し、必要な個所は編集していく。
◆「head」内の「title」を編集
お問い合わせページ用のタイトルに変更。
◆不要なコンテンツでを削除する
「MENU」ページのコンテンツであるページ上部の紹介文の部分と、メニューの一覧はこのページで不要なので削除。
◆ID名を変更
「menu」とつけていたIDを「contact」に変更。
◆見出し部分を追加
「header」の下にお問い合わせフォームを追加。
<form>タグの中に入力欄を<input>タグと<textarea>タグで記述し、id属性をつける。
それぞれのラベルは<label>タグで囲み、for属性をつける。
このfor属性とid属性の値を同じものにして関連付ける。
〇CSSで装飾する
◆背景画像を表示する
まずはフォームの後ろに表示する背景画像を設置する。
◆フォームを装飾する
続いてフォームの各パーツを装飾する。
文字の大きさ、余白のほか、フォームの部品の背景色などを指定する。
<input>タグの各属性は各括弧「[]」で囲んで指定できる。
モバイル版では余白と入力フォームの幅を調整。
〇コンタクトフォームサービスを利用する
実際にメールの受信をするにはPHPなどのプログラミング言語を使う必要がある。
つまりHTMLとCSSだけでは見た目の作成のみ可能ということ。
簡単にお問い合わせフォームが作成できるサービスもある。
以上です！
タッチタイピングの練習(33日目)
タッチタイピングの練習、33日目です。
今日はフルキーボードでアルファベット+数字を打つ練習をしました。
今日のスコアはこちらです。
今日最終スコアは、入力速度110文字/分で、正解率93%でした。
昨日より少し上がったので良かったです。
今までのスコアの変化はこちらです。
明日もフルキーボードでアルファベット+数字を打つ練習をしたいと思います。
