Web制作に役立つ便利すぎるブックマークレットのまとめ
Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造が正しいか確認 マークアップのいまいちな箇所を指摘してくれる 背景を素敵なテクスチャに変えてみたい ページのパフォーマンスを確認 minifyされたCSSを見やすく表示 SEOやソーシャルメディアに大切な項目を確認 コードとアクセシビリティをチェック ページにグリッドを表示した確認
[CSS]柔軟性のあるグリッドをシンプルで簡単に実装するスタイルシートのチュートリアル
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid
昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張やブックマー クレット使うのも面倒ですしね。 制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。 こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。 グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。 <script type="text/javascript"> $.simpleGrid({ rowHeight: 20, columnWidth: 30, gridWidth: 960 });
960pxのグリッドを1クリックで用意してくれるPhotoshopのアクション
960pxのグリッドに4, 6, 8, 10, 12カラムとそれに伴ったガイドを1クリックで用意してくれるPhotoshopのアクションを紹介します。 960 Grid Actions for Photoshop アクションはPhotoshopのドキュメントを新規作成するもので、グリッド・カラム・ガイド以外にもレイヤーにヘッダやフッタなどのフォルダも準備されます。 フォルダも準備されます アクションを一から作成するのは面倒なので、これをそのまま使用してもよいし、自分用にカスタマイズしてもいいかもしれません。 ダウンロードしたアクションファイルは当方のPhotoshop CS4日本語版でエラーが出てしまったので、それを修正する方法を紹介します。 ※再配布のライセンスがなかったので説明のみで。 日本語環境と英語環境で作成される名前が異なるため、エラーが表示されます。 エラーの内容はレイヤー「G
[JS]ページにグリッドを重ねてカラムのサイズを自動算出するスクリプト
ウェブページにグリッドをオーバーレイさせて、レイアウトのチェックができるスクリプトをDev Growから紹介します。 デモページ カラムの幅と高さの数値は自動的に表示されるもので、カラムとスペースの数によって算出されています。 グリッドを表示するためには、予め下記の数値を記述する必要があります。 `※デフォルト値は設定されています。 横のカラムの数 横のスペースの数 横のカラムの高さ 縦のカラムの数 縦のスペースの貸す 縦のスペースの幅 オーバーレイの色 オーバーレイの透明度
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
