4-01 バナーのサイズを決める 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきまし…
wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタ…
3-31 最近ではモバイル用のバナーのニーズもとても増えてきました。 モバイルバナー広告のサイズ 代表的なサイズ 320x50、320x100 モバイル用のバナーはPC用に比べ、サイズが小さいのでテキストや画像の選択が非常に難しくなります。さらにモバイル用であれ…
3-29 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>
3-29 Web広告とは、「インターネットの媒体上に掲載される広告」のことです。広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho…
3-25 WebP（ウェッピー）は、圧縮率の高い非可逆圧縮で、透過した画像も書き出せるうえ、GIF同様にアニメーションにも対応している画像フォーマットで、言わば、jpgとpngとgifの良いとこ取りの画像形式です。対応するブラウザが少ないというデメリットから普…
3-24 Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとな…
3-24 Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧…
3-23 インスタグラムの投稿一覧をWebサイトに表示させる場合、Instagram APIを使う方法やWordpress化させプラグインを使う方法がありますが、どちらも導入するには少し敷居が高く、専門知識が必要になってしまいます。 ja.wordpress.org LightWidget このLig…
3-18 入力画面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>
3-18 今回のお問合せフォームの項目は 氏名（必須） メールアドレス（必須） 性別 好きな食べ物（複数選択可） プライバシーポリシーのチェック（必須） 入力画面 <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>
3-17 配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。通常、変数は１つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。 一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動さ…
3-17 コーディングの質は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-12 ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。…
今回は入力画面、確認画面、完了画面の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>
3-11 以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサ…
3-11 今回はgoogle formのアドオン「Email Notifications for Google Forms」を使って自動返信機能をお手軽につけてみましょう。 返信するためのメールアドレス（Sender's Email）送り主の名前（Sender’s Name）を入力します。管理者への通知メールが不要で…
3-11 コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。メガドロップダウンメニューであれば、リンク先のページの中の目当てのコ…
3-10 <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>
3-10 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> <form action="output.php" method="post"> </form></body></html>
3-08 基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列）２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設…
3-08 PHPとは？ HP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。…
3-04 以下の指定でa要素のhref属性の頭に#がついている場合という設定が出来ます。しかしこのままでは全てのa要素が対象になってしまうため、a要素にクラスを付けて対象を限定しましょう。 $('a[href^="#"]') 対象を限定した場合 $('a.scroll[href^="#"]') …
3-04 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>
3-03 動画データが入っているパターン(nav02) <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> <…</html>
3-03 ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassし…
3-01 window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。 例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(wind…
2-28 headers.netlify.app www.sidethree.co.jp jonsuh.comnav日本語、英語 ２段 https://liginc.co.jp/ <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>navgationの作成その1…</meta></meta></meta></head></html>
