レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
github-git-cheat-sheet-V1.1.1-ja.2 copy
変更の作成 変更をレビューしコミット操作ログを作成します $ git status コミット可能なすべての新規または変更のあるファイルを一覧で表示します $ git add [file] バージョン管理のためにファイルのスナップショットを作成します $ git reset [file] ファイルをステージングから外しますが、その内容は保持します $ git diff まだステージされていないファイルの差分を表示します $ git diff --staged ステージングと最後のファイルバージョンとの差分を表示します $ git commit -m "[descriptive message]" ファイルのスナップショットをバージョン履歴内に恒久的に記録します ツールの設定 すべてのローカルリポジトリ用の、ユーザー情報設定方法 $ git config --global user.name
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills
ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。
【Pc2Sp.js】PCサイトとスマホサイトを自動振り分け（切り替えボタン付）
やりたいこと。 PCサイトをスマートフォンで見ると、自動的にスマートフォンサイトへ切り替える（振り分ける）。 スマートフォンサイトでは「PCサイトを見る」ボタンを表示させ、クリックするとPCサイトへ移動する。 PCサイトでは、スマートフォンのみ「スマートフォンサイトを見るボタン」を表示する。 こんなんどうやって作れん・・・ って調べてたら、まさにドンピシャのjQueryライブラリを発見！ 「to-R」で紹介されている「Pc2Sp.js」というライブラリが上の要望を全て満たしてくれる。 1.Pc2Sp.jsを使ってみる まず参考のサイトか上のリンクから「Pc2Sp.js」をダウンロードする。 ダウンロードしたファイルはjQueryの後に読み込む。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
JSON Generator – Tool for generating random data
HelpList of template tagsrandomReturns random item from passed arguments list. Usage{{random([arg1], [arg2] ... [argN])}}Returns*repeatSpecifies number of repeats of array item. Repeatable array must contains only two items: first is repeat tag, second is item that must be repeated. If no arguments is specified item will be repeated from 0 to 10 times. If min argument is specified, item will be re
エクスプローラーにタブ機能を追加してブラウザを操るような操作を可能にするフリーソフト「Clover」
エクスプローラーにタブ機能を追加し、複数のフォルダを1つのエクスプローラーでまとめて操作することが可能になるフリーソフトが「Clover」です。Windows XP、Vista、7、8上で起動可能。ダウンロードから操作方法までについては以下から。 易捷科技 EJIE Technology. ( Clover Brings Chrome-Style Tabs to Windows Explorer ) http://ejie.me/ 上記サイトの赤枠で囲んだ部分をクリック。 ダウンロードしたZIPファイルをExplzhなどで解凍して、「Clover_Setup.exe」を起動。 「Next」をクリック 「Install」をクリック インストールが完了すると、タブ機能が追加されたエクスプローラーが表示されます。 一番右にあるものをクリックすると…… コンピューターのタブが表示されます。 タブを
スタイルシートの有用なスニペットのまとめ | コリス
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
Webデザイナー、コーダー、プログラマー必見！よく使うコード類をまとめて管理＆共有｜「Snippi」が大変便利
コーディングをしているとよく使うコードが簡単に呼び出せたら便利だなぁと感じることがままあります。 TextExpanderを使用してある程度基本のコード類は簡単入力できるようにしてあるのですが、使うには使うけどTextExpanderに登録するほどでもない、そんなコードをどうやってまとめようかなと思っていたところ、バンクーバーのうぇぶ屋さんで紹介されていたSnippiが大変シンプルで使いやすかったのでご紹介。 スニペット管理とかダルいって人にオススメ！超シンプルなスニペット管理ツールの『Snippi』！ | バンクーバーのうぇぶ屋 別にめちゃめちゃ珍しい機能とか無いんですが、とにかく超シンプルで使いやすい！FBやTwitterログインは当然可能で、スニペットに対するタグ付けや言語別ソート、各スニペットにはコメントが可能で簡単な説明なんかすぐ可能。 via: スニペット管理とかダルいって人に
Alignment - Packages - Package Control
Sublime Alignment A simple key-binding for aligning multi-line and multiple selections in Sublime Text 2. Please see http://wbond.net/sublime_packages/alignment for install instructions, screenshots and documentation. License All of Sublime Alignment is licensed under the MIT license. Copyright (c) 2011 Will Bond <will@wbond.net> Permission is hereby granted, free of charge, to any person obtainin
無料で商用利用できてクレジット表示も不要の画像素材検索サイト「タダピク」
仕事上で使用する画像はウェブ上で見つけにくく、いい画像だな、と思っても商用利用ができなかったりクレジット表記が必要だったりする場合もあります。そんな時に便利なのが横断検索サイト「タダピク」で、海外や日本の計24の画像検索サイトから商用利用OK・クレジット表示不要の画像素材を横断検索することが可能です。 タダピク（tadapic） - 商用利用OK・クレジット表示も不要の画像素材検索エンジン http://www.tadapic.com/ トップページの検索欄にキーワード「子猫」を記入し、検索ボタンを押すと…… こんな感じで子猫の画像が表示されます。 気になる画像をクリック。 すると、画像元のサイトに飛びます。 なお、検索対象は「画像」なので、写真だけでなくイラストも一緒に検索されます。 検索時にはイラストやアマチュアカメラマンによる写真素材サイト足成の写真を除外したり、日本のサイトに絞り込
MacとWindowsで外付けHDDを共有するなら「exFAT」フォーマットが最強！ | ライフハッカー・ジャパン
MacとWindowsの両方で外付けハードディスクドライブ（HDD）を使用する場合、どちらのパソコンで使うのかに応じて、フォーマットの形式を選ばなくてはならないという大きな問題があります。両方でも使えるようにしたい、という方には、プラットフォーム依存が比較的少ない「exFAT」形式でフォーマットするという手があります。 exFATは最近のMac（Leopardでは不可）、Windowsマシンの両方で読み込み・書き込みが可能なファイルシステムです。Windowsマシンでドライブをフォーマットすればそれだけで準備完了。両方のOSプラットフォームで使用する場合は、Windowsでのフォーマットがオススメです。OS Xでフォーマットした場合はクロスプラットフォームでの使用ができないこともあるようなのでご注意を。 Windowsのデフォルトである「NTFSフォーマット」はOS Xでは読み取り専用とな
死んで覚える本当のGitの使い方 - mizchi log
注意: バズってますが、これははてなダイアリーからはてなブログの自動マイグレーションに失敗してたものを復旧させたもので、書かれたのは2012年です。 - 最近流行っているGit初心者向け記事は、「僕らが本当に知りたかったこと」が欠けているようにしか思えません。 そこで、本当のGitの使い方を僕が皆さんに伝授しようと思いました。 なにはともかく使ってみよう 前提として、皆様のお手元にはすでにGitがインストールされているものとします。 今回はエディタとしてDungeonCrawl StoneSoupを使います。 Downloads « Dungeon Crawl Stone Soup http://crawl.develz.org/wordpress/downloads Dungeon Crwal Stone Soup は今一番ホットなオープンソースのローグライクです。風来のシレンやトルネコ
iPhone 4 PSD : HD by ~reddevilsX on deviantART
Everything is in the title, it's a PSD who represent the iPhone 4, the more realistic, & the highest resolution iPhone 4 PSD. It's a 3000x4000 Photoshop Document, just WAOUH !! So we've got the Black iPhone 4, and also the White iPhone 4... But there is a surprise, that any another iPhone 4 PSD do not proposes yet... xD There is some Springboard Components, like the Dock, some icons, and the Statu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kawasima/jagrid: Japanese-styled grid framework.
JavaScriptユーティリティライブラリの紹介
GitHub - creatorish/social-shares: SNSでシェアされた数とその合計値が取得できるPHP&jQueryプラグイン
デスクトップ・タブレット・スマフォなど、最近のデバイスが全て揃ってる手書き用のモックアップのPDF素材 -INTERFACE SKETCH