「e-Gov」の法令文を劇的に読みやすくする「Stylish」拡張用テーマを作ってみた - white croquis
日本の法律の原文を読みたいときは、総務省が提供している「e-Gov」の法令検索ページで検索し、読むことができます。 電子政府の総合窓口e-Gov［イーガブ］ 法令データ提供システム しかし、誰がどう見ても、この原文がとにかく読みづらいのです。 例えば「著作権法」をご覧ください。 文字がウィンドウ幅いっぱいに満たされ、行間も狭く、インデント（字下げ）が通常の文書のアウトラインと逆になっていて、タイトルが本文よりも右にインデントされていたり…と、問題点を挙げればキリがありません。 そこで、これを誰もが読みやすいであろう、階層レイアウトに補正するスタイルシート(CSS)を作成し、Firefox、Google Chrome、Safari の拡張機能「Stylish」のテーマとして公開しました。 これを使うと、次のようになります。印刷してもそのままのレイアウトで印刷されるので、印刷する場合にも便利で
Ivan Lee – Fitness Expert and Digital Marketing Pro – A lifelong student in the art of winging it, correcting failures, and unwavering positive thinking.
I’m constantly learning the newest way to stay in the sharpest conditioning possible. Strength, stamina, mobility, and much more. I’m building a tribe of like-minded individuals who want to do the same. Striving for the utmost best results, while maximizing all the other aspect of life Will you join me?
エントリーページがまたうんこ化したのでusercssを書いた - いさぢちんメモ
はてブのusercssは他にがっつり書いてる人がいて乗り遅れた感がありますが、毎回書いているので。 コメントを一覧表示するページをリニューアルしました - はてなブックマーク日記 - 機能変更、お知らせなど 配色はともかく、シングルカラム可変幅にして、コメントを1行にするだけでずいぶん印象が変わるのに、どうしてそれが出来ないのか。前回のエントリーページデザイン変更のときから疑問に思っている。 スタイルシート /*20130321はてブエントリページ対策*/ ul.ad-head-text, div#sidebar-inner {display:none!important;} div#container, div.box3_2, div.entry-contents, div.box-wrap {width:auto!important;} div.box-wrap.box2.mix {b
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
サイト全体で未使用のCSSセレクタを見つけるFirefoxアドオン「Dust-Me Selectors」
不要なCSSセレクタを見つけてくれるFirefoxアドオン「Dust-Me Selectors」を紹介します。 古くからあるアドオンなのでご存知の方も多いかと思います。ページ単位のチェックができる他、サイトマップを使って、サイト全体で使っていないCSSセレクタを見つけてくれる機能もあるようです。 １．インストール 「Dust-Me Selectors」のページにアクセスして、「Continue to Download」のリンクをクリックすればダウンロード画面が表示されます。 Dust-Me Selectors 2011年5月現在では、Firefox4には対応していないようです。Firefox4にインストールしたい場合は「Firefox4で動作しないアドオンを動作させる方法」を試してみてください。 2012年6月現在、最新のFirefoxに対応しています。 ２．ページ単位のチェック ページ単
「googleの左がうざいなら右に置けばいいじゃない」なユーザースタイルシート - そっと××
リニューアルされたGoogle検索ページで、左側に固定表示されるサイドバーが不評のようです。 日刊スレッドガイド : 「google 左 うざい」でググりまくるスレ Googleがまた改悪… 今度は検索結果に消せないサイドバーが登場:アルファルファモザイク 左側で邪魔なら、右側に移動させてみてはどうでしょうか？ 【追記】併せてGoogle インスタント・プレビューを無効にする必要があります 2011年4月ごろからOperaでもGoogle インスタント・プレビューが有効となり、右に置いたサイドバーのメニューをクリックしようとすると、インスタント・プレビューが起動してしまう不具合が出ます。何らかの方法で、Google インスタント・プレビューを無効にする必要があります。 メモ：OperaでGoogle インスタント・プレビューを表示させる方法・させない方法: メモノメモ メモ：Google
IEのtable内で white-space:nowrap を有効にする方法 - KEINOSの日記（旧ブログ）
この記事は次のブログに引っ越しました。 https://blog.keinos.com/20090121_763IE6,IE7でtalbeのth,tdにCSSでnowrapを指定しても有効にならない HTMLのテーブル・タグで、見出し列が改行されてしまうと、いささかみっともないので CSSでthタグに"white-space:nowrap"を指定してみた。しかし、FireFoxやChromeなどは問題ないのに、InternetExplorer6,7では改行されてしまった。結論から言うと、"white-space:nowrap"をかましたspanタグで囲うと有効になった。 .cNowrap{ white-space:nowrap;}table tr th span class="cNowrap" ここに長い見出しspan th tdここにデータが入る。ここにデータが入る。（略）ここにデータ
Firebugで始めるCSSデバッグ
Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。 インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。 インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に
背景画像をリサイズさせる方法｜web bibo
タイトルだけ見ると、おーっと驚くようなテクニックですけど、実際はbackground-imgではなくimgタグを使ってるんですよね。なかなかこのテクニックを使う機会は無いと思うので、こんなテクニックもあるんだぁーっ、へぇーって思って頂けるぐらいで、十分です。では、やり方を。 HTMLを記述 <img src="bg_dimension.jpg" alt="" id="bg-img" /> <p id="text">imgタグにpositionを利用して背景画像を敷いている様に見せています。幅100%を指定することで画像も拡大・縮小します。</p> CSSを記述 body { overflow: hidden; } #bg-img { width: 100%; position: absolute; top: 0; left: 0; } #text { background: url(
JavaScript、HTML5、 CSSの投稿共有コミュニティサイト「jsdo.it」をリリース | 面白法人カヤック
株式会社カヤック（本社：神奈川県鎌倉市、代表取締役：柳澤大輔 貝畑政徳 久場智喜、http://www.kayac.com/ 以下「同社」 ）は、2010年6月18日、JavaScript、HTML5、CSSを投稿して共有するコミュニティサイト「jsdo.it」をリリースいたしました。 「jsdo.it」は、Web制作において話題となっている次世代開発言語「HTML5」と、「JavaScript」「CSS」のソースコードを投稿してユーザー間で共有できるWebサービスです。 同社はFlashを投稿して共有できるWeb サービス「wonderfl build Flash online」を2008年12月より運営しており、国内外合わせて2万3000人のユーザーと8万9000の投稿数を獲得しています。HTML5、 JavaScript、CSSにおいても簡単に投稿ができたり、ノウハウを共有したりで
CSS3グラデーションと角丸を使ったボタンを簡単に作成できるジェネレーター
<textarea name="code" class="css" cols="60" rows="5"> element { -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; padding: 20px; background: -moz-linear-gradient(center top, #999999 23%,#ffffff 93%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.23, #999999),color-stop(0.93, #ffffff)); } </textarea>
フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）｜CSS HappyLife
3回続いた基本的なことも今回で最終です。 4回目の内容は、以下のことについて触れております。 んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。 スタイルの優先順位 セレクタの組み合わせ セレクタのグルーピング スタイルの優先順位詳細 スタイルの優先順位 スタイルのもっとも基本的な優先順位は、 「後から読み込んだスタイルを優先的に適用」します。 読み込む順序は、上から読み込まれていくので、、、 p { color:red; } p { color:blue; } のように書いたとしたら、color:blueが優先され、文字は青になります。 基本的な読み込み順序で最低限の部分は、コレだけです。 より詳細な優先順位については後述します。 セレクタは色んなセレクタを組み合わせて指定できます。 子孫セレクタ（空白文字区切り） 親要素に含まれるすべての子孫要素をターゲットにスタイルを適
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
borderプロパティを使用した華麗なる四つのエフェクト | コリス
Loading...
http://www.designwalker.com/2010/05/css3.html
Online Form Maker for Bootstrap 5
