「css」を含む日記

■anond:20260609150136言及先エントリを開く

#CSSでプログラミングを始めよう

Permalink | 記事への反応(0) | 15:04

ツイート シェア

■ブクマ一覧で古い増田に気付きやすくなるユーザースタイル

はてなブックマーク https://b.hatena.ne.jp/ サイト内で適用させると、古い増田にだけ、タイトルの横に「2025」などのラベルが付きます。

冒頭の .../2026 の部分で「2026年の増田」だけラベル付けを除外しているので、この部分は毎年変える必要があります。また、3000 などに変えれば全ての増田にラベルが付きます。

/* 増田 古い投稿 */
h3 a[href^="https://anond.hatelabo.jp/20"]:not([href^="https://anond.hatelabo.jp/2026"])::after{
  content: attr(href);
  font-family: monospace;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  margin-left: .5em;
  vertical-align: middle;
  margin-bottom: .25em;
  width: 4ch;
  text-indent: -26ch;
  line-height: 1.2em;
  background: #dddc;
  color: #999;
  border-radius: .25em;
  border-left: .25em solid transparent;
  border-right: .25em solid transparent;
  font - size: 80%;/* 増田のNGワードなのでハイフン前後のスペースを抜いてください */
  font-weight: normal;
}

ユーザースタイルを適用する方法は [Stylus Chrome] や [Stylus Firefox] などのキーワードで検索して調べてみてください。

Permalink | 記事への反応(0) | 12:47

ツイート シェア

■スーパーpre記法（シンタックス・ハイライト）の不具合のテスト

追記: 2026-06-02 にほとんど修正されました。NGワード(anond:20260424001041)だけはこのまま行くようです。

/* スーパーpre記法 >|js|...||< */
/*
行頭のアスタリスクが増える不具合のテスト(2026-06-02 修正された)
*/
/* アンド記号が正しく書けない。数値参照でも実体参照でも書けない。(2026-06-02 修正された) */
if(true && true) console.log('OK');
/* 大なり記号はそのまま書ける。 */
if(10 > 1) console.log('OK');

/* スーパーpre記法 >|css|...||< */
/*
行頭のアスタリスクが増える不具合のテスト(2026-06-02 修正された)
*/
/* s upport がNGワードなのでスペースを挟まないと書けない */
@s upports (display: flex){
  article{
    /* font - size がNGワードなのでスペースを挟まないと書けない */
    font - size: 2em;
  }
}
/* 大なり記号はそのまま書ける。 */
body > p{
  /* アンド記号が正しく書けない。数値参照でも実体参照でも書けない。(2026-06-02 修正された) */
  & a{
    color: red;
  }
}

/* pre記法 >|...|< */
/*
行頭のアスタリスクが増える不具合のテスト(2026-06-02 修正された)
*/
アンド記号 & はそのまま書ける。

/* 引用記法 >>...<< */

行頭のアスタリスクは見出しになる(今まで通り)

本文でもアンド記号 & 大なり記号 > 小なり記号 < は、数値参照を使わずそのまま書けるようになった。

via:

はてな匿名ダイアリーで記法に関する不具合を修正しました - はてラボ 開発者ブログ

https://labo.hatenastaff.com/entry/2026/05/28/155652

Permalink | 記事への反応(2) | 18:04

ツイート シェア

■はてなブックマークの検索結果ページで、フィルタリング選択肢を改変するユーザースクリプト

ソースコードがシンタックスハイライト付きで書けるようになった 記念に、はてな向けのコードを貼ってみるテスト。

動作例のスクリーンショット: Hatena Bookmark Search Filters

掲載当初に指摘した以下の2点は既に修正されました。

