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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

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

photoshopvip.net coliss.com

header部分の制作

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

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

PHPでのif文

PHP

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

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。http://vegas.jaysalvat.com/ <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' </script>…

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

PHP

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

WordpressをXAMPPからサーバーにデプロイする

授業ではXAMPP環境でWordPressの制作を進めましたが、ポートフォリオ等に載せる為にはWordPressのデータを別サーバーに移行する必要があります。 データ移行用のプラグインなどもありますが、ここでは手作業でデータの移行を行います。 旧WordPressサイト(XA…

googleカレンダーがスマホ時にはみ出してしまう場合の対処法

以前、授業でやったGoogleカレンダーのhtmlの埋め込みですが、レスポンシブ対応にさせる場合、カレンダーの設定によってはスマホ時に画面からカレンダーの右側がはみ出してしまいます。 はみ出してしまう原因はカレンダーの上部にある「印刷」や「月・週」の…

WordPressとは?

WordPressとは WordPressとは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくCMSとしてもしばしば利用されている。 WordPressのテンプレートはすべてPHPである…

time関数とstrtotime関数

PHP

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

PHPでの日付や時間取得

PHP

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

jQueryを記述する上で気をつけるポイント

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…

htmlspecialcharsとENT_QUOTESの設定

PHP

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

jqueryでのresize設定

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲー…

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

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

モックアップの完全版 Facebook+Devices

Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…

PHPの記述方法

PHP

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

PHPとは

PHP

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

XAMPPとMAMPの文字コードとタイムゾーンの設定

PHP

授業ではXAMPP・MAMPを使用してPHPおよびWordpressの授業を進めて行きます。これらを使用する時に気をつけないといけないのが、文字コードの設定です。 XAMPP・MAMP共にドイツで開発されたソフトであるため、初期設定のままだと日本語を使用した時に文字化け…

ページネーション の導入

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com BootStrap CDN v…

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

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

フィルタリング機能とモーダルウィンドウを使ったギャラリー

複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com <html lang="ja"> <head> <meta charset="utf-8"> <title>mix it up</title></meta></head></html>…

フォントサイズを画面幅に応じて可変にする

remを使ったフォントサイズ まずはremを使ったフォントサイズの指定を覚えましょう。 「rem」とは、「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相…

スクロール関連のプラグイン

Animate On Scroll Library michalsnik.github.ioスクロールすると、コンテンツが色々なエフェクトで表示される。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Animate On Scroll Library プラグイン</title> <style> html,body { margin:0; padding:0; } body { background:url(img/main.jpg) no-repeat center ce</meta></head></html>…

画像をイラスト風に加工する

元画像 イラスト風に加工 Video Tutorial: Grand Theft Auto (GTA 5) Effect in Photoshop

画像の補正

トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。 トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント(制御点)を作成しより微妙な部分の調整をおこな…

コーディングルールの設定

複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…

photoshopの描画モードを使う

描画モードを上手に使う事で、様々な合成が出来るようになります。 各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。 psgips.blog24.fc2.com 焼き印のようなロゴを作る 白い台紙とロゴ画像を1つ…

スマートフォンの時だけ<a href="tel:">を有効にする

スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンでは、telリンクを設定していない、ただの文字列もリンク扱いにな…

スマホ時に横スクロールのUIを実装

最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また…