"フロントエンド"の記事一覧

• ズームインしながらフェードで切り替わるスライダーをjQueryとプラグインなしで実装してみた

  JavaScript
  2018/06/22 Tips / 自作スクリプト

  よくある画像スライダーですが、先日、ズームインしながらフェードで切り変わるという少し特殊なスライダーを実装する必要があったのでその時の備忘録として。 スライダー系のプラグインは様々ありますが、プラグインを使用して実現する方法がパッと浮かばなかったので、1から自分でスクリプトを組みました。 と言いっても、スクリプトの処理自体はタイミングを合わせてクラスを付 ... 続きを見る

• 【脱jQuery!】ページ内リンクのスムーススクロールをjQueryなしで実装するコード

  JavaScript
  2018/06/22 Tips / 脱jQuery / 自作スクリプト

  今回は「ページ内リンクのスムーススクロール」をjQueryに頼らず実装してみました。 スクロールアニメーションはjQueryなしでは難しいとされている処理の一つですが、特に問題なく動作するようなコードが完成したので、メモに残しておきます。 ... 続きを見る

• 【脱jQuery!】jQueryなしで「ページトップへ戻るボタン」を実装する

  JavaScript
  2018/06/20 Tips / 脱jQuery

  目指せ脱jQuery！ということで、jQueryなしで「ページトップへ戻るボタン」を実装するコードを2種類ほどメモしておこうと思います。 処理の流れとしては、 クリックイベントに処理を登録 スクロール値を"ちょっとずつ"0に近づける処理をスクロール値が0になるまで繰り返す "ちょっとずつ"の部分を工夫するとeaseアニメーションっぽくする ... 続きを見る

• Vue.jsでLazyload（画像遅延読み込み）させるなら「lazysizes」でよさそう！

  JavaScript
  2018/06/18

  jQueryからの乗り換えでVue.jsを使用する場合、Lazyload（画像遅延読み込み）はどうすればいいのか？ 実際にコードを動かして調べてみたところ、jQuery不要の最強プラグイン「lazysizes」なら問題なく動作してくれました。 以下のCodePenで実際に動作を確認してみてください。（lazysizesの読み込みはCodePenの設定にて ... 続きを見る

• Internet Explorerを判定してアラートを表示し、モダンブラウザへ誘導する方法（PHP版 / JS版）

  フロントエンド
  2018/06/05 IE対策

  一刻も早くInternet Explorer (以下 IE) の呪縛から解放されたい。 そこで、IEで訪れてきたユーザーに対してモダンブラウザへ誘導するアラートを実装してみました。 方法は簡単。ユーザーエージェントからIEを判定し、警告メッセージを表示するdiv要素を表示するだけです。見た目はcssで好きに整えましょう。 私は当ブログにて少し大きめのア ... 続きを見る

• 【#2】SVGを極めたい！~ ビューポートとは何か・svgタグの描画領域・width,height,viewBox属性の挙動について ~

  SVG
  2018/05/24 基本のキ

  前回、SVGで簡単に図形を描画してみたのですが、そもそもこの図形が描画されている領域はどういうものなのでしょうか。 また、<svg>タグにはその描画領域を決めるための属性として、width、height属性と、viewBox属性を持つことができますが、これらの指定によって描画領域はどのように変化するのか。 全てのsvgグラフィックの元となる描 ... 続きを見る

• 【#1】SVGを極めたい！~ SVGとは何か・基本図形の描画とスタイル付け ~

  SVG
  2018/05/23 基本のキ

  最近、SVGアニメーションを自由に扱えるようになりたいなと思いまして、SVGを基礎から勉強していこうと思います。 今回は第一回目、基礎の基礎編です。SVGとはそもそも何なのかを軽く理解したあと、四角形や円、直線など簡単な図形を静的に描画し、それらのスタイル付けについて触れてみようと思います。 ... 続きを見る

• 擬似要素と擬似クラスの違いとは？ :before,:afterと::before,::afterのコロンの数はなぜ違う？

  CSS/Sass
  2018/05/12 比較

  CSSにおける:before, :afterとか:hoverのことを擬似要素とか擬似クラスと言いますが、両者の違いは何なのかを調べてみました。 同じ意味でただ別の呼び方をしてるだけと思っていたのですが、両者には明確な違いがあったようです。   ... 続きを見る

• CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。

  CSS/Sass
  2018/05/11 まとめ系 / メディアクエリ

  今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリ（Media Queries）について。基本的な書き方や記述の意味についてまとめていきます。 なんとなく @medeia screen and ... とか書いているけど、 screenってどういう意味？とか、そんなレベルの話です。メディアタイプ・メディア特性・区切り方やそのキーワードの意味な ... 続きを見る

• CSS3・CSS4とは？CSSの歴史と現状、Level(レベル)の遷移について調べてみた。

  CSS/Sass
  2018/05/09 なんぞや / まとめ系

  CSS3だとかCSS4だとかって一体何？今自分が使ってるCSSはどれ？というのが気になって、CSS (Cascading Style Sheets) の歴史を色々調べてみました。 CSS1の登場から現在に至るまでのCSSの進化を知り、現在のモジュールの仕組みを理解しておくと、普段なんとなく使っていたCSSの様々な記述も身近に感じることができるようになります ... 続きを見る

