webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

PHP演習問題

PHP

問1 現在の年月日をPHPで記述し、ブラウザに表示させなさい。その際に曜日も一緒に表示させなさい。例:2019年1月21日月曜日 問2 数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい 問3 九九の表をPHPで繰り返し文で記述し、ブラ…

既存のバナーのトレース

PHPでのif文

PHP

if文を使うことで、プログラムの結果を分岐する事が出来ます。例えば 値が〇〇以上であれば、Aルート値が〇〇以下であれば、Bルートというように、ある条件をもとにルートが分岐する事を条件分岐といいます。 if文の書き方 if (条件) { 条件が真であれば実行…

var_dump

PHP

var_dumpとは変数の情報を表示する関数です。 値の他にその変数の型やバイト数などの詳細な情報が表示されます。値が複数代入される配列にも使用することができます。 PHPには様々なデータの型があり、データベースを使う上ではデータ型が非常に大事になって…

illustratorのアピアランス機能を使ったPOP作成

文字の加工 素材 http://yachin29.com/school/pop-ai.zip Illustratorチュートリアル helpx.adobe.com

データをフォームからデータベースに保存する

PHP

今回はブラウザー上のフォームで入力したデータをデータベースに自動保存出来るようにします。まずはXAMPPに新しいデータベース「form」を作ります。 その次に以下の内容でテーブルを作成。 カラムを作る際には、そのカラムのデータ型に注意しましょう。・主…

トンマナを合わせたバナー作り

トンマナ とは、「トーン&マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要で…

iPhoneの仕様に対応したresize設定

iPhoneとandroidではresizeイベントの定義が若干違く、iPhoneでのresizeは横だろうが縦だろうがスクロールするとrisize判定がされてしまうので、iPhone用に横幅のみresize判定が取れる様にします。 横幅のみに対応したresizeイベントの記述 $(function(){ va…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

数字の羅列を無効にする

一部のスマートフォンでは数字の羅列を電話番号として認識してしまうので、以下のmetaタグをhead内に挿入しましょう <meta name="format-detection" content="telephone=no"> そして実際に電話番号として認識させたいリンクに対して <a href="tel:0300001234">お電話はこちら</a></meta>

ヒアドキュメント

PHP

PHPで何行にも渡る長い文章を出力する場合、以下のように echo を使って改行文字を出力すれば実現できます。 ですが、ヒアドキュメントを使うと、改行など自由に使ってテキストを出力させる事が出来る。また、長い文字列を変数に代入する際にも使用します。 …

メールフォーム(データベースに接続してないバージョン)

PHP

メールフォーム(データベースに接続してないバージョン) 今回のメールフォームは非常にシンプルでデータベースには接続せず、フォームを記入してくれた人とフォームの管理者(自分)に、フォームに記入された内容がメールで届くようになっています。 mb_se…

お問い合わせフォーム|入力画面に戻る

PHP

入力画面に戻る 何か入力ミスをして、入力画面に戻った際に入力内容が全て消えていると、また最初から記入する必要があります。入力画面に戻った際に入力したデータが保持されていれば、訂正したい箇所だけ直してまた送信する事が出来ます。細かい事ですが、…

PHPでのセッション

PHP

セッション(session)とは セッションとは、コンピュータのサーバー側に一時的にデータを保存する仕組みのことです。たとえば、あるECサイトへのログイン情報やユーザー情報など、ユーザーに直接紐づくようなデータをセッションに格納して使ったりします。 …

input要素にcssを適用させる

フォームで使用するinputやtextareaなどの要素は他の要素に比べて、ブラウザやデバイスのデフォルトのスタイルシートが多く指定されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウザやデバ…

フォームのパーツにアニメーションを追加する「pretty checkbox」

チェックボックスやラジオボタンにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるラリブラリ「pretty checkbox」。 角を丸くしたり、カラーをつけたり、アニメーションをclassを加えるだけで簡単に実装できます。 lo…

PHPでのfor文

PHP

基本的にはJavascriptと同じですが、phpの場合はお問い合わせフォームなどと一緒に使う事が多いので「for文で生成した値をpostで送る」という所までしっかりと覚えましょう。 0〜9までを表示 for($i = 0; $i < 9; $i++){ echo $i; } これをselectタグを使っ…

htmlspecialcharsとENT_QUOTESの設定

PHP

特殊文字をブラウザで文字列として表示させるには htmlspecialchars 関数を使用します。これを使用すると、各文字列が <、>、&、" に変換されて返されます。 さらに続けて ENT_QUOTES と書くと、' (シングルクォート)も ' に変換されて返されます。この処…

cssだけでハンバーガーメニューを作る

授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。 また、細かい要素の指定方法が必要になるので、 「~」で同じ階層の後ろに並…

PHPのinclude関数を使って外部ファイルを読み込む

PHP

include関数を使う事でhtmlファイルをテンプレート化する事が出来ます。ページ数が多いサイトやコンテンツが増えていくようなwordpressなどのCMSでは必須の技術です。 include関数の使い方 外部ファイルを読み込ませたい箇所で、include関数を記述します。 …

position:stickyを使ってナビゲーションを固定する

「position: sticky」を使う事で数行のCSSでスクロールに応じて要素を固定表示することができます。たとえば、ページの途中にある要素がスクロールして最上部に来た際に固定できます。 非常に便利なcssですが、新しいプロパティなのでブラウザー対応を含めて…

PDFをIllustratorから書き出す

ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。 IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまう…

PHPでの日付や時間取得

PHP

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列) 2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ) timezoneの設定 本…

time関数とstrtotime関数

PHP

UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時(UTC)での1970年1月1日(午前0時0分0秒)からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtoti…

レスポンシブイメージの設定

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

レスポンシブサイトの画像指定まとめ

まずはサイト制作の原則としてimg要素で挿入する場合と背景画像で表示させる場合との違いを理解しましょう。 img要素 そのサイトに必要な情報としての画像はimg要素で挿入するべきです。 メリット 画像として検索エンジンにインデックスされるので、画像検索…

PHPの記述方法

PHP

PHPファイルは「.php」という拡張子をつけることで、PHPファイルであることをコンピューターが認識してくれます。(例 index.php) PHPを記述する場合、 と書く事でブラウザーにテキストを出力する事が出来ます。 html内に記述する場合は <html> <head> <title>基本的なPHPの</title></head></html>…

GETとPOSTの違いと使い分け

PHP

PHPでは情報を別のデータに受け渡すときにGETとPOSTの2つの方法(メソッド)が使われます。 GET GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、URLにデータが表示されてしまい、誰からでも見る…

PHPとは

PHP

PHPとは? HP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…

@font-faceを使ったWebフォントの使い方

webフォントには大きく分けて2種類の使い方があります。 1つはGoogleFontのようにネット上にあるCDNを使うパターンです。 今回は、もう1つの、「自身でフォントデータをサーバーにアップする」方法をやってみましょう。こちらの方法を使えば、GoogleFontに…