2022-03-01から1ヶ月間の記事一覧
最近ではモバイル用のバナーのニーズもとても増えてきました。 モバイルバナー広告のサイズ 代表的なサイズ 320x50、320x100 モバイル用のバナーはPC用に比べ、サイズが小さいのでテキストや画像の選択が非常に難しくなります。さらにモバイル用であれば高解…
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>Column-layout</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
図形の組み合わせと整列を使ってイラストを描いてみましょう。 さらに効果を使ってシェイプをすばやく操作し、様々な表情のイラストに変化させてみましょう。 https://helpx.adobe.com/jp/illustrator/how-to/experiment-with-effects.html helpx.adobe.…
WebP（ウェッピー）は、圧縮率の高い非可逆圧縮で、透過した画像も書き出せるうえ、GIF同様にアニメーションにも対応している画像フォーマットで、言わば、jpgとpngとgifの良いとこ取りの画像形式です。 対応するブラウザが少ないというデメリットから普及が…
Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…
Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
インスタグラムの投稿一覧をWebサイトに表示させる場合、Instagram APIを使う方法やWordpress化させプラグインを使う方法がありますが、どちらも導入するには少し敷居が高く、専門知識が必要になってしまいます。 ja.wordpress.org LightWidget このLightWid…
入力画面 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>フォームの作成|入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>お問合せ…</h1></body></html>
今回のお問い合わせフォームは php を使い、 ● 入力画面● 確認画面● 完了画面 の 3 つを作成します。 入力画面の作例 https://codepen.io/yachin29/pen/ZEBNENN 万が一、確認画面からアクセスしてしまった際にそのままでは post で値が送 られていな…
Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------…
入力画面 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>フォームの作成｜入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>お問合せ…</h1></body></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>フォームの作成｜入力画面</title> </head>…</html>
配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は１つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。 一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる…
コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべて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>ドロップダウンメニューの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>ロゴ</h1> <…</header></body></html>
今回は入力画面、確認画面、完了画面の3ステップでお問合せフォームを作成します。 項目は お名前 メールアドレス お問い合わせ内容 入力画面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>
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…
今回はgoogle formのアドオン「Email Notifications for Google Forms」を使って自動返信機能をお手軽につけてみましょう。 返信するためのメールアドレス（Sender's Email）送り主の名前（Sender’s Name）を入力します。管理者への通知メールが不要であれば…
コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。 メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…
<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>phpでの変数と文字列の扱い方</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>入力画面</h1> </body></html>
post.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>postでデータを送信</title> </head> <body> <h1>送信画面</h1> <form action="output.php" method="post"> </form></body></html>
EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対面でのサービスが難しくなった今日「お問い合わせ…
##/post.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>post でデータを送信</title> </head> <body> <h1>送信画面</h1> </body></html>
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列）２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
PHPとは？ HP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…
● プロジェクトの概要が掲載されているか● クライアントの要望とそれに対する答えが示されているか ● 制作するサイトの情報が掲載されているか● システム要件が記載されているか● デザインコンセプトが掲載されているか● ワイヤーフレー…
nav02 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>動画を使ったファーストビュー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
以下の指定でa要素のhref属性の頭に#がついている場合という設定が出来ます。しかしこのままでは全てのa要素が対象になってしまうため、a要素にクラスを付けて対象を限定しましょう。 $('a[href^="#"]') 対象を限定した場合 $('a.scroll[href^="#"]') 位置の…
１、プロジェクト概要 今回作成するサイトの概要 ２、クライアント情報 クライアントの情報 クライアントの要望 要望に対する答え ３、サイトのコンテンツ概要 ページ構成 各ページのコンテンツ ターゲットとなるユーザー像（ペルソナ） 入れる機能（スムー…
