webサイト制作の勉強|2017月7月クラスブログ

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

Google検索の仕組み|概要

www.google.com Google Partners Google Partners プログラムは、AdWords アカウントを管理する広告代理店やオンライン マーケティング コンサルタントなど、ウェブ プロフェッショナルの方々に、Google との関係を最大限に活用していただくためのプログラム…

今のトレンドを知る

photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net

第5回実技試験 レスポンシブデザインサイトの作成

【問01】レスポンシブサイトに必要な記述をし作成しなさい。【問02】flexboxレイアウトモジュールを最低2箇所以上で使用すること。【問03】ロゴをSVG画像で制作ですること。【問04】stroke-dasharrayとstroke-dashoffsetを使ったアニメーションを作成するこ…

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。 それにより、フェルタ毎に複数の画像を用意する必要がなくなります。 cssのfilterプロパティで出来る事 grayscale(グレースケール) saturate(彩度) sepia…

illustratorでロゴを制作する

helpx.adobe.com

SEOに適した無限スクロールの制作

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

Fetch API を使ってみる

svgデータを外部化するためにsvgファイルをFetchAPIを使って呼び出します。 var box = document.getElementById("box") fetch("logo2.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

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

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

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

PHP

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

画像をアップロードする

PHP

ヒアドキュメント

PHP

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

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

PHP

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

コーポレートサイトのトレース|ナビボタン

<html lang="ja"> <head> <meta charset="utf-8"> <title>コーポレートサイトのトレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/wideslider.css"> </link></link></meta></meta></head></html>

header部分の制作

今回のスライドショーの主なポイントブラウザー幅一杯にスライドを表示させる 左右の画像は半透明のブラーがかかっている レスポンシブサイトなので、フリックにも対応 レスポンシブ対応サイト制作wideslider版 black-flag.net

htmlspecialcharsとENT_QUOTESの設定

PHP

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

PHP演習問題

PHP

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

既存サイトのトレース

<html lang="ja"> <head> <meta charset="utf-8"> <title>キリントレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $(function(){ $('.m…</link></meta></meta></head></html>

チェックボックスの値を配列で渡す

PHP

<html lang="ja"> <head> <meta charset="utf-8"> <title>複数選択可の項目があるフォームの作成</title> <style> html,body,h1,dl,dt,dd { margin:0; padding:0; line-height:1.0; } form { width:60%; margin: 100px auto 0; } dt { width:30%; float:left; margin-bottom:40px; font-weight:bold; } dd { margin-left:30%;…</meta></head></html>

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

for文を使ったセレクトボックスのフォーム

PHP

入力画面 input.html <html lang="ja"> <head> <meta charset="utf-8"> <title>セレクトボックスの入力画面</title> <style> html,body,dl,dt,dd { margin:0; padding:0; } form { width:600px; margin: 100px auto 40px; } dl { width:100%; overflow:hidden; border: 1px solid #333; } dt { float: left; width:30%; bord…</meta></head></html>

Illustratorでロゴを作る

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…

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

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

jQueryでのcookieの指定

jQueryでのcookieのコントロールにはプラグインを使用するのが便利です。 github.com <script> $(function(){ if($.cookie("access")){ $('.box').css({display:'none'}); } else { $('.box').delay(2000).fadeOut(2000); }; $(window).load(function(){ $.cookie("a</script>…

PHPでのif文

PHP

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

Illustratorで放射状のオブジェクトを作る

よくバナーなんかで見る、放射状の背景。こんなやつです。 http://retrobanner.net/archives/6923 http://retrobanner.net/archives/6895 作り方は色々なやり方がありますが、1番簡単なのは楕円を線のみにして、「線幅」と破線の「線分」と「間隔」で調整す…

PHPでの日付や時間取得

PHP

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

MAMPの設定

PHP

macユーザーはxamppの替わりにmampを使いましょう。 www.mamp.info ポートの設定は他のアプリケーションとバッティングしていなければ「8888」で問題無いでしょう。 インストールの後にDreamweaverの設定をしましょう。 www.webdlab.com

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にデータが表示されてしまい、誰からでも見る…