技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog
プログラミングなどの技術記事を書く際に欠かせないのが「ソースコード」の表示です。極端な話、エンジニアであれば、文章を読まなくても見出しとソースコードさえ追えば、ある程度の内容がわかってしまうものです。従ってブログでのソースコードの見せ方には一工夫加えてこだわりたいところですね。当ブログでも技術系の記事をよく書くのでソースコードをよく扱っています。先日、当ブログのソースコード周りを見直しました。今回は当ブログのソースコードの表示で使っているテクニックをいくつか紹介します。 現在の当ブログのソースコードの表示は以下のようになっています。 import React from 'react'; export default class Code extends React.Component { constructor() { super(); state = { value: null, };
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
ヘッダー・ナビゲーションを固定表示させるアイデア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
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
Webサイトに訪問したユーザーの行動を記録し、再生できるライブラリ・「rrweb」
rrwebはWebサイトに訪問したユーザーの行動を記録、再生する為のWebセッションリプレイライブラリです。主に行動分析やバグの再現によるフィードバック向上、Webサイト上におけるユーザーとの対話(チャット等)の記録などを目的としているそうです。うまく使えれば便利そうですね。 rrweb あけましておめでとうございます。 本年も宜しくお願いいたします。
jQueryのスムーズスクロールでブラウザバックに対応する | cly7796.net
ページ内リンクのスムーズスクロールは色々なサイトで見かけるのですが、ブラウザバック時に元の位置ではなく前のページに戻ってしまうようになっていることが多いので、ブラウザバックに対応できないかを調べてみました。 サンプルコード よくあるスムーズスクロールを実装してみます。 HTML <nav class="nav"> <p>目次</p> <ul> <li><a href="#sec01">section01</a></li> <li><a href="#sec02">section02</a></li> <li><a href="#sec03">section03</a></li> <li><a href="#sec04">section04</a></li> <li><a href="#sec05">section05</a></li> </ul> </nav> <div class="co
target="_blank"を使わずに別ウィンドウで開く
通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか？ と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチスマートじゃない。 例えば下記で紹介されているような。 http://allabout.co.jp/internet/hpcreate/closeup/CU20040118A/ コレはコレで今までの問題を解決するにはいいのかなーと思うのですが、ボクが個人的に求めているのはもうちょっとスマートなやり方。 今まで、この問題に関して深く調べた事が無かったのですが、雲のむこうの人からこういう方法もあるよ。 って教わったので、今回はそのやり方を紹介いたします。 取り合えず、何だかんだ言って結局JavaScriptを使うわけです
フィルター可能な選択リスト作成「multi-list」:phpspot開発日誌
multi-list フィルター可能な選択リスト作成「multi-list」 文字列でフィルタできるチェックボックス付きのリストを生成できます。 関連エントリ リッチな動画のリストUIを作成できる「Video Wall」
これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
CSS変数を制御するJavaScriptスニペット
Result CSS変数を更新するJSスニペットです。べんり。 ※本コードは非依存のバニラJSです let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });css.mover { width: 50px; height: 50px; background: red; position: absolute; left: var(--mouse-x); top: var(--mouse-y); }html<div class="mover"></div>viaUpdati
スクロールアニメーションを実装できる超軽量且つ非依存のライブラリ・「Sal.js」
Sal.jsはページのスクロールに応じて動作するアニメーションエフェクトを実装出来る非依存型のJavaScriptライブラリです。軽量で他ライブラリ不要で動作、導入も簡単と、良い仕様な印象でした。エフェクトはカスタムデータ属性で管理できます。 <div data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease-out-bounce" ></div>楽でいいですね。ライセンスはMIT。 Sal.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://alexfox.dev/laxxx/
examples/lazyimages_without_scroll_events.js at master · puppeteer/examples
ページのスクロールに応じて任意の要素にアニメーションエフェクトを付与できる非依存の軽量ライブラリ・「ScrollOut」 | かちびと.net
firefoxで event.preventDefault(); を使うとエラーになる場合の対処方法 | Search Light（CakePHP PHP jQuery JavaScript CSS Linux MySQLMac）
ミニマルなスタイルのHTML5製ミュージックプレイヤー・「cPlayer」 | かちびと.net
Vue.jsベースのオープンソースなUIコンポーネントライブラリ・「Element」
ブロック要素の背景にYoutube動画を設定できる「videoBackground」:phpspot開発日誌
音に合わせて要素をアニメーションさせるスクリプト・「Rythm.js」 | かちびと.net
マガジン形式のグリッドレイアウトを実現する「stratum.js」:phpspot開発日誌
画面を一気に切り替えるかっこいいエフェクト実装「Collapsing Logo Effect」:phpspot開発日誌