ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
文字選択出来ないサイトで文字選択可能にする - 気になるガジェット
スタイルシートで選択不可にしている Firefoxの場合 アドオンのインストール 独自スタイルシートの適用 スクリーンショット HTML スクリーンショット スタイルシート スタイルシート適用後 Chromeの場合 スタイルシートで選択不可にしている ネットで調べ物してて、ちょっとメモを取るのに選択してコピーしようと思ったら、文字を選択できなかったことはないでしょうか？ あれが意外とイラッとくるので、解除方法を調べましたのでご紹介します。 最初はJavaScriptを無効にすれば、文字の選択ができるようになるかと思っていたのですが、以下の記述がスタイルシートに記述されていると選択できなくなるようです。 user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -moz-user-select: none;
:visitedと一緒にbackground-imageとかは使えないようになってるよ。プライバシー保護が理由。（CSS おれおれ Advent Calendar 2012 – 15日目） | Ginpen.com
訪問済みリンクを示すセレクターです。なお未訪問のリンクは:linkで得られます。 いずれもリンクを前提としているので、要素aの指定は省略して問題ないでしょう。 背景画像を指定するプロパティです。読み込みに時間がかかる場合もあるので、background-colorも一緒に指定しておきましょう。（してないとこ多いんですよね……。） background-positionを使ったCSSスプライトという技術も有名ですね。 プライバシー情報漏洩の仕組み さて閑話休題。この二つを組み合わせて悪用すると、「（他サイトへの）訪問履歴」を得る事が出来てしまいます。 background-imageが:visitedと一緒に使える場合を考えます。 この時に問題になるのが、「画像を読み込む」つまり「画像をウェブサーバーへ要求する」という当たり前の行為です。 要求を受け取ったウェブサーバーは、要求している画像の
ブラウザはどのようにコンテンツをレンダリングしているのか？
By Fabio Lanari ウェブブラウザはHTMLなどで書かれた文章を解釈し、テキストや画像を配置するソフトウェアです。そのテキストや画像などのオブジェクトをレンダリングするレンダリングエンジンの仕組みを、ユーザーセッション分析やUX最適化サービスを提供しているSessionStackのCEOであるAlexander Zlatkov氏がまとめています。 How JavaScript works: the rendering engine and tips to optimize its performance https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda ブラウザの主要コンポーネントには「
_blankなリンクのカーソルを変更(userContent.css) - Fedora 39(はてな)
userContent.css を使って_blankなリンクのカーソルを変更します。 /home/hiroyuki/.mozilla/firefox/dpktw7xz.default/chrome/userContent-sample.css があるので、 ファイル名を、userContent.css に変更して、 一番下に a[target="_blank"] { cursor: alias !important; }を追加してFirefoxを再起動します。 動作確認 Firefoxを再起動して、はてな にカーソルを合わせている間、カーソルが変わります。 target="_blank" のマウスポインタ変更 - memo hail2u.net - Weblog - FirefoxのuserContent.cssネタ
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選 Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。 JSFiddle 多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。 Create a new fiddle – JSFiddle CodePen グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。 CodePen – Front End Developer Playground &
ウェブサイトのスタイルを自由に変えられるuserstyles.orgの魅力と危険性
サービスが好きで良く使うウェブサイトでも、デザインが好きじゃない場合ってありますよね。そんな時に便利なのが「usersyltes.org 」です。 たとえばuserstyles.org自体のデザイン。すごくまぁまぁですよね。 たぶん、わざとなんでしょうけどw これを、ブラウザの拡張機能を入れてデザインを選ぶだけで、以下のように簡単に変更できます。 たとえば、Reddit やYouTube もuserstyles.orgに行くとユーザが作ったデザインが用意されています。 Redditの場合 サイトやスタイルによりますが、Redditの場合は広告の表示・非表示も選択できます。 ユーザが作ったと思われる550種類ものデザインから選べます。 自由なウェブの面白さ セキュリティ面やコンテンツの見せ方を変えてしまうことで起こる問題を考えると心配ではあるんですが、この自由な感じがウェブの最大の魅力といっ
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
CSS： widthなどの数値を自動計算してくれる神機能「calc」
こんにちは、さち です。 CSS には「margin」「padding」「width」「height」など、数値を指定するプロパティがたくさんあります。 ただ、サイトの構造が複雑になると固定の数値を指定するだけでは足りない場面もあり、数値を自動算出して欲しいと思うことが…。 そんなときに超便利なのが「calc」です。「calc」は CSS（CSS3） の標準機能なので前準備は不要。今すぐ使えます。 「calc」で式を書けば数値を計算してくれる 「calc」は CSS（CSS3） に標準で備わっている機能で、計算式を書くとそれを自動計算してくれます。 例えば、「width」の値をこう書けば自動的に「33.3333…%」と計算してくれます。割り切れない数を指定するのが簡単になりますね。 .OneThird { width: calc(100% / 3); /* =33.3333…% */ fl
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Loading...
◆Yahoo!ニュース
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - SHIROMAG
まだ中央寄せで消耗してるの？ - @yoshiko_pg
「Greasemonkey ユーザースクリプト設定ウィンドウ」のリスト領域の高さを下げる - Firefox userChrome.js greasemonkeyスクリプトｽﾚ30©2ch.net
AniCollection - The easiest way to find, use and share CSS3 animations.