Firefoxの不要なコンテキストメニューを消す
Firefoxで「右クリックで表示される「コンテキストメニュー」から、不要な項目を消す方法のまとめです。 「userChrome.css」を編集することで簡単に消すことができます。 userChrome.cssの場所userChrome.cssは、プロファイルフォルダの「Chrome」フォルダにあります。 プロファイルフォルダの場所は次のように探せば見つかります。 Firefox右上にある「≡」マークを押して、メニューの一番下にある「？」マークを押す「トラブルシューティング」を押す「プロファイルフォルダー」項目の「フォルダーを開く」をクリックエクスプローラーが開くので「Chrome」フォルダに入るFirefoxを終了する「userChrome.css」をコピーしてバックアップをとっておくuserChrome.cssを編集で開き、下に記すコードを貼り、保存するFirefoxを再度起動する以上
Firefox57のブックマークを元の色に戻す
Firefox57で、ブックマークのフォルダの色がグレーに変更になりました。 これを元の色に戻す方法をまとめます。 例によって「userChrome.css」を編集することで戻すことができます。 userChrome.cssの編集方法については下記の記事を参照してください。 Firefoxで「右クリックで表示される「コンテキストメニュー」から、不要な項目を消す方法のまとめです。 「userChrome.css」を編集することで簡単に消すことができます。 userChrome.cssの場所 userChrome.... ブックマークフォルダの色を黄色に戻す@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul) { treechildren::-moz-tree-image(title, contain
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
記事タイトルをリボン風にシンプルに実装するCSSサンプル:phpspot開発日誌
CSS powered ribbons the clean way ? CSS Wizardry?CSS, Web Standards, Typography, and Grids by Harry Roberts 記事タイトルをリボン風にシンプルに実装するCSSサンプルされています。 すごく複雑なマークアップを必要としそうな気がしたのですが、<h2>で囲むだけで実現できるそうです。 デモページはこちら 実装には、 h2 と h2:before セレクタを使って実現されています。 IEでもshadowプロパティ以外はバッチリでした。 ちょっとした工夫で記事に立体感を出しインパクトを出せるこの方法。 よく使われる方法なので覚えておいても損はないですね。 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 これさえやればCSSを
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>
はてなダイアリーテーマ
はてなダイアリー用のテーマを作成しました。とりあえず2カラム固定レイアウト（右サイドバー）を公開します。完成例は次のようになります。 １．テーマ設定方法 管理画面の「デザイン（またはデザイン編集）」をクリックし、「テーマ」は「指定なし」を選択します。「ヘッダ色」「ヘッダタイプ」はお好きなものを選んでください。 その下にある「ヘッダ／フッタ／スタイルシートの編集」に、下記のテキストエリアの内容を貼り付けてください。ページのフッタのモジュールはサンプルなので、自由に入れ替えてください。 ページのヘッダ <div class="main"> ページのフッタ </div> <div class="sidebar"> <hatena name="profile" template="hatena-module"> <hatena name="calendar2photo" template="hat
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
デザイン機能の今後について (2) - はてなブックマーク日記 - 機能変更、お知らせなど
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。2月26日（月）～3月3日（日）〔2024年3月第1週〕のトップ30です*1。 順位 タイトル 1位 メルカリ 小泉さんからのエグい学び｜Shota Horii 2位 行動をチャンク化して「1日に1ターンしか行動できない」から脱却する | Piyopanman 3位 「それって陰謀論じゃないですか？」闇の国家「ディープステート」を信じる著名人一人一人に会ってみたら…どうなった？ ｜ 47NEWS 4位 いつか起業したいエンジニアへ #キャリア - Qiita 5位 日本人はなぜ「生産性の高い社会」を理解できないふりをし続けるのか 6位 「情報セキュリティの敗北史」が面白すぎる。だめだこれは寝れない、なんだこの死ぬほどワクワクする本は→賢者は歴史に学ぶ - Togetter 7位 味付け塩だけ、放置
【ココログ】管理画面のサイドバーなどを隠すCSS設定
/* === ココログ管理画面の余分な要素を隠す === */ /* ブログのネタ(新規作成画面) */ #cocologNetaPost {display:none;} /* ブログネタ(サイドバー) */ #cocologNetaModule {display:none;} /* ココログニュース */ #cocologNewsModule {display:none;} ■IE／Sleipnirの場合 IE7やSleipnirの場合には、適当なフォルダ（デスクトップとかでも可）に、適当な名前（userStyleSheet.cssとか)でテキストファイルを作り、上記の設定を貼り付けて保存。 その後、「ツール(T)」→「インターネットオプション(O)」→「ユーザー補助(E)」の「ユーザー スタイル シート」設定のところで「自分のスタイル シートでドキュメントの書式を設定する(D)」をチェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stroll.js - CSS3 Scroll Effects
使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
第39回：携帯サイトのアイコンを変えてみよう - 初めてのココログ・カスタマイズ
テキストを回転させるCSS (BlogPeople Blog)
[CSS]要素をボタン風にスタイリングするスタイルシートのテクニック集
http://sanride.com/blog/webdesign/css.php
[CSS]左右で色が異なる背景画像を設定するスタイルシート
[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu