タグ

CSSに関するshidhoのブックマーク (204)

  • NES.css - NES-style CSS Framework

    NES.css - NES-style CSS Framework
    shidho
    shidho 2018/11/27
    formに日本語を入れると破綻する(世界観が)。
  • ユーザーのブックマーク一覧ページのシステムリニューアルを行いました - はてなブックマーク開発ブログ

    はてなブックマークでは現在、システム全体の抜的なリニューアルに向けた開発を進めております。 日、その一環として、ユーザーページ内のブックマーク一覧ページを新システムに移行いたしました。 今回リニューアルしたのは以下のページです。 ユーザーのブックマーク一覧ページ ユーザーのマイブックマーク検索ページ 「あとで読む」のブックマーク一覧ページ また、以下の機能については、仕様を変更しました。 ブックマーク一覧ページのタグ一覧に、非公開ブックマークにつけたタグを表示させないようにしました ブックマーク一覧ページで1ページごとに表示される記事件数を20件に固定しました 他のユーザーのブックマーク一覧のコメントの下部に、そのユーザーのお気に入りユーザーが表示されていましたが、自分のお気に入りユーザーが表示されるようにしました グローバルヘッダーをページ上部に固定しました なお、ご利用状況等を鑑み

    ユーザーのブックマーク一覧ページのシステムリニューアルを行いました - はてなブックマーク開発ブログ
    shidho
    shidho 2017/11/24
    お気に入りページとブックマーク一覧ページのデザインのしかたがちょっと違ってるのが気になる。
  • タイ国王死去で黒白表示になっているサイトをカラーに戻す方法

    タイのサイトが白黒表示に 10月13日にタイのプミポン国王が死去したことを受け、タイ向けのWebサイトの多くが白黒表示になっている。 JAPAN AIRLINES / Thailand これは弔意の表明として白黒にしているのだが元々のカラーのサイトは白黒になることを前提として作成されているわけではないので非常に見づらくなっている箇所がいくつもある。 一時的にカラーに戻す方法 この方法はPCChromeまたはSafariを使用することが前提です。 まずChromeで白黒になっているサイトを表示している状態でF12キー(MacはCommand+Option+Iキー)を押す。 コンソール(console)をクリックして以下のコードをコピーして貼り付けてEnterキーを押すと一時的に白黒表示をカラーに戻すことができる。 var el = document.querySelectorAll('*'

    タイ国王死去で黒白表示になっているサイトをカラーに戻す方法
    shidho
    shidho 2016/11/11
    ここに書いてあるコピペ用コードの先頭にjavascript:をつけて保存するだけでbookmarklet化できた。
  • 3行で服喪する

    (2016/10/17 10:14 更新: ベンダープレフィックスの必要性を追記) 先日タイ国王が崩御されたが、これを受けてタイ航空をはじめ、多くのタイ関連Webページがモノクロ化されて喪に服しており話題になっている。タイ国政府観光庁の日向けサイトもモノクロになっていた。 タイ系企業の服喪・自粛っぷりがスゴイ!軒並みサイトがモノクロ化。タイ航空に至ってはプミポン国王が雲の上で手を振っているし…!30日間の娯楽禁止令も出された模様。愛されているなぁ。 pic.twitter.com/Q0wUXA0A5a — USHISUKE (@USHISUKE) October 14, 2016 テキストのみのサイトならばともかく、画像も多いサイトであれば、アセットをすべてグレースケール化しなければならず、改修は結構な工数がかかる... .....ように思うが、実際はCSS filterを使うことで簡単

    3行で服喪する
    shidho
    shidho 2016/10/20
    ちなみにタイは企業アカウントなLINE@とかのアイコンも全部モノクロにしている。あれはさすがにCSS書き加えるだけでは厳しいかもしれない。/TVニュースのスタジオ映像、取材映像もほぼモノクロ。
  • 高品質な CSS を書く助けになるツール「Nozomi」を作った - I'm kubosho_

    2015-06-29 高品質な CSS を書く助けになるツール「Nozomi」を作った CSS Gulp 登壇 リポジトリは kubosho/nozomi です。 JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。 その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。 どんなツールか 書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。 具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。 Autoprefixer ベンダープレフィックスを自動的に追加 CSSComb プロパティの順番を設定ファイルをもとに並び

    高品質な CSS を書く助けになるツール「Nozomi」を作った - I'm kubosho_
  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
  • HTML/CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント

    CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

    HTML/CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
  • Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

    バイト先で「新ゆとり世代」と言われました。れこです。 HTMLCSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が

    Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
  • 日本Espresso宣言、もとい簡単な紹介から

    Espresso Advent Caledar 2011 は、今日、クリスマス10日前からのスタートです。松田さんの思いつきで始まった企画ですが、Espressoマニアを自負する私が先陣を切らせていただきます。(笑) Espressoって何? Mac OS X 用のテキストエディタです。主にWEBに関わる人、HTMLやプログラムを書く人が使うと幸せになれるソフトです。アップロードの機能(FTP/SFTP)が充実していて、差分更新などなど痒いところに手が届きます。 開発元MacRabbitのサイト ← ここからダウンロード出来ます。Espressoが特別なところ 「表示が美しい」のは、Espressoじゃなきゃと思わせる一番のポイントです。 無駄にカッコいいとかではなく、削ぎ落されたインターフェースの美学がそこにはあります。そして、他のエディタで実現されている例を見ないのが、長い行の折り返し

  • Sassのライブラリ、Bourbonを使ってみよう! - 中里日記

    やあ (´・ω・`)ようこそ、バーボンハウスへ。 このテキーラはサービスだから、まず飲んで落ち着いて欲しい。 ということで、こちらの記事に触発されて、Compass以外のSassのライブラリであるBourbonさんを使ってみようと思いました。 Bourbonってなに? 英語得意な方はこちらか こちらを見ていただいたほうが詳しく書いてあります。 BourbonはCompassよりも使いやすい! Bourbonは、すげえシンプル!(って書いてあった)で、とても軽いのが特徴なようです。簡単に言うと、Compassをもっと手軽に使えるようにしたバージョンという感じですね。Compassの基的な機能をより使いやすくしたものだと捉えていいようです。シンプルなので、エンジニアさんがちょっとSass使ってみようかなという時に便利だと思います。 ドキュメンテーションも見やすく、検索もしやすいです。ただ今

  • 【Susy】Sass,Compassでグリッドレイアウトしまそ - Milk+ea

    何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を代入してから使います。 $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : 0.5em; $container-style : 上から順番に 何カラム使うか。上では12カラム。 1カラムあたりの幅はどれだけか。 カラム間のmargin(幅)はどれだけか。margin-right: 1em みたいに。 グリッド左右のpaddingはどれだけか。TwitterBootstrapだったら.rowの左右にみたい

    【Susy】Sass,Compassでグリッドレイアウトしまそ - Milk+ea
  • howtohp.com - howtohp リソースおよび情報

    Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    howtohp.com - howtohp リソースおよび情報
  • より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

    2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」という記事で紹介したSass/SCSS。皆さん使ってますか?今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね! ↑私が10年以上利用している会計ソフト! 目次 Sassの基礎知識 @mixin の基的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas

    より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集
  • Foundation for Sites | The most advanced responsive front-end frameworks in the world.

    Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi

  • Introduction to Sass and How to Setup with Mac + Coda

    2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する

    Introduction to Sass and How to Setup with Mac + Coda
  • モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。

    モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲーム歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS

    shidho
    shidho 2012/01/30
    CPUパワーが足りないのか、コマ落ちしちゃう。残念。
  • 俺の CSS リセット: 2011 冬

    年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違

    俺の CSS リセット: 2011 冬
    shidho
    shidho 2012/01/04
    いつか参考にする。
  • 完全に一致を作るための勉強法 たくさんのアクセスありがとうございまし..

    完全に一致を作るための勉強法 たくさんのアクセスありがとうございました。 コメントもたくさん頂いてまして、それにお答えするのに「ブログでもつくろうかいな」とのぼせましたが、そんなテーマで続くわけもないので、やはりアノニマスダイアリーにしました。 【製作期間について】 まず、皆さん仕事しながらたった4ヶ月で!と褒めて頂いてますが、たったじゃないですよ。4ヶ月って。 仕事が終わって、毎日2~3時間。土日関係無くやると、多分300時間くらいになります。 専門学校の2年間の授業時間がこのくらいだったりするんじゃないですかね。結構長いです。 【モチベーションの維持について】 モチベーションを保つのがすごいというのも褒めてもらいましたが、私は一回やり始めると、意外に長く続きます。 コツがあるんです。 毎年、日々の単純作業が続かない新入社員が入ってきますが、そんな新人に言います。 「息をするように続ける

    完全に一致を作るための勉強法 たくさんのアクセスありがとうございまし..
  • 「ホームページ・ビルダー15」発表、テーブル組みレイアウトからCSSへ脱却 

    shidho
    shidho 2010/10/15
    どの程度元のコードは残っているんだろう。
  • ブログアフィリエイトで稼ぐのに役立った「最強ツール」27選【保存版】

    検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力

    ブログアフィリエイトで稼ぐのに役立った「最強ツール」27選【保存版】
    shidho
    shidho 2010/09/15
    1年後にどうなっているかもういちど見に来よう。