Turret
A library of Documentation, Elements, Components, Icons, and a Grid for rapid responsive website development.Simple and Stylish Create accessible, semantic, and responsive websites easily with Turret. Turret is a front-end styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites. Responsive Turret has a simple and intuitive grid system and re
もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
Writing HTML5 Mobile Web Apps using Backbone.js
2. Agenda HTML5 or native? HTML5 Mobile Development Frameworks PhoneGap Trigger.IO UI Frameworks jQuery Mobile Sencha Touch jqMobi MVC with Backbone.js Client Side Templating with Mustache Modular Javascript with RequireJS 3. Go web or native? Web Native Cross-platform code. Smoother user interface. CSS3 is very powerful, easy and More control and flexibility (for flexible compared to Android and
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
[Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！ CSSバージョン
TranslatorPermission error: Please make your 'plugins/global-translator' directory writable by Wordpress 以前 [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！ という記事を書いたのですが、Javascriptを使用することと、IEが未対応なことで仕事では使いにくいテクニックだったんですが、 見つけてしまいました！CSSだけで実装できるテクニック！！ こんな少しの工だけでできてしまうなんて・・・・・あんなに悩んでいたのに・・・・ では実装方法です。 HTML側 <div id="links"> <ul> <li><a href="#" title="Text">Link Heading One <em>Description of link.</em
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template
HTML5 Templateのデモページ Easy HTML5 Templateの特徴 汎用性の高いシンプルなつくり HTML5の新しい要素に重点をおいて設計 HTML5対応ブラウザはもちろん、IE6, IE7, IE8も考慮 モバイルデバイスも考慮 jQuery, Google Analyticsなどよく使用されるものを配置済み [ad#ad-2] Easy HTML5 Templateの外部ファイル Easy HTML5 Templateで使用している外部ファイルです。 screen.css Reset CSSには「Eric Meyer's reset」が使用されています。 modernizr-1.6.min.js 「Modernizr」。HTML5やCSS3をサポートしているか調べ、CSSの場合はエレメントにclassを加えます。 html5.js 「html5.js」。IE9未満（
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ニュースのデザイナーの黒田・由衛です。 Yahoo!ニュースが2009年4月27日にリニューアルしました。今回のリニューアルでは、お客様に快適にサイトを利用していただけるよう最速でページを表示させることに重点をおきました。 お客様がウェブを閲覧するのは1日の中のほんの限られた時間です。その貴重な時間を割いてYahoo!ニュースに来ていただくわけですから、1ページでも多くの記事を「読みやすく」「ストレスなく」見ていただけるようにするのが、Yahoo!ニュースがお客様にできる最高のおもてなしだと考えています。そこで、今回のリニューアルでは、サイトデザイン側からのアプローチとして以下の2点の施策を行いました。 １
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 ::: creazy photograph
前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第11回：引用（blockquote）を簡単にするブックマークレット 今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。 最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。 １）左上に「“」を表示させる まずは一番簡単そうな左上コーナー１カ所に引用符を表示してみます。 使用した画像はこちら。 完成したのがコチラ。 HTML例 <blockquote cite="http://creazy.net/" title="creazy photograph"> <p
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
[暴満館] JavaScriptによるCSSの操作
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
Hatena::Group::CSS - はてなブックマークの構造
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
id名、class名の最近の自分の傾向
以前に「もう、class名やid名で悩まないんだからっ！！」というエントリーを書いたのだけど、自分がよう使うid名とclass名のまとめと、その辺の理由付けをしてみよーかなぁと思った。 後、idとclassの使い分け絡みもちょっと書くかも。 こーいう内容を書くと反応が怖かったりするけど、ソレもまた勉強なり。とか思って自分なりの今の考えを書いてみようと思います。 先に言っておきますが、コレから書く事が正解とかこう付けるべきって解釈はしない感じでお願いします。 コイツはこう考えてるんだ。くらいで読んでいただければ幸いです。えぇ。 全体を囲む際によく使うかなっていう系 #page idでコレをつける事が最近多いです。 wrapperとかwrapを使わないのは、脳内がサランラップに犯されているからっていうやる気の無い理由もありますが、「このサイトのこのページ。」なんだからpageがしっくり来たなぁ
タブ風ＵＩを実装するための色々:phpspot開発日誌
Tab Interface Scripts | Dr. Web Weblog タブ風ＵＩを実装するための色々。 標準的なタブＵＩから変り種タブＵＩまで、いろいろなタブ式ＵＩを実現するためのライブラリがまとまっています。 Javascript Tabs vom Stilbüro AJAX Tabs Content Script Tabmenu dhtmlxTabbar ActiveWidgets 2.0 続きをみる いろいろあって面白いですね。 関連エントリ クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス
https://tnat.net/img/tdiary_css.png
