タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG

2024/04/02 12 users None TAKLOG display アコーディオン タブ

タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるhidden="until-found"はhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキ... 続きを読む

Server Actionsにユーザ操作されたくないデータは渡さない

2024/02/27 6 users Server Actions input データ Price

Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあっ... 続きを読む

わたしはページ内検索を普通に使いたい

2023/01/19 166 users わたし ページ内検索 ウェブブラウザー ストレス 種類

以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-over... 続きを読む

Unicodeの異体字セレクターを使ったステガノグラフィ - Qiita

2022/06/05 13 users unicode 字体 文字列 概要 文字

Unicodeの異体字セレクター(variation selectors)を使い、ユニコード文字列内に隠し情報を埋め込む方法です。 異体字セレクターとは 異体字セレクターは、文字の字体を詳細に指定するモディファイアのようなもの 異体字セレクターは16種類のコードポイントがある(FE00~FE0F) 仕組みの概要 隠したい文字列(hidden)を文字... 続きを読む

HTML の hidden 属性が列挙型に変更され hidden="until-found" が追加

2022/03/24 17 users 属性 列挙型 HTML New 要素

すべての HTML 要素に指定できる hidden 属性(html.spec.whatwg.org)はこれまで真偽属性(html.spec.whatwg.org)でしたが、このたび列挙型に変更され、新たに until-found が定義されました。 hidden="": Hidden 状態 hidden="hidden": Hidden 状態 hidden="until-found": Until found 状態 ← New! 2022年3月24日現在、 C... 続きを読む

正しいIT用語の読み方

2021/05/04 313 users 読み方 Ubuntu nginx Alt null

最近の若者は物を知らない。 IT企業に就職したのに、IT用語の読み方を間違える恥ずかしいやつが多くて困る。 新入社員でもこれぐらいは抑えておいてほしい。 nginx: んぎぃぃっんくすhtml: はとむるAlt: あるとhidden: ひでんheight: へいとnull: ぬるUbuntu: うぶんつPHP: ぺちぷUPnP: うぴんぴPPPoE: ぽぽぽえーIEEE: ... 続きを読む

Macのマイクが利用中になるとディスプレイ上に通知してくれるオープンソースのユーティリティ「Micro Sniff」がリリース。 | AAPL Ch.

2020/04/02 14 users ユーティリティ AAPL マイク Mac リリース

Macのマイクが利用中(アクセスがある)になるとディスプレイ上に通知してくれるオープンソースのユーティリティ「Micro Sniff」がリリースされています。詳細は以下から。 　Micro Sniffは、Hidden 続きを読む

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる | かちびと.net