• (function(){ の2行後にある && が正しく認識されないようだ。数値参照で &#38;&#38; と書いてもダメ。
• (function(){ 直前の **/ だけ、なぜかアスタリスクがひとつ余計に追加されてしまっている謎の現象。見出し記法の認識と衝突してる…？

// ==UserScript==
// @name        Hatena Bookmark Search Filters
// @description はてなブックマークの検索結果ページで、フィルタリング選択肢を改変します。
// @namespace   knoa.jp
// @include     https://b.hatena.ne.jp/q/*
// @version     2.0.0
// @grant       none
// ==/UserScript==
/*
2025-08-22 名称変更
新: Hatena Bookmark Search Filters
旧: Hatena Bookmark Users Filter
*/
(function(){
  const SCRIPTID = 'HatenaBookmarkSearchFilters';
  if(window === top && console.time) console.time(SCRIPTID);
  const MS = 1, SECOND = 1000*MS, MINUTE = 60*SECOND, HOUR = 60*MINUTE, DAY = 24*HOUR, WEEK = 7*DAY, MONTH = 30*DAY, YEAR = 365*DAY;
  const COUNTS = [
    {value:    1, label:    '1 user'},
    {value:    3, label:    '3 users', default: true},
    {value:    5, label:    '5 users', extra: true},
    {value:   10, label:   '10 users', extra: true},
    {value:   30, label:   '30 users', extra: true},
    {value:   50, label:   '50 users'},
    {value:  100, label:  '100 users'},
    {value:  300, label:  '300 users', extra: true},
    {value:  500, label:  '500 users'},
    {value: 1000, label: '1000 users', extra: true},
  ];
  const RANGES = [
    {value: 'all', label: 'すべて'},
    {value:   'd', label: '1日',   extra: true},
    {value:  '2d', label: '2日',   extra: true},
    {value:  '3d', label: '3日',   extra: true},
    {value:   'w', label: '1週間'},
    {value:  '2w', label: '2週間', extra: true},
    {value:   'm', label: '1ヶ月'},
    {value:  '2m', label: '2ヶ月', extra: true},
    {value:  '6m', label: '6ヶ月', extra: true},
    {value:   'y', label: '1年'},
    {value:  '2y', label: '2年',   extra: true},
    {value:  '5y', label: '5年',   extra: true, default: true},
  ];
  const site = {
    targets: {
      usersList: () => $('ul:has(a[href*="users=1"]):has(a[href*="users=3"])'),
      rangeList: () => $('ul:has(a[href*="date_range=all"]):has(a[href*="date_range=w"])'),
      date_begin: () => $('li:has(> input[name="date_begin"])'),
      date_end:   () => $('li:has(> input[name="date_end"])'),
    },
  };
  let elements = {};
  let core = {
    initialize: function(){
      elements.html = document.documentElement;
      elements.html.classList.add(SCRIPTID);
      core.ready();
    },
    ready: function(){
      core.getTargets(site.targets).then(() => {
        console.log(SCRIPTID, "I'm ready.");
        core.rebuildUsers();
        core.rebuildRanges();
        core.addStyle();
      }).catch(e => {
        console.error(`${SCRIPTID}:`, e);
      });
    },
    /* ブックマーク数 */
    rebuildUsers: function(){
      const current = location.href.includes('users=') ? parseInt(location.href.match(/users=([0-9]+)/)[1]) : COUNTS.find(c => c.default).value;
      const ul = elements.usersList, template = ul.children[0].cloneNode(true);
      while(ul.children.length > 0) ul.removeChild(ul.lastElementChild);
      COUNTS.forEach(c => {
        const li = template.cloneNode(true);
        const a = li.querySelector('a');
        a.classList.toggle('extra', c.extra === true);
        a.classList.toggle('is-current', c.value === current);
        a.href = a.href.replace(/(users)=1\b/, '$1=' + c.value);
        a.textContent = c.label;
        ul.appendChild(li);
      });
    },
    /* 期間指定 */
    rebuildRanges: function(){
      const current = location.href.includes('date_range=') ? location.href.match(/date_range=(all|[0-9]*[dwmy])/)[1]
        : (['date_begin=', 'date_end='].some(p => location.href.includes(p)) ? null : RANGES.find(r => r.default).value);
      const ul = elements.rangeList, template = ul.children[0].cloneNode(true);
      while(ul.children.length > 0) ul.removeChild(ul.lastElementChild);
      RANGES.forEach(r => {
        const li = template.cloneNode(true);
        const a = li.querySelector('a');
        a.classList.toggle('extra', r.extra === true);
        a.classList.toggle('is-current', r.value === current);
        a.href = a.href.replace(/(date_range)=all/, '$1=' + r.value);
        a.textContent = r.label;
        ul.appendChild(li);
      });
      /* 日付指定(から/まで) */
      elements.date_begin.classList.toggle('is-current', location.href.match(/date_begin=[0-9-]+/) !== null);
      elements.date_end.classList.toggle('is-current', location.href.match(/date_end=[0-9-]+/) !== null);
    },
    getTarget: function(selector, retry = 10, interval = 1*SECOND){
      const key = selector.name;
      const get = function(resolve, reject){
        let selected = selector();
        if(selected === null || selected.length === 0){
          if(--retry) return console.log(SCRIPTID, `Not found: ${key}, retrying... (${retry})`), setTimeout(get, interval, resolve, reject);
          else return reject(new Error(`Not found: ${selector.name}, I give up.`));
        }else{
          if(selected.nodeType === Node.ELEMENT_NODE) selected.dataset.selector = key;/* element */
          else selected.forEach((s) => s.dataset.selector = key);/* elements */
          elements[key] = selected;
          resolve(selected);
        }
      };
      return new Promise(function(resolve, reject){
        get(resolve, reject);
      });
    },
    getTargets: function(selectors, retry = 10, interval = 1*SECOND){
      return Promise.all(Object.values(selectors).map(selector => core.getTarget(selector, retry, interval)));
    },
    addStyle: function(name = 'style', d = document){
      if(html[name] === undefined) return;
      if(d.head){
        let style = createElement(html[name]()), id = SCRIPTID + '-' + name, old = d.getElementById(id);
        style.id = id;
        d.head.appendChild(style);
        if(old) old.remove();
      }
    },
  };
  const html = {
    style: () => `
      <style type="text/css" id="${SCRIPTID}-style">
        /* ブックマーク数 */
        ul[data-selector="usersList"]{
          display: grid;
          grid-template-columns: 6em 6em auto;
        }
        ul[data-selector="usersList"] > li:nth-child(4),
        ul[data-selector="usersList"] > li:nth-child(7),
        ul[data-selector="usersList"] > li:nth-child(10){
          grid-column-start: 1;/* 改行 */
        }
        ul[data-selector="usersList"] > li:nth-child(10){
          margin-right: -.5em;/* 1000 users のみ横幅を追加 */
        }
        ul[data-selector="usersList"] > li > a.extra{
          text-decoration: underline dotted;
          text-underline-offset: .25em;
        }
        /* 期間指定 */
        ul[data-selector="rangeList"]{
          display: grid;
          grid-template-columns: 4.5em 4.5em 4.5em auto;
        }
        ul[data-selector="rangeList"] > li:nth-child(1){
          grid-column: 1 / -1;/* 全幅 */
        }
        ul[data-selector="rangeList"] > li:nth-child(2),
        ul[data-selector="rangeList"] > li:nth-child(5),
        ul[data-selector="rangeList"] > li:nth-child(7),
        ul[data-selector="rangeList"] > li:nth-child(10){
          grid-column-start: 1;/* 改行 */
        }
        ul[data-selector="rangeList"] > li > a.extra{
          text-decoration: underline dotted;
          text-underline-offset: .25em;
        }
        form.js-entrysearch-datepicker-form li.is-current{
          background: #f6f7f8;
          color: #333;
          font-weight: 700;
        }
        form.js-entrysearch-datepicker-form input{
          vertical-align: baseline;
          margin: 0 .25em 6px .5em !important;
        }
        /* セーフサーチが遅延読み込みされるせいで期間指定の位置がズレる問題を回避 */
        .left-container{
          display: flex;
          flex-direction: column;
        }
        .left-container .js-safe-search-div{
          order: 999;/* いちばん最後でよい */
        }
        .left-container ul.centerarticle-sub-navi:last-child{
          margin-bottom: 0;/* flex化の影響で margin collapsing がなくなるのを埋め合わせる */
        }
      </style>
    `,
  };
  const $ = function(s, f = undefined){
    let target = document.querySelector(s);
    if(target === null) return null;
    return f ? f(target) : target;
  };
  const $$ = function(s, f = undefined){
    let targets = document.querySelectorAll(s);
    return f ? f(targets) : targets;
  };
  const createElement = function(html = '<div></div>') {
    const policy = createElement.policy ??= trustedTypes.createPolicy(SCRIPTID, {createHTML: s => s});
    const template = document.createElement('template');
    template.innerHTML = policy.createHTML(html);
    return template.content.firstElementChild;
  };
  core.initialize();
  if(window === top) console.timeEnd(SCRIPTID);
})();

テスト用:

「はてな 」 を検索 - はてなブックマーク

https://b.hatena.ne.jp/q/%E3%81%AF%E3%81%A6%E3%81%AA%20?target=all&sort=recent

Permalink | 記事への反応(0) | 17:24

ツイート シェア

■anond:20260519214545言及先エントリを開く

従業員6名しかいないサービスのエントリがホッテントリに上がりすぎなんよ。

バイトがバズリそうなネタをひたすら投稿しているから質悪いエントリ多いし。

新着エントリなんかは汚染がひどすぎる。

https://b.hatena.ne.jp/entrylist/fun

https://b.hatena.ne.jp/entrylist/life

青バッジ創作ツイとか新幹線ネタとか見る人を不快にさせるだけのエントリが多い印象。

タイトル見ただけでも「うわぁ…」って思うこと多いからユーザCSSでリンクすら見えないようにしている。

Permalink | 記事への反応(1) | 08:00

ツイート シェア

■AIでプログラマーは過労死する

いやさあ、さんざんプログラマー不要論が唱えられたけど、少なくとも当面の間はむしろ真逆の未来の方が見えてませんか？

素人でも本番リリースレベルのプログラムが作れるようになったとはいえ、それ本当に本番に出すんすか？例えばそれで1億円の商売をするんすか？脆弱性ニュースが飛び交ってるこの世の中で？そもそもビジネスの要望を現実のアルゴリズムに落とし込めているかも怪しいのに？

その一方で、デザインやHTML/CSSコーダーの仕事はAIに出来てしまう時代になってしまった。これらは「失敗」で致命的なビジネスリスクを呼び込む可能性はまぁ低いだろう。少なくとも脆弱性で全資金流出しましたなんてことはない。言ってしまえば素人のAIに代替させるリスクが低い。つまり当面の間はプログラマーにAIを使わせてデザイナーもコーダーを代替させるのが手っ取り早いという話になりかねない。過労死への道だ。

Permalink | 記事への反応(1) | 23:00

ツイート シェア

■/* トラックバックツリーの投稿時刻が知りたい */

ワイだけ？

/* トラックバックツリーの投稿時刻が知りたい */
.trackback-header > a:first-child::after{
  content: attr(href);
  margin-left: .5em;
  display: inline-block;
  background: #ddd;
  color: #999;
  border-radius: .25em;
  border-left: .25em solid transparent;
  border-right: .25em solid transparent;
  font-family: monospace;
  font - size: 80%;/* 増田のNGワードなのでハイフン前後のスペースを抜いてください */
  font-weight: normal;
  line-height: 1.2em;
  text-indent: -34ch;
  width: 6ch;
  height: 1.2em;
  vertical-align: bottom;
  margin-bottom: .25em;
  overflow: hidden;
  white-space: nowrap;
}

ユーザースタイルを適用する方法は [Stylus Chrome] や [Stylus Firefox] などのキーワードで検索して調べてみてください。

Permalink | 記事への反応(3) | 21:02

ツイート シェア

■AIで初めてアプリを作ったから見てほしい

みなさんお疲れ様です。

Claude Codeさんといっしょに、人生で初めて自分用のwebアプリを作成しました。技術面で特筆すべきところはないかもしれません。大切な猫の生活を記録するための自分たちにとって必要なアプリです。「こんなふうにすればもっといいよ」や「すばらしい！」など、プロの意見をいただければ幸いです。よろしくお願いいたします。

◇URL

https://tabi-web-app.vercel.app

◇ゲストログイン

メールアドレス：[email protected]

パスワード：guest

◇技術スタック

• Next.js 14 App Router
• Prisma + PostgreSQL（Neon）
• NextAuth（Google OAuth）
• Tailwind CSS
• date-fns
• Vercel（デプロイ先）

Permalink | 記事への反応(2) | 18:11

ツイート シェア

■anond:20260427191520言及先エントリを開く

君エンジニア？

SESか？

いいとこJAVAとかやってそうなぐらいか

世間のエンジニアがAIやばいやばい言ってたけどサイト見て思ったわ

もう8割ぐらいの奴はあらゆる点で完全にAIに勝ててないんだろなって

バイブコーディングじゃないと思ったのはデザインセンスがないからエンジニアなんだろなってこと

あと読み込みの遅延設定がちゃんとしてない

AIだったらさすがにこの辺ちゃんとやってるだろ？

あとCSSのデザイン幅横百パーセントにしてない

デザインは二の次だからレスポンシブにしなくてもいいけど、さすがに表示ぐらいはちゃんとやるよねと…

デザインセンスがないことでAIじゃなさそうだと証明できるのはいいけれど、さすがにその配色だと普通の人は寄りつかないと思う

Permalink | 記事への反応(1) | 00:01

ツイート シェア

■anond:20260422200616言及先エントリを開く

デバッグとか仕事だけで腹いっぱいなんだが、ちょっとだけ調べてみた

Firefox 150.0の「強化型トラッキング防止機能」設定をカスタムにして、ブロックする対象に「トラッキングコンテンツ」を含めて、かつ「サイトの主要な問題を修正 (推奨)」のチェックをOFFにしていると、はてなのサイトのHTMLドキュメント内で読み込もうとしている「https://cdn.www.st-hatena.com/css/global.css」を含む諸々のコンテンツがブロックされる

ブラウザコンソールをみたら「強化型トラッキング防止が有効なため、“<URL>” のリソースがブロックされました」というログが確認できた

ちなみに「トラッキングコンテンツ」をブロックする設定でも、「サイトの主要な問題を修正 (推奨)」のチェックをONにすると、はてなブックマークではブロックされるコンテンツの数が大幅に減り、CSS等が読み込まれるので、表示がまともになる。でもはてなブログと匿名ダイアリーはこの設定でもダメで、ブロック対象から「トラッキングコンテンツ」を外す必要がある

よく分からんのは、例えば https://cdn.pool.st-hatena.com/valve/valve.js とか、はてなブックマークでは「サイトの主要な問題を修正 (推奨)」のチェックのON/OFFで読み込まれるか否かの挙動が変化するんだが、はてなブログと匿名ダイアリーではON/OFFのどちらでもブロックされるんだよなあ

Firefox tracking protection - Privacy on the web | MDN曰く：

Content is blocked based on the domain from which it is to be loaded.

Firefox ships with a list of sites which have been identified as engaging in cross-site tracking of users. When tracking protection is enabled, Firefox blocks content from sites in the list.

Sites that track users are most commonly third-party advertising and analytics sites.

ということなので、もしかしたらHTMLドキュメントとは異なるドメインからCSSとかを読み込もうとした時にFirefox内のリストと照合している感じなんだろうか？　でもそれだけだとはてなブックマークとはてなブログ・匿名ダイアリーとで症状が変わる理由を説明できないのだが……有識者の意見を聞きたいところ

ここから先は本職のWeb屋かブラウザ屋に任せたいなあ、ワイはそっち方面は素人なので

Permalink | 記事への反応(2) | 10:39

ツイート シェア

■Firefox 150.0ではてなのデザインテーマのCSSが読み込まれない

――現象が発生する条件がある気がするんや

ワイの環境だと、Firefoxの設定でトラッキングコンテンツをブロックするとデザインテーマのCSSが読み込まれなくて、いかにもHTMLオンリーな見た目になる。でもブロックを解除すると読み込まれるんや

Firefox 149.0.2では症状は確認できない

150.0だと起こる

150.0のChangeLogを読んで症状に関連しそうな変更点を探そうとしたけど、ようわからん

同じ症状が出るやつはおらんかねぇ

Permalink | 記事への反応(3) | 20:06

ツイート シェア

■anond:20260415195305言及先エントリを開く

はい、その内容は基本的に事実である可能性が高いです。

ご主人様がご覧になっている記事の主張どおり、ITmediaの「続きを読む」機能は、技術的には以下のような仕組みで実装されているケースがあります。

■ 仕組みの概要

多くのWebメディアでは、「続きを読む」をクリックした際に次のいずれかの方法が用いられます。

1. HTML内に全文を含め、CSSやJavaScriptで非表示にする方式

ページ読み込み時点で、記事の全文がHTMLに含まれている。

display: none; などのCSSで後半部分を非表示にする。

「続きを読む」ボタンを押すと、JavaScriptによって表示状態に切り替わる。

特徴

ブラウザの「検証（DevTools）」で簡単に全文を確認できる。

Webクリッパー（例：Obsidian Web Clipper）でも全文が取得されることがある。

実装が簡単で、ページ遷移が不要なため表示が高速。

2. クリック時に追加コンテンツを取得する方式（API通信）

初期HTMLには冒頭部分のみが含まれる。

「続きを読む」クリック時に、サーバーへリクエストを送り、残りの本文を取得する。

有料記事や会員限定コンテンツでよく使用される。

特徴

DevToolsでHTMLを見ただけでは全文は確認できない。

アクセス制御を実装しやすい。

■ なぜこのような実装が使われるのか

パフォーマンス向上：ページ遷移なしでスムーズに表示できる。

SEO対策：検索エンジンに全文を認識させやすい。

実装の簡便さ：開発コストが低い。

■ 注意点

ただし、全文がHTML内に含まれている場合でも、それを意図的に取得・再配布する行為は、利用規約や著作権に抵触する可能性があります。技術的に閲覧可能であっても、法的・倫理的な観点には配慮が必要です。

Permalink | 記事への反応(0) | 21:44

ツイート シェア

■田舎の印刷Web会社

って生き残れるの？

いまだにHTMLとCSSとjQueryとWP（当然一体型）しか触れない。そのくせデザイナーもコーダーも専業。

ディレクターは無知。みたいな。

仕事あるの？？？って思う。フリーランスに全部もってかれそう・・・

Permalink | 記事への反応(0) | 09:28

ツイート シェア

■

ご主人様～♡ もちろん知ってるよぉ！ あたし、はてな匿名ダイアリー（増田）のこと大好きだから、ミュート機能の話もバッチリ把握してるにゃん♪

でもね、公式のはてな匿名ダイアリー自体には、標準でミュート機能はないんだよね～。
キーワードや特定のユーザー、記事を非表示にするようなボタンとか設定は、残念ながらないの。

代わりにみんな使ってるのは：

• Chrome拡張「はてなミュート」（キーワードやURLで記事をミュートできる神ツール！）

• 非公式アプリ（masdとか）の一部にミュートっぽい機能が入ってる場合

• ブラウザのユーザーCSSやAdBlock系で自力で隠す裏技

ご主人様はどのミュートのこと話してるの？
公式のやつ？ それとも拡張機能のこと？
教えてくれたら、あたしもっと詳しくおしゃべりできるよぉ～💕

どう？ 最近うざい記事とかミュートしまくってる？ オタク界隈の増田あるあるだよね、わかる～！😂

Permalink | 記事への反応(1) | 00:23

ツイート シェア

■anond:20250911142304言及先エントリを開く

CSSを使うこちらもよろしく

[増田しぐさ] つつましきトラバツリー

https://anond.hatelabo.jp/20250911085501

ほぼ同じ時期(2025-09-11)にCSSとスクリプトの両方の対策が提案されたというのが面白いね

Permalink | 記事への反応(0) | 09:17

ツイート シェア

■Togetter/posfie クリックで即 X 開いちゃう問題を回避する方法

最近になって、画像を開こうとしたり、なんでもないテキストをクリックしただけでツイート元のXを開いてしまうようになったのが、非常にわずらわしい。というわけで、ユーザースタイルを書きました。

Togetter.com 誤クリック回避 — UserStyles.world

https://userstyles.world/style/27195

※ 毎朝9:00直後はアクセスできないので注意

2026年3月の仕様変更に抵抗する試みです。
- [画像ギャラリー] のボタンではなく、画像クリックで画像ギャラリーを開く仕様を取り戻します。
- 投稿文や余白などをクリックするだけでも予期せず X が開いてしまう仕様を回避します。

副作用として
- 投稿文にマウスカーソルを重ねても、マウスカーソルが I 字型に変化せず、矢印のままになってしまいます。それでもテキスト選択はできます。

PC・スマホ向けの導入方法

PC: 【Stylus】ウェブサイトにCSSを適用できる拡張機能。自由にカスタマイズ！

https://www.naporitansushi.com/stylus/

※ StylusはFirefox版もある https://addons.mozilla.org/ja/firefox/addon/styl-us/

iPhone: MaKeoverアプリでiPhone SafariのCSSをカスタマイズ！

https://gintachan.com/makeover-app-css-change-safari-how-to/

Android: スマートフォン Android版FirefoxのCSSカスタマイズ Stylus の使い方・初期設定方法

https://skypenguin.net/2025/06/21/post-109209/

X 上で見つけた同志

Mr.Boilさん: togetterのまとめ記事のポストの部分クリックするとXに飛ぶエリアがデカすぎる。

x.com/boil_san/status/2035233156929134732

どみにをん525さん: Togetter、画像のページ送りがわりと快適だったのに画像クリックでポストに飛ぶようになったの、致命的な改悪じゃないかなあ？漫画的なやつとかもう読めないし、むしろTwitterの方がポストを超えて画像送りができるようになって捗るし。

x.com/Dominion525/status/2035329875775807725

HiroMETALさん: togetterのサイト、ポストをクリックしたら、そのポストへ飛んでしまう挙動がウザ過ぎるので、拡張機能をCodexに作らせてみた。意図通り動いてなにより。 今まで作ったことなかったけど、Firefoxの場合は、開発者アカウントで登録作業しないと恒久対策できないのね。

x.com/_Hirot/status/2042631289832865859

銭投げサーバルさん: togetterで掲載されてるツイートの本文あたりのほぼ全域がclickableになってて、間違ってクリックしちゃうとツイートページに飛ぶんだよな。twitter社にそうしろと言われたのかもしれんけどbadui感はある。昔はそうじゃなかった気がする。

x.com/zeninage_serval/status/2048891570129363062

Mr.Boilさん: togetterでいつの頃からかまとめられたポストをクリックすると元ポストに飛ぶようになったのウザいなって思ってたのが最近飛ばなくなったんだけど、posfieは未だに飛ぶようになってる。仕様統一しとらんの？

(注: おそらくこの人の誤解または書き間違いで、2026-05-01時点でtogetterは変わらず、posfieの画像も変わらず、posfieの本文エリアのみ飛ばなくなった)

x.com/boil_san/status/2049667076407910802

Permalink | 記事への反応(0) | 19:06

ツイート シェア

■anond:20260210125440言及先エントリを開く

CSSなんて邪道漢は黙ってホームページビルダー6.0

Permalink | 記事への反応(1) | 12:55

ツイート シェア

■久しぶりに素のHTMLとCSSだけで"ホームページ"作った

なんか……いいよなやっぱり

このくらいでちょうどいい

過度なアニメーションもなく、ポチッとしたらサクッと画面遷移して

ソース開いたら見えてる画面の裏側がすべて書いてあってさ

この時代のWEB製作が俺は一番楽しかった気がするんだよな

思い出補正かな

そうかもな

Permalink | 記事への反応(4) | 12:54

ツイート シェア

■anond:20260121080910言及先エントリを開く

AI による概要

AI（特に生成AI）の急速な進化により、「フロントエンドエンジニアが不要になる」「仕事がなくなる」という言説は、近年非常に多く聞かれます。

結論から言うと、「単純なコーディングやボイラープレート（定型文）を書く仕事は消えるが、フロントエンドエンジニア自体は消えず、役割がより高度な領域へ変化・進化する」というのが、多くの専門家や現役エンジニアの共通認識です。

具体的な状況は以下の通りです。

1. なぜ「消える」と言われるのか（AIの脅威）

AIは、従来のコーディングプロセスを劇的に変化させています。

定型業務の自動化: UIデザインからHTML/CSS/コンポーネントコード（React, Vue.jsなど）への変換はAIが非常に得意としており、人間がゼロからコードを書く必要がなくなっています。

API連携・テスト生成: API連携のパターンやテストコード、デバッグ作業もAIで効率化されている。

「Vibe Coding（フィーリングコーディング）」: 曖昧な指示からアプリのプロトタイプを爆速で作れてしまうため、初期段階のフロントエンド実装がいらなくなる。

2. 「消えない」理由と求められる新たな価値

AIは「実装」を高速化しますが、「設計・判断・最適化」は依然として人間に依存します。

要件の解釈と複雑な設計: 曖昧な顧客の要件から正しいUI/UXを設計し、パフォーマンスを最大化する構造を考える能力は人間にしか難しい。

10%の仕上げ（ポーリッシュ）: AIが生成した90%のコードをレビューし、修正・最適化して実用化する「最後の10%」の作業は人間が担当する。

アクセシビリティ・セキュリティ: アクセシビリティの確保やセキュリティのチェック、パフォーマンスの微調整など、人間中心の細やかな対応が求められる。

AIツールの活用能力: AIを道具として使いこなし、開発速度を10倍、100倍にする「AI駆動型」エンジニアの需要が高まっている。

3. 今後生き残るために必要なアクション

AI時代には、単なる「コーダー」ではなく、以下の視点を持つエンジニアが生き残ります。

フルスタック化・UI/UXへの進化: フロントエンドの知識だけでなく、バックエンドやUI/UXデザインまで理解し、ビジネス全体を見渡せる人材。

AI駆動開発の習得: CopilotやCursorなどを駆使して、開発プロセスを自動化・効率化する。

深い専門性の追求: AIには代替しづらい、Web技術の深い知識や、特定フレームワークへの高度な熟練度を高める。

つまり、AIはフロントエンドエンジニアの「敵」ではなく、「面倒な作業を奪ってくれる強力なツール」となり、人間のエンジニアはよりクリエイティブな課題解決に集中できるようになると考えられています。

Permalink | 記事への反応(0) | 10:07

ツイート シェア

■子供に株を教えるために企業をイケメン化したゲームつくた

こんにちは！私は中卒シングルマザーおば！あ、待って叩かないで！ゲームを作った背景から隙自語させて！

所得制限を超えてるので社会にはおんぶに抱っこの層ではないんだ！……と言っておかないとお金の話なので叩かれそう……たくさんの予防線を張るね。インターネット怖いから！！そもそも、人はいつでも"そちら側"に回る可能性はあるんだから、働ける奴は働いて救える人を救うそれが正だと思うんだけど、…って、思想の話になるので今回はパス！

てなわけで、このわたくし、海外のぼんびー生まれでひょんなことから日本に来た（あ、国籍は日本にしました。たたかないでボクわるいスライムじゃないよ）けど言葉もわかんないし、学がない。数学とか7点だった。でも外国人ならではの身体能力の高さでスポーツ推薦で高校に滑り込んだけど、そのうち親の借金で高校に通えなくなった。そんな人生。

そして紆余曲折インド人を右に日本人男性と付き合って先に子供できたんや。だが婚姻届直前で相手は年齢詐称（うんと年下）判明して笑った。とにかく相手は頼れない、私も稼がなきゃいけない！子供を育てなきゃいけない！の使命感でいたら、結婚していたはずの男性は「別のシングルマザーを助けなきゃ！」と謎の使命感で私と離婚することになった。私はシングルマザーになった。ガシッ！ボカッ！アタシは死んだ。

まだ本題に入らないよ！！

シングルマザーとなっては、夫婦の快適さを考えるリソースは排除できるので徹底的に母子に集中できる。気がついたら子は中学生になっていた。私もなんとか一般人っぽい層に滑り込めた。数カ月に一度、く◯寿司で豪遊するのが幸せな層や。

そんな中、とにかく残業すれば成果は出る！！の脳筋プレイで働いてたらボーナスが手に入った。ボーナス！！すごい！！どうしよう……将来のために……どうするんだ！？

私に金融リテラシーはない！オルカンとかなんとか世の中は言ってた……気がする。はてなでも【素人はこれをやっとけ】みたいな記事をみた。文章が長くてよくわかんなかった。自分は長い文章を書くのに（ﾃﾞｭﾌﾌ）

とりあえず、見様見真似で（なんの？）現物っちゅーもんで、個別株に手を出してしまったようだ。その時の私は、割安（PBR？）ってものをダラダラみてた。むしろ、そこしか見てない。

湖◯屋が2500円ちょっとだった。100株購入した。

タ◯ラトミーも1500円だった。100株購入した。

子供を！！笑顔に！！してくれた企業が！！！市場から割安の評価！？！なにそれ！？！って気持ちで購入した。ボーナスはなくなった。バイバイ…👋😭

貧乏人の匂いが染み付いた私に、突然の大金はなかったものとするのがよい。株のことは忘れた。

忘れたけど、年1で株主優待がくる。そして子は「もうおもちゃで遊ぶ年齢じゃないけどねw」と笑った。けども、その優待はどういう仕組みなの？って聞いてきた。

仕組み……わからない。ググれカス、GPTに聞け……と言いたかったけど、せっかくの会話だ……小さい脳みそから答えをひねり出して、企業を支援して、そのお礼なんだよ☆ﾐみたいなことを言った気がする。

そしたら子は、自分も株がほしい。応援して株でお小遣いを増やす！と言い出した。うひょ

私は『ちょっ待っ！！』止めた。私も株を学ぼうとした結果、学べてないんや。正しく教えられない。

天を仰いだ。

そもそも、お金を出そうとする相手、つまりどんな企業かを知る必要があるやろ。知らん人間にぽーんと金を出すか？貧乏人にそんな博打はできん。

なので企業を擬人化してゲームにしようと思った（超飛躍）。ちょうど私は人間の男を信じられないフェーズだったので、乙女ゲームにハマっていた。二次元は裏切らない。とは言え、ときメモでアルバイトエンディングばかり迎えちゃうwww労働者の鏡www

話を戻そう。企業をイケメン化して、会社の特色、株の値動きを性格としたゲームを作ったんだ。

そして投資（会話）による株価の上げ下げが好意のパラメータ。噂（インサイダー、流布）で、他企業を貶めることもできる。そう、ゲームならね。

肝心のゲーム説明のところで、ちょっと雑になったけど伝われ〜〜

でも、開発しておきながらも「ぜんぜんわからない俺たちは雰囲気で株をやっている」状態だ。

株ガチ勢からみたら、何が金融リテラシーを学べるゲームです♥だよ（怒般若）って思うかもしれない。

そして子のために作ったはずが、子が「企業がイケメン…って何wwwPalantir？Cloudflare？何それ知らないwwwこんなに株って値動きするの？」って笑ってた。

いいんだ。君の好きなパソコンやインターネットはそいつらが支えてるんだ。ちょっとだけ、覚えてくれればいい。

結果、子は私のNISA枠を使わせて欲しいと結論を出した。

個別株じゃないんかーい！

みたいな気持ちでリリースしました。

よろしくお願いします。

▼株カレ

kabukare.vercel.app

• なお、個人開発ゆえサーバー代、LLM代は自腹です。脆弱性、不具合報告はヘルプ→Notion→利用規約でいただけると助かります！
• 企業は擬人化して特定できないようになってる気がしますが、商標の訴え等はお待ちください。訴訟の前に連絡ください！
• NISA枠云々は私のお金で子が指示を出す形で運用です
• この文章はAIを使っていません。んなことわかるかw

ここからは開発とイラストの裏話。

古き良きインターネット老人会おばなので、HTML、素js、cssで作ってます。jsはメモ帳3000行になったときにヤバいなと思ったのでCursorを使いました。Cursorを使ってリファクタリングした結果、ダイエットには成功したけど原形（読み方）わからんくなったwとは言え、こんなおばでも、AIの力を借りれてここまで出来るんだなと思った。ちな、おばは、pixivにも生息している絵描きヒプヲタ民でもあるが、全キャラスチルと立ち絵は体力的に描けない。腱鞘炎と肩こりがやばい。なので自分の草案イラストを読み込ませて、AIの力を借りて絵を出力しました。そして、ゲームバランス。実はおば、過去にインターネットサービスで一発屋したんだけど、システムバランスを気にしないでできるものばかりやったんや。でもこのゲームはダメや。何度やってもガチホのファストフード男子のマークの配当金が強くなってしまう（株としては正解と言えば正解なんだけどね）。四則演算しかしらない数学7点の頭では限界があって、ゲームバランスをAIに相談しながら作った。どこもかしこもAI、AI、AIとんでもない時代に生きてるな…と思いながらも、この変化を楽しみたいと思いました。

Permalink | 記事への反応(2) | 19:51

ツイート シェア

■anond:20260107161859言及先エントリを開く

31位以下

Permalink | 記事への反応(0) | 16:19

ツイート シェア

■anond:20260103184617言及先エントリを開く

昔は一体化してたけど、データ構造だけ取り出したい要望があって

データ構造はhtml、見た目はCSSときっぱり分けるようになったんだよ

Permalink | 記事への反応(0) | 19:07

ツイート シェア

■anond:20260103183328言及先エントリを開く

インラインCSSあるやろ、可読性やメンテナンス性を無視するなら一体化できるやで

Permalink | 記事への反応(0) | 18:34

ツイート シェア

■スパムとの戦いで振り返る、2025年の増田月間 100+ users 記事数の推移 (追記2)

増田年間 100+ users 記事数の推移(anond:20260101090052)の記事で、2025年の減少がスパムの影響を受けていたのではとの指摘があったので、記録として残しておきたい。(追記) ブコメで指摘があった非公開ファーストブクマbotも反映させた。(追記2) 用語解説を拡充した。

5-7月にかけての減少は主に英文スパム、11-12月にかけての減少は主に特定個人増田の影響を受けていたのではないかと思う。

(4月までにもスパムの報告はある)

用語解説

非公開ファーストブクマbot

「ある程度の長さの増田を書くと 無差別に非公開1userブクマしてきては翌日にはブクマ解除する(anond:20250220084238)」というbot。当初は動機が謎だったが(anond:20250210231425)、ファーストブクマカランキング(anond:20250105135324)を破壊する目的でやっていることが、本人を名乗る増田の口から告白された(anond:20250220170032)。

英文スパム

英語スパムとも。ただしスペイン語や日本語などでも投稿される。航空会社のカスタマーサービス、5ドルもらえるキャンペーン、ソーシャルメディアのフォロワー獲得、海賊版の無料映画などで客を釣る。増田の過去の投稿やニュースサイトの文章をコピペした上で有害リンクのみ付与するパターンも。いずれも最終的には詐欺やウィルス目的だと思われる。最盛期はほぼ毎秒投稿され、増田の新着記事はブックマーク一覧も含めてほぼこれで埋め尽くされた。はてな運営にあまりに放置されるので増田閉鎖説もささやかれたほど。現在は対策のおかげでかなり沈静化しているが、根絶したわけではない。

英文スパム対策CSS

英文スパムがあまりに酷かったので作られた。当初は頻出英単語を含む記事を弾くだけだったが、スパム側の変化に合わせて有害URLをリスト化するようになった。現在も更新され続けている。

はてなによる英文スパム対策

運営ブログなどで宣言されたわけではないが、8月に英文スパムは激減した。ユーザーが観測できる具体的な対策内容としては、基礎的な英単語さえも本文に書けなくなるなどの(anond:20250924215205)、かなりナイーブな措置も含まれている。

dorawii

増田常駐ユーザーで非常に投稿量が多い。律儀に署名を付けることが多いので、目立ついっぽうで比較的対策しやすい。自作スクリプトで自動セルクマするようになって、時間帯によってはブックマークのすべて(1+ user)の一覧に多数出現する。

pico-banana-app

🤣の顔文字アイコンでおなじみのAIブックマークbot。一番星はてのちゃんなどとは異なり、自認は人間。技術系の記事全般と増田を主戦場としており、スパム記事も含めてなんにでもブクマするため、ファーストブクマがブックマークのすべて(1+ user)の一覧を汚染しやすい。また、他のブクマカに乗っかって新着(3+ users)入りを後押しすることも多い。

魚拓増田

通称は安定しないが、れめくん、Boushi_inst、電気通信大学たいていなど、特徴的なキーワードと共に、たびたび魚拓(megalodon.jp)のURLを投稿する増田。非公開セルクマによってブックマークのすべて(1+ user)の一覧に多数出現するが、数分から数十分の速さで元記事もブックマークも削除してしまうために、長期的な痕跡は残りにくい。年末にしばらく増田から姿を消していたが、年が明けて活動を再開したようだ。

あおやまちゃん

ボスMNK、OMNKちゃんずなど、特徴的なキーワードと共に、顔文字いっぱいの電波日記を投稿し続ける増田。セルクマしているわけではなさそうで、記事の投稿数の割には、ブックマークの一覧に登場する頻度はひかえめ。魚拓増田ほどの速さではないが、数日経つと記事は削除してしまうようだ。

NGフィルタ

ブックマークのすべて(1+ user)の一覧をチェックしているユーザーにとって、特定個人増田の 1 user ブックマークが増えすぎたことに耐えられなくなって作られた。現在も更新され続けている。

Permalink | 記事への反応(4) | 20:41

ツイート シェア

■はてなのNGフィルタまとめ

はてなブックマークや増田で機能する、NGワードを元に記事を非表示にする方法をまとめました。

現在も機能する方法という観点で調べてみましたが、有力な抜け漏れがあったら教えてください。

はてなフィルター

https://hatenafilter.com/

外部サイト型のはてなブックマーク。

はてなNGの代替品作った (はてなフィルタ)

anond:20180609124213

ChromeとFirefoxの拡張で、はてなブックマークに有効。デフォルトで非表示になるサイト多数あり。AndroidならFirefox版が動くかも。

はてブの記事を、キーワードや URL でミュートする Chrome 拡張を作った (はてなミュート)

anond:20230305200055

はてブの記事をキーワードやURLでミュートする拡張のFirefox版も作った

anond:20230311142828

ChromeとFirefoxの拡張で、はてなブックマークに有効。AndroidならFirefox版が動くかも。

[はてブ]uBlock Originで特定のエントリーを隠す方法のメモ

anond:20180523215832

増田でuBlock Originを使って特定の単語を含むエントリーを隠す方法のメモ

anond:20180523222112

広告ブロック uBlock Origin を使っている場合に活用できる。同 Lite 版でも「カスタムフィルター」機能を使って対応できる。はてなブックマークだけでなく増田にも有効。面倒だろうけどAndroidならFirefox版が動くかも。

はてなブックマークの増田一覧向けNGフィルタ

anond:20251209224022

Tampermonkeyなどのユーザースクリプトを適用する拡張と共に、またはブックマークレットとして使う。はてなブックマークの増田一覧にだけ有効。スマホの場合アプリでは動かないが、面倒だけどブラウザでは動く^※。キーワードはノイズとなりやすいユーザーを中心に常時メンテナンス中。

はてな匿名ダイアリー特定ワード投稿非表示

anond:20251208175027

Tampermonkeyなどのユーザースクリプトを適用する拡張と共に使う。増田にだけ有効。面倒だけどスマホでも動く^※。

[増田しぐさ] 増田CSSを紹介する記事(英文スパム対策付き)

anond:20250701235606

Stylusなどのスタイルシートを適用する拡張と共に使う。増田にだけ有効。面倒だけどスマホでも動く。スパム対策はビジネスや詐欺のURLを中心に常時メンテナンス中。

※ スマホでのユーザースクリプトの動かし方
https://chatgpt.com/share/6936aa6a-e2dc-800f-ab39-021d68a25b87

検索用: はてなブックマーク はてブ はてな匿名ダイアリー 増田 スパム キーワード NGワード フィルタ ミュート 非表示 削除 隠す ブロック ユーザースクリプト ユーザースタイル hatena bookmark anond spam keywords ngwords filter mute hide hidden display none block userscript JavaScript js css style

Permalink | 記事への反応(3) | 23:13

ツイート シェア