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

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

既存サイトのニュースリリース部分

<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>

input要素にcssを適用させる

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

既存サイトのトレース header部分

<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>

css3ホバーアニメーション

<li><a href="#"> <div class="cap2"> <h2>タイトル</h2> <p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p> <p class="more">詳細</p> </div> </a></li> スタイルシート li:nth-child(2) { background:url(ph01_l.jpg) no-repeat center center/cover; } .cap2 { width:100%; height:100%; background:r…

コーポレートサイトのトレース

header・slider・grid部分 <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>

wordpressのテーマ

http://felica29.starfree.jp/xeory.zip

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

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

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

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

PHP

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

GoogleサーチコンソールとGoogle アナリティクス

Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報(Webサイトの改善案・被リンク数・キーワードなど)やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。 Search Console…

連想配列での受け渡し

PHP

連想配列を使って、バリューの値を受け渡しましょう。input.php <html lang="ja"> <head> <meta charset="utf-8"> <title>フォームで複数選択可の項目を作る</title> </head> <body> <form action="output.php" method="post"> <dl> <dt>好きな食べ物<span>複数選択可</span></dt> <dd> <input type="checkbox" name="food[]" value="0" id="food1"></dd></dl></form></body></html>

ヒアドキュメント

PHP

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

PHPでの配列

PHP

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

var_dump

PHP

var_dumpとは変数の情報を表示する関数です。 値の他にその変数の型やバイト数などの詳細な情報が表示されます。値が複数代入される配列にも使用することができます。 数値の場合 文字列の場合

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

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

wordpressで複数のcssファイルを読み込む

テキストでは、「get_stylesheet_uri()」テンプレートタグを使って、テーマフォルダー内の「style.css」を呼び出していました。 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> get_template_directory_uri()を使用する ただこれはあくまでも「style.css」ファイルを呼び出す方法で、他のcssファイルを追</link>…

オリジナルのバナーを作成してみる

ある程度、バナー作成に慣れて来たら、既存バナーのトレースだけで無く、オリジナルのバナーを作ってみましょう。 作業工程 バナーに記載するテキストを決める。 テキストの優先順位を決め、ジャンプ率などを考慮しながら文字の大きさを決める。 画像を決め…

Contact Form 7 と flamingo の導入

https://ja.wordpress.org/plugins/contact-form-7/ ja.wordpress.org

Photoshopで写真をポラロイド風にする(メゾティント加工)

元画像 Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。 まずはレイアー構造をしっかりと把握…

PHPでのif文

PHP

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

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

PHP

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

レスポンシブデザイン対応のHTMLテンプレート素材

photoshopvip.net coliss.com

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

キービジュアルの作成

現在、wordpressのブログ機能を使って制作しているサイト100選にトップページを固定ページ機能を使って追加していきます。 wpは固定ページの機能をしっかり使えないとただのブログサイトしか制作出来なくなってしまうので、固定ページの機能と組み込み方法を…

2カラム演習

http://felica29.starfree.jp/kcafe/ <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラム演習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <h1>KUJIRA cafe</h1> </header></div></body></html>

htmlspecialcharsとENT_QUOTESの設定

PHP

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

time関数とstrtotime関数

PHP

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

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

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