2023-04-01から1ヶ月間の記事一覧
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…
Google Fromに自動返信機能を付ける
今回はgoogle formのアドオン「Email Notifications for Google Forms」を使って自動返信機能をお手軽につけてみましょう。 返信するためのメールアドレス（Sender's Email）送り主の名前（Sender’s Name）を入力します。管理者への通知メールが不要であれば…
トップページからフォームページに遷移した際にスムーススクロールを使って、止まる位置の調整をします。 //現在のページURLのハッシュ部分を取得 let hash = location.hash; if(hash){ $("html,body").stop().scrollTop(0); setTimeout(function(){ let tar…
READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのURL…
javascriptのlocation.hashプロパティを使う事でURLのハッシュを取得することが出来ます。 今回の ポイント トップページの「資料請求ボタン」と「お問い合わせボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ方の…
郵便番号を入れると自動的に住所が入るプラグインです。使い方は非常に簡単で、基本的にはformのパーツにclassを付与するだけです。 1、まずformタグに指定されたclassを指定します。 <form class="h-adr"> 2、つぎにform中に、国名(p-country-name) をJapan に指定します <span class="p-country-name" style="display:none;">Japan</span> </form>…
前回、やったbackground-clipでは画像をテキストの形でクリッピングしましたが、今回はcssのmask-imageを使って画像を別の画像でマスクしてみます。テキストと違って、自由な形でマスク出来るので色々と試してみましょう。 マスク用の画像をsvgで作成します…
今回はWordpressを使ってコーポレートサイトを作ってみます。 会社概要 会社名：CG-BIM Studioタグライン：建築の可能性を広げるCGパース事業概要：建築CGパース制作会社（B to B）建築CGパース制作会社は、建築物や不動産物件の外観や内観をCG技術を使用し…
cssのmotion-pathを使う事でオブジェクトを自身で作成したパスに沿って動かす事が出来ます。 まずはイラストレーターでモーション用のパスをペンツール等で作成します。ここで作成したパスに沿って要素を動かす事が出来ます。 次にcssで作成したモーション用…
1.IllustratorでSVG画像を作成 まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtextにしましょう。文字を書いたらアウトラインにし、レイヤーをロックしましょう。 …
index,html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CG-BIM Studio</title> <link rel="stylesheet" href="css/common.css"> </head> <body> <header> </header></body></html>
画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 undraw.co www.openpeeps.com illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawin…
speakerdeck.com
ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…
以前はグラデーションはビットマップで表現していましたが、今cssで描画するのが一般的です。cssで描画するものはベクター形式になるので、ビットマップよりも滑らかなグラデーションが表現できます。 webdesign-trends.net 「background-clip」を使う事で文…
www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートT…
スキューモーフィックデザインとは？ 「スキューモーフィックデザイン」は、AppleがiOSの最初の頃に提唱していた「質感や特徴など現実世界のモチーフを模倣したデザイン」のことです。例えば、以前のiPhoneで採用されていた電卓 アプリのデザインは、リアル…
多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダ…
web制作会社の実績紹介ページはポートフォリオを作る上で非常に参考になるので、必ず目を通しておきましょう。 www.concentinc.jp designstudio-l.jp coosy.co.jp www.climarks.com depart-inc.com necco.inc spicato.com
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
forms.gle
wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…
コンテンツのインポート まずはサンプルデータをダウンロードしましょう。www.shoeisha.co.jp もちろん自分で投稿記事などを入力する事も可能ですが、ここではサンプルデータをダッシュボードからインポートします。「ツール」→「インポート」→「WordPress」…
プログラムで一番多い処理が繰り返しの処理です。 ここではfor、foreach、whileの3つの違いを理解してみましょう。 for文 for文は「繰り返し回数が定まっているとき」の処理が得意 foreach文 foreach文は「連想配列の処理が得意」です。 while文 while文は「…
コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべてindex.htmlになっているか フォルダ名は適切な名前になっているか ページ毎に適切なタイトルがついているか 適切な…
Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報（Webサイトの改善案・被リンク数・キーワードなど）やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。Search Console…
UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時（UTC）での1970年1月1日（午前0時0分0秒）からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtotime関数 指定した…
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列）２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。通常、変数は１つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。 一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…
