なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

カテゴリー: HTML5

【CSS+JS】スクロールでふわっと出てくるフェードインの実装方法【jQueryなし】

画像や要素などがスクロールするとふわっと出てくる「フェードイン」の実装方法をまとめます。仕事でやることになって、調べましたが自力でも出来そうだったので、私のようにjQueryに依存しないで実装したいという方のために書きます。ちなみに私はjQueryは個人的に苦手でまったく書けないです…。 適当なHTMLを用意しました。ここではh1と内容全体にフェードインさせるクラスを付けました。 JavaScri […]

Read More

卒業制作展②

制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。 チラシについて 苦労した点 作業工程の写真を撮るのに、手が汚れているためにかなり苦労しました。手早く作業をする必要のある工程はとくに写真を撮るのが大変でした。また初心者でも手軽に作れるよう、 […]

Read More

卒業制作展①

トライデントコンピュータ専門学校で行われた卒業研究制作展終了しました。たくさんのご来場、誠にありがとうございました。 私は2日間ともに午前中に作品の案内をさせていただいたのですが、とくに質問の多かった事項についてと、個人的にがんばったところなどをまとめていきたいと思います。 制作テーマ 「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシ […]

Read More

スマホで使いやすい申し込みフォーム③

jQueryです。 $(function(){ $.fn.autoKana(‘#name’, ‘#furi_name’, { katakana : true //true:カタカナ、false:ひらがな(デフォルト) }); //フォーカスされたとき $(“#name”).focus(function(){ $(this).css(“background-color”, “#fff”); $(th […]

Read More

スマホで使いやすい申し込みフォーム①

授業でフォームについて詳しく勉強したので、その改変版を載せます。利用の想定は専門学校の資料請求のフォームです。

フリガナと郵便番号は入れると自動入力されるものを使っています。自動入力された部分については入力された時点で背景の色が緑になるようにするなど改善点は多いですが、フォームについてじっくり勉強する機会がありよかったです。 次の記 […]

Read More

【HTML5】footer要素について

footer 要素は文書やセクションのフッターを表します。著者情報や関連記事への記述する場合によく利用されます。footer 要素はセクションの最初に置いても問題ありません。 コンテンツモデル フローコンテンツ。ただし子要素にヘッディングコンテンツ、セクショニングコンテンツ、header要素、footer要素、address要素を含むことは不可 使用できる文脈 フローコンテンツが期待される場所

Read More

【HTML5】header要素について

こんにちは。ブログをしばらく書けなかったので反省しています。がんばって書いていきます。 header要素は文書やセクションのヘッダーを表します。文書やセクションの冒頭となる見出しや概要、ナビゲーションのリンクなどを記述する場合によく利用されます。 Webサイトでヘッダーは例えば会社の場合会社のロゴ、検索フォーム、メインのナビゲーションメニューなどを含むことが多いです。 コンテンツ パブパブルコンテ […]

Read More

Googleアナリティクスの設置方法

こんにちは。 今更ですがアナリティクスの設置をちゃんとしたのでそのことについて書きます。 Googleアナリティクスは無料で使える便利なアクセス解析ツールです。どんな経路でサイト訪問者がサイトを訪れたか、サイトの中でどういう動きをして、どれほど滞在してどのページで離脱したか・・・等々、いろいろわかってしまうすごいツールです。 設置方法は以下にまとめました。 Googleアカウントを作成する goo […]

Read More

Local Storageについて

学校のWebアプリを作る授業でLocal Storageを使ったので使いかたをメモしておきます。 WebStorageとはWeb上にデータを保存しておくことができるものでローカルストレージとセッションストレージがあります。今回はローカルストレージについて書きます。 LocalStorageに値を入れるには以下のように書きます。 キーと値をセットで箱に入れておくイメージです。取り出すときは 上記のよ […]

Read More
古い記事へ