タグ

ブックマーク / hyp.llc (6)

  • [Javascript] イベントリスナーいろいろ

    どうもこんばんは!HYPのこうじです。 イベントリスナー、色々ありますよね。よく使います。 にも関わらず、毎回忘れて調べるハメになるのでまとめました! イベントリスナー使用時の注意 1. 関数に引数を付けない ブラウザによってはつけてもちゃんと動作しますが、しない場合もあります。 するかしないか分からないものは、指定しない方が無難です。 [js] // いいね! dosument.addEventListener(‘DOMContentLoaded’, GetBird); // よくないね! dosument.addEventListener(‘DOMContentLoaded’, GetBird(‘コザクラインコ’)); // よくないね! dosument.addEventListener(‘DOMContentLoaded’, GetBird()); [/js] 1. 動的に何かする

    [Javascript] イベントリスナーいろいろ
  • [Javascript] ECサイトで使える!縦に長いページには一番上に戻るボタンを使おう! (レスポンシブ対応)

    [Javascript] ECサイトで使える!縦に長いページには一番上に戻るボタンを使おう! (レスポンシブ対応) 2016.07.09 2019.09.17 Javascript どうもこんばんは!HYPのこうじです。 今回は縦に長いページでページ内移動が便利になる『一番上に戻るボタン』の実装をしようと思います! は?iphoneは上の方タップすれば一番上いくから要らないっしょ。 パソコンは”Home”ボタン使いなYO! (ちなみにかなこさんは僕と同様、自分にとって必要なモノ以外覚えないので実際にこういう発言はしません。多分…) まぁこんな事いったら元も子も無いですが、全ての人が知っているわけではないので、視覚的直観的に『あぁこれ押すと上まで行くんだろうな』というのが分かるボタンがあると非常に親切というのもあります。 一番上に戻るボタンの実装 htmlタグの作成 まずはこれが無いと元も子

    [Javascript] ECサイトで使える!縦に長いページには一番上に戻るボタンを使おう! (レスポンシブ対応)
  • [Javascript] 動的に要素を作成する為のあれこれ

    どうもこんばんは!HYPのこうじです。 javascriptに慣れてきたら、動的に要素を作成して要素に追加とかやってみたくなります。 そう。僕の事です。 例えば以下のような場合。 ショッピングサイト等でよくあるランキングを作ったとしましょう。 コーディングはこんな感じです。 [html] <div id="ranking"> <ul> <li> <a href="#"> <p class="rank rank_1">1位</p> <img class="image" src="example1.jpg"> <p class="name">グレートな商品</p> </a> </li> <li> <a href="#"> <p class="rank rank_2">2位</p> <img class="image" src="example2.jpg"> <p class="name">エク

    [Javascript] 動的に要素を作成する為のあれこれ
  • コピペで使える!モール型ECサイトでのインラインフレーム活用法 [リファラー編]

    コピペで使える!モール型ECサイトでのインラインフレーム活用法 [リファラー編] 2017.02.20 2019.09.11 jQuery Vanilla JSを使おう! インラインフレーム どうもこんばんは!HYPのこうじです。 今のご時世レスポンシブレイアウトがはびこっている中、『インラインフレーム』を利用する機会は極端に減ったのではないでしょうか。 なんせ、縦幅が動的に変更してくれないインラインフレームはレスポンシブではすこぶる使いづらい。 かといって、動的に変更させるくらいならWordpressでも使ってCMS管理しちゃいなYO!って感じですもんね。 ですが、一昔前の文化を”わがもの顔”で走るモール型ECにはいまだにインラインフレームはなくてはならない重要パーツです。 それは… javascriptが使えない。スタイルシートもロクに使えない。各モールが用意したweb管理画面から変更

    コピペで使える!モール型ECサイトでのインラインフレーム活用法 [リファラー編]
  • Yahooショッピングでインラインフレームを使用時のtargetを簡単に設定

    Yahooショッピングでインラインフレームを使用時のtargetを簡単に設定 2016.11.07 2019.09.11 jQuery Vanilla JSを使おう! どうもこんばんは!HYPのこうじです。 Yahooショッピング出店し、ページを作成する際に有料で使用出来る『Yahooトリプル』というFTPサーバーがあります。 このFTPサーバーですが、通常のFTPと違ってちょっとクセモノです。 すぐに反映されない 反映がめちゃくちゃ遅いです。 『あ、テキスト間違ってた。てへぺろ!』なんてことがあろうものなら、一文字直すだけでも反映まで長いと20分とか平気で掛かります。 サーバー上で検証しながらページ作成なんてもってのほかです! 元々、Yahooショッピングの出店料が有料だった時代に、FTPサーバーへファイルアップ時に、外部リンクや不正なスクリプト等をアップされないように未然にチェックして

    Yahooショッピングでインラインフレームを使用時のtargetを簡単に設定
  • [2016年4月版] 従来デザインを一新!楽天市場のスタイルシート活用法

    [2016年4月版] 従来デザインを一新!楽天市場のスタイルシート活用法 2016.04.17 2016.05.17 RMS スタイルシート 楽天市場 今回は、そんなスタイルシートでアレンジ可能な部分の中で、使えそうなデザイン指定をピックアップしてみました! スタイルシートプロパティの簡単な知識は必要ですが、これを使って自分のサイトらしさを表現できるデザインに変更しましょう! 商品ページ 参考に使わせて頂いたサイトは、アメカジアイテムで有名なCulture Mart(カルチャーマート)さんのサイトです! ありがとうございます! Culture Mart(カルチャーマート) 楽天市場店 商品名 [css] span.item_name { /* スタイルシート */ } [/css] キャッチコピー [css] span.catch_copy { /* スタイルシート */ } [/css]

    [2016年4月版] 従来デザインを一新!楽天市場のスタイルシート活用法
  • 1