2019/10/13 29 users table CSS セル overflow result

Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています css table { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; ... 続きを読む

IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する | かちびと.net

2019/07/24 56 users 文末 Edge CSS WebKit overflow

Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています css p { line-height: 1.4; max-height: 4.2em; overflow: hidden... 続きを読む

オンライン上でPDFを結合・分割することができるWEBサービス「I Love PDF」 | TechMemo

2018/04/03 11 users TechMemo modules 結合 PDF フッター

最近の投稿 オンライン上でPDFを結合・分割することができるWEBサービス「I Love PDF」 フッターに被らないスクロール追尾型のサイドバーを実装する方法 Contact Form 7のフォームにページタイトルやURLなどを隠し項目(hidden)で設定できるようになるWordPressプラグイン「Contact Form 7 Modules」 テキスト選択時の背景色や文字色をCSSで変更す... 続きを読む

[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート | コリス

2017/02/13 149 users コリス 半透明 overflow CSS ＢＧ

背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; backg... 続きを読む

Rails の `utf8=✓` の歴史と消し方と snowman ☃ - Qiita

2015/06/08 58 users submit snowman Form value type

Rails の form_tag や form_for で form を作成すると <input name="utf8" type="hidden" value="✓"> という input 要素が自動で追加されて、submit すると utf8=✓ というパラメータが付いてくる。これの歴史と消し方を調べた。 Rails3 で、Internet Explorer 5、6、7、8 にパラメータを U... 続きを読む

FuelPHP ◇ CSRF対策を行う - ken_effcの開発メモ

2015/01/07 40 users FuelPHP true false CSRF対策 手動

2014-05-27 FuelPHP ◇ CSRF対策を行う FuelPHP FuelPHP 1.7 1.config.phpの設定 csrf_autoload : trueにすると自動でチェックを行う。ほとんどの場合、手動でチェックを行うのでfalseにしておく csrf_token_key ： hiddenにセットされるcsrfチェック値のキー csrf_expiration ： csrfクッ... 続きを読む

CSRF対策用トークンの値にセッションIDそのものを使ってもいい時代なんて、そもそも無かった

2014/02/19 388 users いい時代 パク 脅威 前提 セッションID

概要 http://co3k.org/blog/csrf-token-should-not-be-session-id について。 この記事では触れられていませんが、 むかし、セッションIDをHTMLソース中に埋め込んでも脅威は変わらないと主張した人がいました 正確には「hiddenの値のみ漏れやすいような特殊な脆弱性が無ければ」という前提であったけれど、実際にそのようなバグはあったし、予見されて... 続きを読む

おそらくはそれさえも平凡な日々: CSRFDefender的なやつでコンテンツフィルタはしないほうがいいんじゃないかという話

2013/05/14 12 users 組長 Form Plugin CSRF対策 結論

本日の組長のお話。 Ark::Plugin::CSRFDfenderに機能追加したりいろいろバグっていたりしたのに手を入れていたのだが、それに対して組長に意見を頂いた話。結論はタイトルの通り。 CSRF対策をフレームワーク側で入れるのは良いと思うが、フィルタしてformに自動的にhiddenを埋め込むのはあんまよろしくないんじゃないかという話です。 CSRFDefender的なやつには以下のような... 続きを読む

[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック | コリス

2012/05/20 304 users コリス relative CSS overflow テクニック

Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video ifram... 続きを読む

Easy CSRF Key - PHPでお手軽にCSRF対策するやつ

2012/02/15 52 users CSRF対策 Demo submit require Name

PHPで、おてがる簡単にCSRF対策するやつ。 デモ Easy CSRF - Demo (つかいかた) 1. 適当にrequireする。 require 'easy_csrf.php'; 2. 適当にsession_start()しておく。 session_start(); 3. (HTML) submitの手前に次の一文をいれる &ltinput type="hidden" name="<?= ... 続きを読む

[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス

2011/11/28 102 users コリス wrapper overflow CSS 天地

デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src... 続きを読む

盗まれたMacBookを取り返せるかも？『Hidden』 | 100SHIKI

2011/06/01 32 users MacBook ウェブカム 100SHIKI 泥棒 Mac

よくあるツールですが、このおかげで泥棒が逮捕されたようなのでご紹介。 HiddenはMac用の「転ばぬ先の杖的」アプリケーションだ。 これをインストールしておいて、万が一Macが盗まれた場合にはトラッキング機能を有効化してみよう。 そうするとMacの位置をはじめ、動作中のスクリーンショットやら、ウェブカムによる写真などがどんどん送られてくるという仕組みだ。 そもそもオンラインにしてくれないとだめで... 続きを読む

たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/11/30 174 users clearfix XHTML float overflow

.sampleBox { overflow: hidden ; } .boxLeft { float: left; width: 150px; } .boxRight { float: right; width: 150px; } サンプルページ ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる... 続きを読む

[JS]滑らかにスライドするナビゲーションを実装するチュートリアル | コリス

2009/07/29 190 users コリス overflow チュートリアル ナビゲーション デモ

滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマ... 続きを読む

俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag

2007/05/26 166 users clearfix visibility Lucky Bag

clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _he... 続きを読む

高木浩光＠自宅の日記 - 素人メディアに脆弱性報告文化を破壊されるおそれ

2006/12/22 48 users 高木浩光 自宅 見かけ 日記 脆弱性

■ 素人メディアに脆弱性報告文化を破壊されるおそれ みなさんは、「ニセ脆弱性」という言葉を耳にしたことがあるでしょうか。 これは、見かけは脆弱性のようだけれども、実は、脆弱性とはとても言えないもののことで、「疑似エクスプロイト」や「似非ゼロデイ」などとも呼ばれます。 「そんなものがどこにあるんだ」とお思いの方も、例として、「サニタイジング」や、「hiddenは危険」や、「非接触スキミング」などの名... 続きを読む