OpenTelemetryでパフォーマンス改善とエラー調査ができる理由

2023/11/19 6 users OpenTelemetry trace トレーシング エラー

はじめに OpenTelemetryのトレーシングには色々な情報が付与されるため、パフォーマンスやエラーの調査に利用することが出来ます。 この記事ではOpenTelemetryを使った調査方法について紹介します。 ※コードのサンプルにGoを使用していますが、Go以外の言語でも変わりません。 TraceとSpan はじめにOpenTelemetryのトレ... 続きを読む

コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック

2023/07/09 28 users CSS コピペ ラベル テクニック フロート

フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで...記事の続きを読む 続きを読む

IntersectionObserverではてなブログ記事内のApple Musicを自動再生する - Log

2023/02/13 15 users IntersectionObserver log 要件定義

Twitterに要件定義が転がっていたのでIntersectionObserverを用いて実装しました。 以下のコードを記事のどこかに貼り付けると、画面右下に自動再生ボタンが表示されます。自動再生ボタンを押すと、画面で見えている「iTunes商品紹介」を自動で再生するようになります。 再生中 <span></span><style> #autoplay-btn{colo... 続きを読む

空のdiv要素についての哲学的な話 - lacolaco-notes

2021/09/07 14 users dskd uhyo 本筋 div要素 原理

主義主張の色が強い話題には古くから培われた哲学的な視点が役に立つ。 哲学者たちが残してきた原理・原則から、こうした問いをどのように解決できるかを考える。 話題の本筋はこのあたり 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskd 空のdiv要素について - uhyo/blog 「当為」とは... 続きを読む

空のdiv要素について - uhyo/blog

2021/09/06 71 users uhyo 妥当 span要素 div要素 観点

昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskdこの記事は空のdiv要素やspan要素が妥当かどうかという疑問にHTML仕様の観点から考察を加える大変面白い記事です。記事の結論として... 続きを読む

中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskd

2021/09/06 19 users dskd タギング div HTML div 要素

公開日 2021年9月6日 タギング HTML レイアウトや装飾目的で、中身のない div 要素や span 要素、いわゆる「空 div」「空 span」を作ることはままある。しかしそれは仕様として妥当なのだろうか？ 目次 レイアウト目的の空 div の例 装飾目的の空 span の例 HTML にレイアウト目的や装飾目的のための要素はない div と s... 続きを読む

ネアンデルタール人由来の遺伝子に起因する新型コロナウイルス症の重症化: 雑記帳

2020/10/04 15 users 遺伝子 ネアンデルタール人由来 雑記帳 重症化 color

ネアンデルタール人（Homo neanderthalensis）由来の遺伝子に起因する新型コロナウイルス症の重症化に関する<a href="https://doi.org/10.1038/s41586-020-2818-3"><span style=color:#e00>研究</span></a>（Zeberg, and Pääbo., 2020）が<a href="https://www.afpbb.com/articles/-/3307571"><span style=color:#e00>報... 続きを読む

モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック | コリス

2020/02/21 17 users コリス トグルスイッチ div モダンCSS テクニック

モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form... 続きを読む

jQueryスニペット：FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる | かちびと.net

2019/04/28 25 users justify jQueryスニペット Flex net 応用

Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています ... 続きを読む

