JR石川町駅から徒歩2分、元町、中華街からもほど近いところによつばベーカリーはあります。国産小麦（北海道産小麦100%）を使った昔ながらのふわふわ感にこだわったパンを焼いています。パンの香りと幸せがたくさんの方に届きますように。yotsuba-bakery.com
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…
バナー広告とはディスプレイ広告の1つです。 広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。 バナー広告の種類 モバイル：代表的なサイ…
今回はブラウザー上のフォームで入力したデータをデータベースに保存出来るようにします。まずはXAMPPに新しいデータベースを作ります。 その次にテーブルを作成。 今回はID、名前、メールアドレス、お問い合わせ内容の4つのカラムを作成カラムを作る際には…
セッション（session）とは セッションとは、コンピュータのサーバー側に一時的にデータを保存する仕組みのことです。たとえば、あるECサイトへのログイン情報やユーザー情報など、ユーザーに直接紐づくようなデータをセッションに格納して使ったりします。 …
スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリ…
SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索（自然検索 / Organic Search）とは、…
img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによ…
img要素で見せる場合 ページの情報の1部として見せる ・フルードで表示させる場合 （max-width:100%ので原寸より大きくは見せられない、アスペクト比は一定）・object-fitで表示させる場合（IEは未対応） 幅・高さを自由に指定して表示させる事が可能（backg…
まずは自身のPCに入っているgitのバージョンを確認してみましょう。 コマンド画面で簡単に確認出来るので、コマンド画面で以下のコマンドを入力しましょう。 gitのバージョン確認 $ git --version macは最初からgitがインストールされていますが、windowsは…
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…
READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。 そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのUR…
READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。 そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのUR…
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVGでテキストアニメーション</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/hamburgers.css"> </head> <body> <header> <h1></h1></header></body></html>
checkboxを使う事でcssだけでクリックイベントを使う事が出来ます。 <header> <h1>タイトル</h1> <input type="checkbox" id="check"> <label for="check" class="ham"> <p class="ham-btn"><span></span></p> </label> <nav class="g-nav"> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li></li></ul></nav></header>
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列） ２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
今回作成するポートフォリオは １、メインビジュアル ２、自己紹介＆経歴 ３、スキル（出来る事を具体的に） ４、作品 ５、お問い合わせフォーム（google formをカスタマイズ） tomoyukiarasuna.com 雛型完成データ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio</title> </meta></meta></head></html>
html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場合にはiOSとandroidで対応している物、していない物が違うので注意が必要です。場合によっては以前のように「PCでは動画」「スマートフォンでは画…
5回目の試験は先日作成したクライアントワークの報告書を提出してもらいます。 今回の報告書の内容はそのままポートフォリオのコンテンツにもなるので、しっかりまとめておきましょう。 プロジェクトの概要が掲載されているか 制作するサイトの情報が掲載さ…
今回のページに入れるコンテンツ トップにメインビジュアル（スライダーで動かす。object-fitで高さの調整） お知らせ部分をajaxで外部ファイル化 動画（youtubeからデータを持ってくる） ギャラリー部分 SNS Googleカレンダー GoogleMap Googleフォーム（自…
Googleフォームに自動返信機能を付けましょう function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------------------------------ // 設定エリアここから //-----------------------------…
jQueryのanimate機能を使ってスムーススクロールを実装します。 scrollTop 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:1…
Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…
ポートフォリオを見据えて、今回のサイト制作の企画書を作成しましょう。 企画書の構成 1:表紙2:プロジェクト概要 サイトの概要（どういったサイトを作ったか） サイトのURL クライアントの情報 クライアントの要望と要望に対しての答え 3:サイトの情報・構…
svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>
まずは自身のPCに入っているgitのバージョンを確認してみましょう。 コマンド画面で簡単に確認出来るので、コマンド画面で以下のコマンドを入力しましょう。 gitのバージョン確認 $ git --version macは最初からgitがインストールされていますが、windowsは…
ポートフォリオを作るに当たって、Bootstrapなどのフレームワークを使用する事も視野に入れておきましょう。 それぞれのメリット・デメリットを理解し、自身にとって最も有効だと思う物を選択する事が大事です。 bootstrapのテンプレート templatemag.comtem…
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co使用するファイ…
ナビゲーションメニューの押し易さ（使い易さ）というのはページ全体の使い易さに繋がる為、非常に大切です。 PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。 スマホでは制限され…