2022-08-01から1ヶ月間の記事一覧
お問い合わせフォームの作成｜改訂版 PHP 今回のお問い合わせフォームはphpを使い、 入力画面 確認画面 完了画面 の3つを作成します。 入力画面の作例 https://codepen.io/yachin29/pen/ZEBNENN 万が一、確認画面からアクセスしてしまった際にそのままではpo…
EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。対面でのサービスが難しくなった今日「お問い合わせ…
UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時（UTC）での1970年1月1日（午前0時0分0秒）からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtoti…
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列）２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
ホームページを作る際にヘッダーやフッターなど各ページで共通のパーツを使う事が多々あります。各ページごとに記述してしまうと、万が一修正が発生した場合、全てのページに影響が及んでしまいます。そうならない様に「外部ファイル化」しテンプレート化す…
今回の項目は お名前（必須） メールアドレス（必須） お住いの地域（任意） お問い合わせ項目（必須） お問い合わせ内容（必須） input.php <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>入力画面</title> </meta></meta></meta></head></html>
画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…
PHPとは？ HP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…
jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。jQueryを適切に記述する事である程度の改善は出来るの…
www.aolani-ohana.com html <div class="box"> <div class="box-inner top"> <img src="https://picsum.photos/1000/400" alt=""> </div> </div> jquery $(function(){ $(window).on('scroll resize',function(){ var elmHeight=$('.box').outerHeight();//対象要素の高さ $('.box').each(function(){ var setElm=$(this).children…
jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。 まとめて処理されるパターン <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script> $(function(){ alert($('li').text()); }); </script> jQuery.each() の使い方 複数あるli要素に対して…
アコーディオンパネル-jquery版 アコーディオンパネル-jQueryを使わない版
コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…
Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…
参考資料 stock.adobe.com
<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>srcsetとbxslider</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
素材https://yachin29.com/school/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。またブレイクポイントやメインのカラーコードを変数化する事で効率化が図…
Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」などは、必ず…
