マウスの動きに追従する「マウスストーカー」のシンプルな作り方 | ARAKAZE NOTE
CSSの考え方としてはposition:fixed;で配置。座標は後でJavaScriptでマウスに追従させるという感じです。ちなみにpointer-eventsを記述し忘れるとマウスイベントがうまく使えなくなったりします。 .stalker{ position:fixed; z-index: 10; /* 一番上のレイヤーに */ pointer-events:none; /* マウスイベントの邪魔にならないように */ width: 30px; height: 30px; border-radius:50%; background:#fff; /* ストーカーDOMの中心をマウス座標に */ top:-15px; left:-15px; /* DOMを滑らかに追従させる為に */ transition: transform 0.2s ease-out; }
Nuxt.jsでSassとpugを使えるようにする方法（ついでにjqueryも） | ARAKAZE NOTE
前回書いたこちらの記事では普通のWebサイトをNuxt.jsで作り変える流れをざっと書きました。 普通の受託系Web制作者による普通のWebサイトをNuxt.jsで作り変えてみた話 今回は上記の記事では割愛したNuxtでSassやpugなど、これまでgulpで使っていた便利なものを同じように使うためにはどうすれば良いか、ということを書いていこうと思います。 あくまで僕の環境（Mac）でこうしたら動くようになった、という記録なので正しいやり方ではないかもしれません。でも大事なのは成果物で、環境なんてのは自分が便利に使えれば良いの精神で書いていきます。 （沢山の人が関わるような大規模プロジェクトはちゃんとした環境構築しないとやばいとは思いますが） なぜSassとpugとjQuery（プラグイン群）を使いたいか？ まず自分にどんな前提知識があったかをざっと説明しておきます。 ・Sassやpugを
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
文庫の顔
ここは文庫本の表紙を、 ただただ眺める為のサイトです。 図書館で棚を眺め歩くように、書店で平置きされた本がふと目に止まるように、あなたが本と出会うちょっとしたきっかけになれば幸いです。 機能指定の文庫と出版年で絞り込んだ、文芸（NDC分類91）の文庫本の表紙が並びます。 情報の取得元は以下のAPIから取得しているのでこれらに未登録の書籍は表示されません。 ※現在はある程度の数の情報を取得出来る文庫のみの実装となっております。[API・出典]国立国会図書館書誌データ（国立国会図書館サーチ 外部提供インタフェース）※週に一度データを更新openBD制作者 @takumin_88 © PLUS-D Inc. All Rights Reserved. PLUS-D Inc.は仲間に加わってくれる方を募集中です。
CREATOR'S VOICE かっぴー×雪下まゆ - SPECIAL TALKS｜「DAIV」すべてのクリエイターに送る究極のPC
描くこと。描きつづけるということ。 多くの人にとって、人生で一番最初に出会う創作活動は「描く」ことではないでしょうか？ 一方で、日常的に「描く」機会がある大人はそう多くありません。赤ん坊の頃から身近にありながら、一生続けることは難しい。そんな「描く」ことを仕事として選んだ、マンガ家・マンガ原作者のかっぴーさんと、イラストレーターの雪下まゆさん。友人同士の集まりで面識もあるという二人に、「描く」ことにまつわる考え方や方法論、悩みについて対談いただきました。 また、かっぴーさん原案×雪下さん作画で、「元号の境目である今の時代に合う主人公像」をテーマに一枚のイラストを共作いただきました。クリエイターPC「DAIV」を使った、作画ドキュメンタリーもお楽しみください。 マンガ家・マンガ原作者 SNSを揶揄する短編ギャグマンガで大きな話題を呼んだ後、広告業界を舞台にした群像劇『左ききのエレン（原作版）
かっぴー×雪下まゆインタビュー＆コラボキャンペーン『時代を描く主人公のセリフ』まとめ
『左ききのエレン』等のかっぴーさんと個性的な画風で人気を集めるイラストレーター雪下まゆさんがコラボレーションして生み出した一枚の絵...。 こちらを見つめる新時代の主人公である彼女に、あなたならどんなセリフを付けますか？
シンプルでカスタマイズ可能なスクロールバーを実装出来るプラグイン SimpleBar の使い方 | ARAKAZE NOTE
カスタマイズ可能でシンプルなスクロールバーを実装出来るプラグインの紹介です。 クロスブラウザ対策もされているのでページ内でスクロールバーが必要な個所があるときには重宝しそうです。 用意するもの コアファイルはGitHubからダウンロードします。 必須なファイルはダウンロードしたディレクトリのdistの中に入っているsimplebar.cssとsimplebar.jsのふたつです。こちらjsは好きなところで読み込めば良いです。 <head> <link rel="stylesheet" href="simplebar.css" /> <script src="simplebar.js"></script> </head> htmlはスクロールバーを表示させたい要素に対してdata-simplebar属性を追加します <div data-simplebar></div> 基本的な使い方 使い方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
年代や出版社を選択肢フィルタすることも可能！ 小説の表紙を眺めることができる「文庫の顔」が面白い - WebGL 総本山
忙しい人でも楽しめる！1巻完結の個人的お勧め漫画5選 | ARAKAZE NOTE
遅延ロードを実装するのに便利な lazySizes の使い方 | ARAKAZE NOTE
カラーマットのスライドインから要素が現れるCSSアニメーション | ARAKAZE NOTE
色々なスクロールエフェクトを実装出来る ScrollMagic の使い方 | ARAKAZE NOTE
WordPressで記事の子カテゴリーだけ取得したい場合のメモ | ARAKAZE NOTE
ふわっと慣性がついたスクロールを簡単に実現できる Luxy.js の使い方 | ARAKAZE NOTE
WordPressでtitleタグの出力内容を制御する。分岐やカスタマイズいろいろ。 | ARAKAZE NOTE
Chromeでアドレスバーにペーストが出来ない！？ショートカットキーの上書き方法 | ARAKAZE NOTE
非同期によるページの先行読み込みで表示の体感速度を高速化！ InstantClick の使い方 | ARAKAZE NOTE
任意の行数（高さ）で三点リーダー付きの省略を実現するプラグイン Shave の使い方 | ARAKAZE NOTE
WordPressのContactForm7で送信後のサンキューページを作る方法 | ARAKAZE NOTE
スマホの実機に開発者ツールを表示できるJSライブラリ Eruda が便利 | ARAKAZE NOTE