WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

2020年5月クラス

データベース の設定

今回はブラウザー上のフォームで入力したデータをデータベースに保存出来るようにします。まずはXAMPPに新しいデータベースを作ります。 その次にテーブルを作成。 今回はID、名前、メールアドレス、お問い合わせ内容の4つのカラムを作成カラムを作る際には…

PHPでセッション情報をコントロールする

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

Gitのインストールとvs-codeを使ってgithubに自身のリポジトリーを作成

まずは自身のPCに入っているgitのバージョンを確認してみましょう。 コマンド画面で簡単に確認出来るので、コマンド画面で以下のコマンドを入力しましょう。 gitのバージョン確認 $ git --version macは最初からgitがインストールされていますが、windowsは…

2020年5月開講クラス第5回目の試験内容

5回目の試験は先日作成したクライアントワークの報告書を提出してもらいます。 今回の報告書の内容はそのままポートフォリオのコンテンツにもなるので、しっかりまとめておきましょう。 プロジェクトの概要が掲載されているか 制作するサイトの情報が掲載さ…

クライアントワークの企画書の作成

ポートフォリオを見据えて、今回のサイト制作の企画書を作成しましょう。 企画書の構成 1:表紙2:プロジェクト概要 サイトの概要(どういったサイトを作ったか) サイトのURL クライアントの情報 クライアントの要望と要望に対しての答え 3:サイトの情報・構…

スクロールイベントとclip-pathを使ったページ作成

http://school.yachin29.com/sprit-mode/ 今回の作成物のポイント ファーストビュー部分はスプリットレイアウト AOSを使ってスクロールアニメーションを導入 clip-pathを使って斜線を入れる ページ内リンクにスムーススクロール シングルページでのカレント…

画像や要素をcssでクリッピングする「clip-path」

clip-pathプロパティ clip-path CSS プロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部 SVG を参照する URL、または circle() のよう…

要素の属性を操作する

属性とは各要素に付属している情報です。 img要素であればsrcやalt、a要素であればhrefなどです。もちろんidやclassも属性の一つです。 jqueryでは「attr」メソッドを使う事で任要素の属性に対して値を設定/取得するする事が出来ます。 img要素のalt属性を…

フィルタリングとモーダルウィンドウを導入

chiyo-katsumasa.com fancyapps.comwww.kunkalabs.com <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MixItUpとFancyBoxを合体</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>

シングルページサイトの作成

サイト制作を見据えた、シングルページのサイトを作成します。 ヒーローヘッダーを使用したメインビジュアル お知らせ部分にajaxを使用 Movie部分にmp4データを設置 Menu部分にモーダルウィンドウとフィルタリングを設置 sns部分にtwitter APIを使ってtwitte…

JavaScriptとは

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当…