astamuse.comのcssが崩壊した日(2017/07/14改訂) - astamuse Lab
2017/07/14更新 主に「抽象的な」と言っている箇所の削除・修正を行いました。 前々回くらいに「cssアーキテクチャのtips」とか偉そうなブログ書いた者ですが、 今回自分のcssを崩壊させてしまいました。まったく笑えない、由々しき事態です。 失敗事例をこういうとこで書くべきなのか悩みましたが、反省と自責の意味を込めて書かせていただきます。 astamuse.comのcssアーキテクチャ 2013年に大幅リニューアルしたastamuse.comのcssアーキテクチャは6つの層で成り立っています。 ※この「widgets」という層ですが、atomicデザインでいう「modules」のようなもので、オレオレ概念です。こいつが後々首絞めます。 例としてデザインを見ていきます。 このデザインをastamuse.comのcssアーキテクチャで分解していくと、下記のようになります。 compon
理解しやすいcssアーキテクチャにするためのtips - astamuse Lab
こんにちは、主にフロントエンド周りを担当させて頂いているSと申します。 いきなりですが「良いcss」とは何でしょうか。 validなcss tableを避けてdivやulで擬似的に表現するcss cssで表現できる事はcssで表現しているcss（svg,data URI,animationの利用） postcssなど最新の技術を取り入れているcss styleguideを作成しているcss 確かにこれらは「良いcss」ですが、それだけでは足りません。 「良いcss」は「良いアーキテクチャ」である事が必要です。 幸運な事に私たちには、oocss,smacss,bemなどの素晴らしいアーキテクチャがありますが、単純にこれらを利用するだけでは「良いアーキテクチャ」にはなりません。 「良いアーキテクチャ」にするためには 理解しやすい 探しやすい 修正しやすい という3つの"-able"が必要なので
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
Google製、JavaScript/CSSの難読化＆キャッシュ·Reducisaurus MOONGIFT
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。 設定方法 JavaScriptやCSSのファイルを複数読み込むにはその分だけコネクションを行う必要があり、負荷がかかってしまう。そこで使ってみたいのがReducisaurusだ。ローカルファイルやリモートのファイルを読み込んで一つにまとめてアクセスできるようになる。 ReducisaurusはGoogleのエンジニアでJaikuの開発にも関わっているプログラマによるソフトウェアだ。実行はGoogle App Engine上で可能になっている。自分でサーバを立てることもできるし、Reducisa
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
Sassから自動でCSSを生成する·saag MOONGIFT
CSSをそのまま書くのは面倒というのは誰しもが感じる所だろう。そこで最近では構造化されたCSSを作成し、変換プログラムを介して別なフォーマットにするという類のソフトウェアが幾つか登場している。PythonではCleverCSS、RubyではSassやLessが知られている。 下がSass、上がCSS だがいずれのフォーマットも変換プログラムを使わなければブラウザに読み取らせることはできない。ファイルを編集するたびに変換プログラムを実行するなんて手間だ、そこで使うのがsaagだ。 今回紹介するオープンソース・ソフトウェアはsaag、Sassファイルを監視して変換するソフトウェアだ。 saagは入力としてSassのあるディレクトリを指定し、出力としてCSSファイルを出力するディレクトリを指定する。後はSassファイルを編集すると自動的に感知してCSSファイルを生成する仕組みだ。Sassファイル
Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ニュースのデザイナーの黒田・由衛です。 Yahoo!ニュースが2009年4月27日にリニューアルしました。今回のリニューアルでは、お客様に快適にサイトを利用していただけるよう最速でページを表示させることに重点をおきました。 お客様がウェブを閲覧するのは1日の中のほんの限られた時間です。その貴重な時間を割いてYahoo!ニュースに来ていただくわけですから、1ページでも多くの記事を「読みやすく」「ストレスなく」見ていただけるようにするのが、Yahoo!ニュースがお客様にできる最高のおもてなしだと考えています。そこで、今回のリニューアルでは、サイトデザイン側からのアプローチとして以下の2点の施策を行いました。 １
圧縮だけじゃない。CSSを解析した上で圧縮する·CSS Compressor MOONGIFT
CSSは最近のWebシステムでは当たり前のように使われている。そして肥大化したCSSはネットワークの帯域を余計に食っているようなものだ。それを解決する手段として、CSSの余計な空白や改行を消して圧縮する技術がある。 こんなにちっちゃくなっちゃった！ だがCSS Compressorはもう一歩先の技術を使って、さらに圧縮を実現してくれる。これはなかなか興味深い。 今回紹介するオープンソース・ソフトウェアはCSS Compressor、CSSを解析した上で圧縮してくれるソフトウェアだ。 CSS CompressorはJava製のソフトウェアで、コマンドラインで実行する。CSSファイルを引数として指定すると、標準出力に圧縮した内容を返してくれる。余計な空白や改行の削除はもちろんとして、幾つか面白い機能がある。 ヘルプ 同じ設定を行っているクラスがあれば、それを一つにまとめてくれたり、4辺に同じ設
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT
Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ
CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT
jQueryやPrototypejs、YUIなど様々なJavaScrptライブラリが登場している。また、CSSもフレームワークが出てきており、便利な反面、表示されるまでのコネクション数やダウンロードサイズが肥大化している。 CSSやJavaScriptを連結＆圧縮 それを解決する手段として、サイズの縮小や複数のファイルをまとめてしまうという方法がある。それを自動化してくれるのがMinifyだ。 今回紹介するオープンソース・ソフトウェアはMinify、JavaScript/CSSの連結、圧縮ソフトウェアだ。 MinifyはPHPで作られており、Webベースで動作する。Minifyにファイルのパスを渡すことで余計な改行や空白を圧縮してサイズを小さくしてくれる。そして複数のファイルを渡すことで連結してくれる機能もある。 生成されたファイル 作成するのは同一ドメイン内のファイルに限られる。また、グ
アルツハイマー病の原因となる「脳の廃棄物除去システムの老化」を改善する治療法が開発される
アルツハイマー病などのさまざまな認知症疾患の原因の1つとして、脳内に「タウタンパク質」と呼ばれる物質が蓄積することが挙げられています。このタウタンパク質はグリアリンパ系といういわば「脳の廃棄物除去システム」によって除去されるのですが、老化が進むとこのグリアリンパ系が機能しなくなり、認知障害を引き起こすことがわかっています。ロチェスター大学医療センターの研究チームが、老化で機能しなくなったグリアリンパ系を改善する治療法を発表しました。 Restoration of cervical lymphatic vessel function in aging rescues cerebrospinal fluid drainage | Nature Aging https://www.nature.com/articles/s43587-024-00691-3 Cleaning up the agi
2008年、ウェブのデザイナー・開発者がおさえておきたいリソース集 | コリス
2008年、ウェブのデザイナー・開発者がおさえておきたいデザイン、Photoshop&Illustratorのチュートリアル、ブラシやベクター素材、JavaScript、CSS、WordPress、タイポグラフィ、フォント、素材、リソースなどをnoupeのエントリーから紹介します。 2008 Most Popular Design posts, Tutorials and Resources デザイン関連 Photoshopのチュートリアル関連 Illustratorのチュートリアル関連 Photoshop&Illustratorのブラシやベクター素材 JavaScript関連 WordPress関連 CSS関連 フォント&タイポグラフィ関連 ツール&素材関連 デザイン関連 42 Awesome Business Card Designs 20 Beautiful HDR Pictures
JavaScriptやCSSのメンテナンスにぜひどうぞ·CocProxy MOONGIFT
こ、これは便利…。新規開発しているときはまだしも、実際に動いているサイトのデザインやJavaScriptをメンテナンスしようと思うと以外と大変だ。静的な場合はまだしも、Ajaxを使ってデータを取得していたりすると、その用意だけでも時間がかかってしまう。 そんな時に使えるのがamachangご推薦のCocProxyだ。Webデザイナーまたは開発者の方はおお、こんなのを待っていたと思うに違いない。 CocProxyはRubyで書かれたオープンソース・ソフトウェアで、開発用プロキシだ。 CocProxyを使う際には、filesというディレクトリを作成し、そこにファイルを配置する。ドメインごとにフォルダを作成して、その中にファイルを入れても良いし、直接ファイルを置いても良い。優先度はfiles直下にあるファイルだ。 style.cssはヒットしたのでローカルファイルを利用している そしてproxy
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
TechCrunch | Startup and Technology News
「Yahoo!ニュース」の表示速度が3～5倍に、そのからくりは……：記事の芽
