プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…
HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1…
リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
www.ditjapan.com jam-cf.com html5からhtmlに直接動画データを埋め込むことが出来るようになりました。 htmlで扱える動画データはmp-4とweb-mの2種類です。 <video src=""></video> html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフ…
最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…
作例 PCレイアウト SPレイアウト cssは外部参照で記述すること cssに適切なリセットをかける事 767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを横に並べる 画像を自身で用意しトリミングしフルー…
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>NetSmart</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Net …</h1></header></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> <style> *{ margin: 0; padding: 0; } /* pcレイアウト */ .box-wrapper{ width: 80%; m…</meta></meta></meta></head></html>
www.sikaku.gr.jp yachin29.com UIデザインが勉強出来るUIデザインクイズサイト「can't unsee」 cantunsee.space
バナー広告とはディスプレイ広告の1つです。 広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。 バナー広告の種類 モバイル：代表的なサイ…
基本的にサイト制作はチームで行うのですが、未経験者であっても「githubのissue」機能を使って、チーム開発を見据えたサイト制作をしてみましょう。 gitの初期化 git init gitのユーザー登録 git config --global user.name "Sample" git config --global u…
「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう…
ピクセル（英: pixel、px） ピクセル（英: pixel）、または画素とは、コンピュータで画像を扱うときの単位。640×480ピクセルの画像は、横640個、縦480個の点を並べて表現されていることを示す。ディスプレイなどのデバイスにおいては、ピクセルを単位として…
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したも…
cdnjs.comcdnの場合はminファイルを使用するようにする
ここに必要事項を記入して、提出して下さい。 特にURLは間違いの無いように送信する前に必ず確認する癖をつけましょう。 docs.google.com
chiyo-katsumasa.com fancyapps.comwww.kunkalabs.com <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MixItUpとFancyBoxを合体</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
Gitとは？ Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機…
www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートT…
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
この機能の仕様 ユーザーへの自動返信メールと同じメールが管理者にも送られます。 ※iPhoneでは「var sendername」に設定した値は無効になります。 自動返信機能のスクリプト function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
今回のお問い合わせフォームはphpを使い、 入力画面 確認画面 完了画面 の3つを作成します。 入力画面の作例 https://codepen.io/yachin29/pen/ZEBNENN 万が一、確認画面からアクセスしてしまった際にそのままではpostで値が送られていない為エラーになって…
入力画面の作成 input.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>
EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対面でのサービスが難しくなった今日「お問い合わせ…