Interested in learning about best practices and SEO for JavaScript? Good news! JavaScript SEO is a video series dedicated to these two topics! Brought to you...
![JavaScript SEO](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7d66111487ef044ad8c564dacf1d33d4734b7de/height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2FLXF8bM4g-J4%2Fhqdefault.jpg%3Fsqp%3D-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ%3D%3D%26rs%3DAOn4CLA7ykzPyiAfhGQaUYDPjZmU0FzPCg%26days_since_epoch%3D19884)
Interested in learning about best practices and SEO for JavaScript? Good news! JavaScript SEO is a video series dedicated to these two topics! Brought to you...
Editor.jsはブロックスタイルのリッチテキストエディタです。個人的に身近なもので言うとWordPressのGutenbergなんですが、WP使わない方だとピンとこない説明かもですね。ごめんなさい。画像やテキスト、見出しなどのブロック毎に編集、上下の位置を変えられるという特徴があり、テキストの編集はMediumのエディタのようにテキストを選択する事でツールバーが表示されるようになっています。Editor.jsの基本機能はシンプルなものですが、もともと拡張前提の設計となっており、プラグインによる機能追加をする事でエディタとして完成させていく流れとなっています。なので、不要な機能は加わらず、ユーザーにとっては軽量で分かりやすいエディタを提供できる事に繋がります。 ちょっと話はそれるのですが、Editor.jsはシンプルで分かりやすいですが、個人的にはGutenbergによってブロックスタイ
こんにちは! 開発部の武内です。 Webフロントエンドの開発はここ数年で急激に高度化していますが、 それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。 Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。 Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。 グラフィカルなデザイン調整 コードのステップ実行 通信のロギング etc… 今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。 CSS and JS code coverage What’s New In DevTools (Chrome 59) Find unused CSS and JS code with the new Coverage tab. When you load
プログラミングなどの技術記事を書く際に欠かせないのが「ソースコード」の表示です。極端な話、エンジニアであれば、文章を読まなくても見出しとソースコードさえ追えば、ある程度の内容がわかってしまうものです。従ってブログでのソースコードの見せ方には一工夫加えてこだわりたいところですね。当ブログでも技術系の記事をよく書くのでソースコードをよく扱っています。先日、当ブログのソースコード周りを見直しました。今回は当ブログのソースコードの表示で使っているテクニックをいくつか紹介します。 現在の当ブログのソースコードの表示は以下のようになっています。 import React from 'react'; export default class Code extends React.Component { constructor() { super(); state = { value: null, };
PSVR用『Beat Saber』が遂に発売されました!気分はジェダイで毎日ノリノリな kouraku です。 おはこんばんちは。 さてさて今回は、JS(jQuery)を使って、マテリアルデザインのFab(Floating Action Button)をクリックした時に、そのボタンの周りに子Fabが扇状に現れる、という動きを作ってみたいと思います。 今回作成する内容 親Fabをクリックすると、周辺に子Fabが扇状に表示。 子Fabが1個の時は親Fabの真上の位置(rotateZ(0))に表示。 子Fabが2個以上のとき、1番目の子Fabは親Fabの真上の位置、 最後の子Fabは親Fabの左側の位置(rotateZ(-90deg))、 間の子Fabは等間隔の位置(rotateZ(0〜90の間))に表示。 子Fabを扇状に表示させるには 例えば子Fabが2個あったとして、 1個目の子Fabを
デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。 スクロールをトリガーにあらゆる要素にアニメーションが適用できます。 パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモ デモでは実際のアニメーションを試すことができます。 デスクトップ・スマホ両方の環境でお試しください。 デモページ lax.jsではパフォーマンスを向上させるた
lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけのシンプルな仕様です。 <p data-lax-preset="spin fadeInOut">foobar!</p> <img src="huga.jpg" data-lax-translate-y="0 0, vh 200" />こんな感じの書き方で後はCSSでスタイルする流れとなります。簡単に導入できて良いんじゃないでしょうか。ただし、しつこいようですが、明確な理由のない導入はいたずらと判断され逮捕されかねませんので注意して検討する事をお薦めします(冗談ではなく)。ライセンスはMIT。 lax.js
「要素名[属性 *="属性値"]」と記述した属性セレクタは、指定した文字列を含む属性値を持つ要素にスタイルを適用します。CSS3における属性セレクタの意味と使い方やサンプルコード、使用例について解説します。 要素名 [属性*="属性値"]{~} 要素名に続けて[ 属性*="属性値"]を記述してセレクタとすると、指定した属性と、指定した文字列を含む属性値を持つ要素を対象にスタイルを適用します。 セレクタの使用例 以下の例では、属性値に「dekiru」を含むhref属性を持つa要素にスタイルを適用し、リンクの文字を太字で表示しています。 CSS a[href*="dekiru"] { font-variant: bold; }
ヘッダー・ナビゲーションを固定表示させるアイデア5つ 公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示 基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">W
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日:2015.12.02 更新日:2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 (centerModeではスクロール数は1つで固定) タッチデバイス対応 IE8以上で動作(スライド数のドットの色は変化しない) 縦カル
今日は超簡単にポップアップ・ウィンドウを実装できる[Remodal]を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの[remodel-default-theme.css]がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 [Remodal]の必要なファイルを読み込む はじめに[Remodal]の公式サイトより、必要なファイルを入手してきます。 Remodal : http://vodkabears.github.io/remodal/ GitHub : https://gith
femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き方で使う事が出来ます。 $("div").css("background-color:green;").html("Hello World").addClass("new");同じく$を使うのでjQueryと併用するとコンフリクトを起こす事になります。DOM操作だけでjQueryを使っている場合はこのような代替ライブラリが軽くてパフォーマンスも向上しそうですね。使えるメソッドは16種ほどしかありませんが十分需要はありそうです。ライセンスはMIT。 femtoJS
多! そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度:★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ!うちもこんなんやりたい!と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法(CSSのtransformとJSを組み合わせるなど)で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低めな印象です。用途もrrwebと概ね同じでWebアプリ等におけるユーザーへの操作サポートなどでしょうか。 有効に活用できそうだとは思いますが、最近スクリプトの使用によって捜査対象となった報道が相次いでいる為、若干使用を躊躇しますね。forによる無限ループだけで補導されるなら書き方を書いてるサイトは総じてアウトになりそうだし、この手のスクリプトに限らず、当局が罪だと言えばどんな理由であれ罪になってしまいそうで、いついかなる理由でも検挙/逮捕される可能性も否めません。 高いスキルを持ってたり上昇志向がある方は日本よりもITリテラシーの高い傾向にある国に行った方が安心かもしれませんね。余談が
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報(これも任意の文字列)を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く