サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.web-labo.jp
フッターまでスクロールしたらページトップへのリンクを表示したり、ソーシャルボタンを表示したり非表示にしたりする制御をjQueryとJavaScriptで作ってみよう! 今日、授業でやった内容です。 動作サンプル 今回の動作サンプルは、このページをフッターまでスクロールして頂くとWEB-LABOのロゴがフェードインで表示されますので、それで代用します。 なお、上にスクロールしてフッターが見えなくなると、再びフェードアウトします。 動作のイメージ 説明上ページの長さが3000ピクセル。画面の高さが1000ピクセル。フッターの高さを500ピクセルとします。 ページが表示された場合は、最初は一番上部が表示されます。 スクロールしていくと長いページの一部が画面に表示されることになります。 そのままスクロールしていくと、画面とフッターが重なる瞬間が訪れます。今回は、それが発動のタイミングです。なお発動
HTML5が2014年10月28日に正式勧告されましたが、見出しのマークアップについて曖昧に理解されている方も多いようなので改めて書いてみました。 2016年11月1日に勧告されたHTML5.1で仕様が変更されました。「HTML5.1におけるh1(見出し)の使い方」はこちら。 以前のマークアップ HTML5より前のHTML4.01やXHTMLでは、h1はページ内で1回しか使用できず、順次h2からh6まで見出しのレベルに応じてマークアップしていました。 例えば、この本の目次を例にマークアップしてみます。 <h1>HTML5&辞典</h1> <h2>第1部 第1章 HTML5の基礎知識</h2> <h3>01 HTML5とは</h3> <h3>02 HTMLの基本的な構造</h3> <h3>03 文法上の注意点</h3> : <h2>第1部 第2章 HTML5リファレンス</h2> <h3>0
jQueryのanimate()メソッドを使えば文字や画像などのオブジェクトを簡単に動かしてアニメーションさせることができます。この animate()メソッドは奥が深くて、オプションを指定することで動作をカスタマイズすることができます。 オプションの指定なし(.box1) まずは、オプションの指定をせず単純にクリックしたら leftプロパティで右に動かしてみます。 ↓ クリックすると動きます。 (再確認は再読み込みしてください) .box1 <span class="box1">WEB-LABO</span> .box1{ position: relative; font-weight: bold; font-size: 32px; font-family: impact; color: #333; background-color: #eee; display: inline; pad
HTMLはこうなってます このブログのCSSとかぶらないように、今回は敢えてdiv要素を使っていますが、この辺は自由に変更してください。 <div id="a">AAAAAAAAAA</div> <div id="wrap_a"> <p>A1</p> <p>A2</p> <p>A3</p> <p>A4</p> <p>A5</p> </div> <div id="b">BBBBBBBBBB</div> <div id="wrap_b"> <p>B1</p> <p>B2</p> <p>B3</p> </div> <div id="c">CCCCCCCCCC</div> <div id="wrap_c"> <p>C1</p> <p>C2</p> <p>C3</p> <p>C4</p> </div> 次はCSSです 大項目メニューを太字にして、マウスが重なった時にカーソルを変更しています。 中項目
list-style-imageで指定したリストマークがズレる時があります。そんな時は、背景画像にして対処すると簡単です。 list-style-imageで指定した場合 画像を作って、list-style-imageでリストマークを付けてみます。 <ul id="list1"> <li>リストアイテム1</li> <li>リストアイテム2</li> <li>リストアイテム3</li> <li>リストアイテム4</li> <li>リストアイテム5</li> </ul> #list1 li{ list-style-image:url("list_mark_arrow.png"); } この様に画像のサイズによってはズレることがあります。 文字の中央より下側にずれています。 リストアイテム1 リストアイテム2 リストアイテム3 リストアイテム4 リストアイテム5 background-imag
先週、金曜日に問い合せフォームから問い合わせしていたところ、今日の午後に「はてブ」からメールが来ました。 早速確認したところ、反映されてました! 「faviconを変更したのに、はてブに反映されない!」という場合の対処法です。 先週、「はてブに掲載された!でも、ファビコンが表示されてないよ?という時は」でも書きましたが、サイトのfaviconを変更しても下の画像の様に「はてブ」には反映されません。 そこで、はてブのfaviconを更新したい場合は、フォームから問い合わせしましょう。 はてなブックマーク – お問い合わせ で、問合せしたら、次のような自動返信メールが送ってきました。 こちらは、はてなサポート窓口です。このたびは、お問い合わせありがとうございました。 内容を確認し、はてなスタッフがメールにてご返信いたします。 お問い合わせの内容によっては数日から1週間程度お時間をいただく場合が
ネットショップやドロップシッピング、物販系アフィリエイトを始める時に気を付けたいこと。 そろそろ、ネットショップの課題がスタートするので今日はこのテーマで書いてみます。 通販は商品選びでほぼ決まります。 これは、ドロップシッピングやアフィリエイトでも同じです。 雑貨が好きなので、雑貨のショップを始めるとかってよく聞きますが危険ですよね。好きなものに囲まれて、好きなもので商売ができたら幸せだと思います。しかし、「好き」だけでは上手くいかないのも事実です。 そこには戦略や小手先のテクニックまで様々なことが必要になってきます。 ドロップシッピングやアフィリエイトでサイトを作る場合、「自分が好きなものや得意分野の商品を選びなさい」っていう人がいますが、あれはウソ!確かに好きなものや得意分野の商品であれば商品の説明も自分の言葉で書けるでしょう。でも、その商品が売れるかどうかは別問題。結果を出すには売
Webデザイン上達の秘訣はナニか? それは、たくさん作ること。 現在どのレベルなのかで、やるべきことも変わってくるけど、まずは「沢山作ること」が上達の近道だと思います。 真似して作ることも出来ないのに、頭の中のイメージをカタチにできるはずがない。 真似して作れるということは、頭に浮かんだイメージもカタチにできるということ。逆にいえば、真似して作ることもできなければ、頭に浮かんだイメージもカタチに出来ないということ。 既にあるページは、ハッキリと目で見れるので作りやすい。 頭の中のイメージは、ぼんやりとした形のないものだから既存のサイトを真似するよりも難しい。 なので、最初は既存のページを真似して作ることで、デザインやレイアウト、画像の作り方からコーディングまで全て学べます。そうやってWeb制作の基礎体力を身につけましょう! 「WEBデザインの大原則」は、授業で使ってました。これが良かったの
専門学校の授業でやっている課題で学生作品にリンクする為のページを作りました。写真をベースにしたフルHD対応のページにしたかったけど、フルHDではないPCやタブレット、スマホでアクセスしてもメニューをクリックできるように、ウインドウサイズによりメニューの位置を変更するようにしました。 作ったのは↓このページ。 ※サーバの契約が終わったのでリンクは外しました。 以前、スクロールの時にうまくいかないことがあったので、リサイズが終わった時だけ処理するようにしたいと思い今回は粘って検索したら次のページを発見しました。 [jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = se
スライドショーの考え方 まず、最初に1枚目の画像を表示しておいて、1枚目を非表示にすると同時に2枚目を表示する。次に2枚目を非表示にすると同時に3枚目を表示する。3枚目を非表示にすると同時に1枚目を表示する。 今回は、制御構造を分かりやすくするために、フラグ用の変数を使い処理を分岐しています。具体的には変数flgの値が1の時は、1枚目の画像を表示する。flgの値が2の時は2枚目の画像を表示する。flgの値が3の時は3枚目を表示するといった具合です。 画像を切り替えた後に、flgを+1することで次の画像が表示できます。スライドショーに使う画像が3枚の場合は、flgの値が3を超えたときに1に戻します。あとは、これの繰り返しです。切り替えるタイミングの制御にはタイマーを使います。 【ステップ1】fadeIn()、fadeOut()を使用する fadeIn()、fadeOut()を使って画像を切り
WEBページのレイアウトには、次の基本的な5パターンが存在します。 これだけは押さえておきたい、WEBレイアウトの基本パターンですので、しっかり頭に入れておきましょう。 上部ナビゲーション型レイアウト ブラウザを上下に2分割し、ページの上部にナビゲーション(メニュー)を配置するのが上部ナビゲーション型レイアウトです。 上部にナビゲーション(メニュー)を配置することで、ユーザが認識しやすくなります。 但し、横幅の制限上多くのリンク配置することが出来ませんので、ページ数が少ないサイトに向いています。 ブラウザの横幅によって変わってくるが、リンクの数は6つ前後が最適でしょう。 なお、画面はアップルのトップページです。 左袖ナビゲーション型レイアウト ブラウザを左右に2分割し、ページの左側にナビゲーション(メニュー)を配置するのが左袖ナビゲーション型レイアウトです。 通常はナビゲーション(メニュー
コーチングは学ぶことが目的ではなく、目の前の結果を変えることが目的のはずです。 もし、学ぶ前となんら変わらなければ、学ぶ意味がありません。 コーチングを、学んで終わりにしないで下さい。 身に付けたスキルを活かして下さい。 日々の生活の中で活用して下さい。 きっと何かが変わるはずです。 コーチング体験者の声をいくつかご紹介します。 仕事や人間関係の行き詰まりを感じる中で、自分自身をもう一度見つめなおそうと思いJIMCCAでの受講を決めました。 一言で言うと、「生き方」が変わりました。 仕事においては、コミュニケーションスキルを使い、販売実績が飛躍的に向上しました。(福岡:男性) 職場で新人教育や離職する同僚を見て、「どうにかしたい、自信を持って仕事をして欲しい」と思いました。 いくつかのコーチングをしているところの資料を問い合わせ、 その中で体験レッスンを受けたのがきっかけです。(福岡:男性
このページを最初にブックマークしてみませんか?
『ホームページ制作やウェブに関するWEB研究室』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く