[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック | コリス

2018/09/19 26 users コリス プログレスバー CSS HTML テクニック

フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。 シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビジュアル化されています。 <ol class="progress-bar"> <li class="is-active"><span>Objective &amp; Templa... 続きを読む

Elastic APM の計測対象関数を拡張する（Python編） ｜ Developers.IO

2018/03/18 7 users Elastic APM Developers.IO ela

Elastic APM はアプリケーションのパフォーマンスを計測、可視化するツールです。Web リクエスト〜レスポンスだけでなく、Span を利用することで任意の処理を計測できます。Span の処理をアプリケーション内に実装することなく、自由にパフォーマンスを計測する方法をご紹介します。 概要 Elastic APM の概要と、詳細と 2週に続けてブログエントリしました。今までのエントリで Ela... 続きを読む

[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し | コリス

2016/12/06 111 users コリス CSS ol要素 HTML テクニック

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはす ...記事の続きを読む 続きを読む

CSSだけで縦書きを表現する | スターフィールド株式会社

2015/12/14 31 users 縦書き CSS Demo 定石 縦書きレイアウト

和風なwebサイトの場合、縦書きのデザインをすると思います。 以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。 グッと和風感がでますよね！！ 深山山荘オフィシャルサイト 縦書きの表現は、画像か１つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。 (IEは独自の表現で出来るようです) とりあえず、DEMOを作りまし... 続きを読む

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

2015/06/26 111 users コピペ Yukihy Life カスタマイズ disp ブログ

2015-06-26 コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ ブログ ブログ-カスタマイズ text-small">◯◯</span>」の部分を消去してください。 その後下のコードをコピペです。 .follow-btn{ width: 100%; text-align: left; margin-bottom: 10px; } .follow-btn a { disp... 続きを読む

ゴーストボタンにマウスを乗せたときの動きいろいろ16個｜Webpark

2015/05/20 312 users Webpark 擬似要素 HTML マウス サンプル

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せ... 続きを読む

Font Awesomeで回転したいときfa-spinが便利 - Qiita

2015/04/20 97 users Qiita Font Awesome span class

<p><span class="fa-spin">く <span class="fa-spin">る <span class="fa-spin">く <span class="fa-spin">る <span class="fa-spin">く <span class="fa-spin">る <span class="fa-spin">く <span class="fa-spin">る <span... 続きを読む

CSSとテキストで作るローディングアニメーション・「Animated Type Loader」 - かちびと.net

2015/03/05 21 users ローディングアニメーション CSS keyframes 装飾

Animated Type Loader Animated Type Loaderはテキストで作られたローディングを実装する為のCSSです。keyframesと:nth-of-typeを使ってspanでラップしたテキストを順番に表示させる、というシンプルなもの。テキストのみなのでマークアップやテキストの変更、CSSによる装飾など、管理が楽で良いですね。探せばゴロゴロとチュートリアルや紹介記事が出る... 続きを読む

[CSS]アイデアが面白い！画像無しで、かわいいデザインのラベルをスタイルシートで実装するテクニック | コリス

2015/02/23 72 users product コリス ぺろ CSS div class

ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。 カード状のコンテンツにも画像に使っても面白そうです。 Label Overlay 実装は、こんな感じ。 HTML ラベルは画像無し、spanを2つ使用して実装しています。 <div class="product"> <div class="product-image"> <span class... 続きを読む

[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック | コリス

2014/10/02 89 users パタッ コリス article CSS アニメーション

スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。 パタッは2種類、↓の一つ目から二つ目を想像してみてください。 Reading Is Fundamental 見事に再現されていますね。 HTML 一つ目に紹介したデモ、半分からパタッとなるHTMLから。 開く時のテキストの区切れはspanで実装します。 <article> <a clas... 続きを読む

JavaScriptで目次を自動作成 - SHIGETA BLOG

2014/07/09 11 users 目次 JavaScript Mokuji 自動作成 PHP

JavaScriptで目次を自動作成してしまおうと、考えた。 もちろん、PHPを使ったって良いんだけれど、PHPはローカルでは確認できないので.... あらかじめ、目次項目にしたいものを<h4>タグにしておく。 もちろん、<h3>だって何だっていいんだが、混ぜたらだめである。 もうひとつ、あらかじめ、目次を置きたい場所に <span id=mokuji></span> を置いておく。 それからもう... 続きを読む

ブログのネタが思いつかない時に、僕が実践している5つのこと | シンプルデイズ

2014/05/19 9 users シンプルデイズ ネタ ブログ 文章 SNS

/span> ■「ブログに書くことが思いつかない！」という時の対処法 「ブログのネタが無い！」ブログを書いていたら、誰もが陥る状態です。 日記的なブログやSNSに書くような日常系のことだったら、ネタに困ったりすることも少ないかもしれません。 ですが、日記的な文章ではなく情報発信としてブログを書いている、しかも毎日書いているという場合だと、ネタに困ってしまう日は必ず来てしまいます！ 僕も仕事柄アウト... 続きを読む

[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック | コリス

2014/04/21 341 users コリス CSS 左右 テクニック テキスト

hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作... 続きを読む

[M] WordPressを使っていると入りやすい中身のないタグ要素をjsで抹殺する方法 | mbdb (モバデビ)

2014/01/27 34 users mbdb 憶え モバデビ HTML 文法上

WordPressを使っていると入りやすい中身のないタグ要素をjsで抹殺する方法 Hacks WordPress 201401 28 WordPressを使っている人には憶えがあると思うのですが、記事を書いて更新して、その後記事のソースを見てみると、入れたはずのない<p></p>や<span></span>が入っていることがあります。 なんだか気持ち悪いし、HTMLの文法上よろしくないんですよね。... 続きを読む

[WordPress]アイキャッチのURLを取得してCSSで背景画像に設定する方法*prasm

2014/01/16 48 users prasm background アイキャッチ div CSS

こんな感じ、別にspanでなくてもdivでもなんでも、インラインで指定します。 アイキャッチをbackgroundで指定できるとどういいのか？ こればっかりは好みとしか言いようがありません。別にバックグラウンドで指定しなくても、普通に呼んでpositionで好きに配置することも出来ますしね。 prasmでの使い方 主にモバイルテーマで使っています。 ヘッダー部分のアイキャッチだけが固定でブログタイ... 続きを読む

横に水平線のあるテキスト · terkel.jp

2014/01/08 141 users terkel Demo CSS 見出し 水平線

おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Latest Posts</span></h2> マークアップはこのよ... 続きを読む