• W3C勧告とはなんぞ？Web標準化とW3Cにおける勧告プロセスについて

  フロントエンド
  2018/05/08 なんぞや

  今回はWebデザイナーやフロントエンジニアにとっても基礎的かつ重要な存在、「W3C」について調べてみました。 「HTML5がW3Cの勧告となりました」のような表現を見たことないでしょうか？ この「W3C」とか「勧告」ってなに？って話です。 ... 続きを見る

• スマホ表示とデスクトップ表示でレスポンシブに改行位置を変える時はbrタグにクラスを付けてcssだけで管理すると超楽な件

  CSS/Sass
  2018/05/06 Tips / レスポンシブ

  レスポンシブコーディングをするときに、デスクトップ表示とスマホ表示でテキストの改行位置を変えたい時、みなさんどうしてますか？ 私の場合、少し前までPHP側からユーザーエージェントでスマホ分岐させ、brタグの位置を変えたpタグごと記述を出し分けていました... 例えば、IS_MOBILEにスマホかどうかの真偽値が入っているとして、 <?php if ... 続きを見る

• lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法

  JavaScript
  2018/04/09 プラグイン

  「Luminous」という、クリックすると画像を拡大してくれる超軽量の素晴らしいスクリプトを発見したので、使い方をメモっておこうと思います。 この類のスクリプトでは lightbox がかなり有名で、私もよく使わせてもらっているのですが、画像をクリックしてから拡大表示されるまでの待機時間が地味に長い。 そこでなんか軽量のやつないかなーと思って検索してみる ... 続きを見る

• 游ゴシックのfont-family指定方法2018年度版！@font-faceは絶対NG！WindowsのChromでかすれる問題徹底検証

  CSS/Sass
  2018/04/02 Tips / エラー対処 / フォント

  游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。 ただ、面倒くせぇ。問題が多すぎるのです。 かねてより議論されている「WindowsのChromで見にくいんすけど」問題。 調べればわかるのですが、@font-faceで解決している人がかなり多いです。僕もそうしていました。 しかし、この@font-face、もう効かなくなってますよ！ ... 続きを見る

• JavaScriptを理解する - レキシカルスコープとクロージャ

  JavaScript
  2017/10/22 基本のキ

  「JavaScriptを理解する」第3回です。今回は「クロージャ」というものをメインに勉強してきました。 また、クロージャを理解するためには、JavaScriptで採用されているスコープについても詳しく知っておく必要がありそうだったので、そちらも併せて勉強しました。 まずはスコープについて触れてから、クロージャについて学んだことをまとめていこうと思います ... 続きを見る

• JavaScriptを理解する – 関数

  JavaScript
  2017/09/30 基本のキ

  「JavaScriptを理解する」第二回です。今回は、関数についてもう一度基礎から学び直してみました。 基本的に、こちら( 関数 - Javascript|MDN ) の情報をもとに、基礎知識を整理していこうと思います。   ちなみに、第一回目の記事では変数を学び直しております。 [in_link 786] ... 続きを見る

• JavaScriptを理解する - 変数宣言

  JavaScript
  2017/09/20 基本のキ

  WEBを勉強し始めて早くも1年が経ちました。 一年間WEBサイトの制作に関わってきて、JavaScriptもだいたいわかったつもりでいたのですが、どうやら基本すら全くわかっていないのではないか？と思い、基礎を一から学んでみることに。 第一回目は変数宣言について勉強したことについてのメモです。 ... 続きを見る

• jQueryのclickイベントが動作しない？Ajaxなどで遅延読み込みした要素へのイベント登録方法を確認しよう。

  JavaScript
  2017/08/16 jQuery / エラー対処

  クリックイベントが動作しない！という場合、まずはクリックする対象がAjaxなどで遅延読み込みされている要素かどうか確認しましょう。 そのような場合は、記述方法に注意が必要です。 ... 続きを見る

• スマホ・タブレット( iPhone/iPad/Android ) でスクリーンの縦・横判定方法と画面回転時の発動イベントのまとめ。およびそれらの組み合わせによる不具合・最適解の考察

  JavaScript
  2017/08/15 jQuery / まとめ系 / 比較

  スマホやタブレットでスクリーンの縦横の向きを判定する方法と、画面回転時にどんなイベントが発火するのかを整理していき、どの方法で向きを判定してどのイベントにその判定処理を登録すればよいのか、その組み合わせを考察していこうと思います。 ちゃんと調べてみて初めて分かったのですが、iOSとAndroidで挙動が違ったり、それぞれのバージョンやブラウザでも色々異なる ... 続きを見る

• [bxsliderあるある] 最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！

  JavaScript
  2017/08/12 エラー対処 / プラグイン

  スライダーを実装中するならとても便利なbxsliderですが、使用しているとこんな現象に遭遇しませんか？ 最後のスライダーがなぜか先頭にセットされてしまう。 特に、初心者の頃はこの現象がよく起こります。この現象が起こるとき、定番の解決方法というものがあるのですが、それでは対処しきれないケースも出てきます。 そうなるともう焦ってしまって大変。 というこ ... 続きを見る

1 / 3123>