さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ
.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s, color 0.2s} .alpha .btn:hover{box
[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック
フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。
![[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd5c987dfa0c56fe670b813b7f4c439c96db29a2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110701-01.png)
ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。 現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね（遠い目 Style Guide Boilerplate Style Guide Boilerplate -GitHub Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイトを効率的に管理する。 スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないで
これは便利！外部ファイルをリンクさせるPhotoshopのエクステンション -Links
これはPhotoshopの標準機能として、ぜひ実装してほしいですね。 外部ファイルをリンクさせ、スマートオブジェクトとして配置できるPhotoshopのエクステンションを紹介します。 Linked Smart Objects in Photoshop [ad#ad-2] Linked Smart Objectsのインストール 下記ページの「LinksCS4.zip」をダウンロードします。 対応しているPhotoshopのバージョンはCS4, CS5です。 Smart Object links panel 解凍した「LinksCS4.mxp」をダブルクリックすると、Photoshopへのインストールがはじまります。 インストールが完了すると、メニューの[ウインドウ]-[エクステンション]に「Links」が表示されます。 Linked Smart Objectsの使い方 [ウインドウ]-[エク
各種デバイスやブラウザやOSで使用するアイコンのサイズとフォーマット
Faviconをはじめ、iPhone, iPad, Androidなどのモバイルデバイス、Chrome, Safariなどのブラウザ、Lunux, Mac OS X, WindowsなどのOSで使用するアイコンのサイズとフォーマットを紹介します。 Icon Reference Chart 上記より主要なものを下記にピックアップしました。 favicon size 32px, 16px format favicon.ico, .png, .jpg, .gif Android -Launcher&Menu size 36px(idpi), 48px(mdpi), 72px(hdpi) format .png Google Chrome Extension Icon size 16px, 48px, 128px format - iPhone App icon size 57px(10px) f
グラデーションをより美しく滑らかにするPhotoshopのアクション -No More Banding
グラデーションを描いた時にできてしまうバンディング（濃淡の縞）を滑らかにするPhotoshopのアクションを紹介します。 手動用にそのアクションの解説も。 Photoshop Actions to fix the banding of Photoshop's gradients. [ad#ad-2] No More Bandingの使い方 No More Bandingの仕組み No More Bandingの使い方 No More Bandingの使い方は簡単です。 「Download」ボタンから「No More Banding 0.5.atn.zip」をダウンロードして、解凍。 「No More Banding 0.5.atn」をPhotoshopのアクションパネルに登録。 インストールが完了すると、下記のようになります。 右半分が適用前、左半分が適用後です。 No More Band
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
WordPressをもっと便利にするスニペットが500個以上登録されている -WPSNIPP
WordPressにちょっと機能を追加したい時に役立つスニペットをまとめたサイトを紹介します。 目的をもって探すだけでなく、こんなこともできるのかという発見もあるかもしれません。 WPSNIPP – 500+ WordPress code snippets for your blog [ad#ad-2] WPSNIPPでは現在、545個のWordPressの便利なスニペットが登録されています。 下記にほんのちょっとだけ、その便利なスニペットをピックアップしました。 よく使うショートコードをボタンから選択可能に 特定のページのみ特定のスタイルシートを適用 アーカイブウィジェットの表示期間を制限する Google+1ボタンを設置する プラグインを管理画面を使わずに停止する CSSファイルのキャッシュを防止する 大切な「wp-config.php」を守る よく使うショートコードをボタンから選択可
計画停電の備え：サラダオイルランプの作り方
[ad#ad-2] サラダオイルランプの材料 サラダオイルランプの作り方 サラダオイルランプを使った感想 ご利用にあたって ご利用するにあたって、余震による転倒、ガス漏れによる引火など、ロウソクと同等の扱いをした方がよいと思います。 こういった危険性が無くなり、計画停電のためにご利用ください。 転倒時対策として、水を張った桶に浮かべて設置する、というアドバイスをいただきました。 サラダオイルランプの材料 サラダオイル 3時間点灯で5ccくらい ガラスのコップ ジャムや桃屋でも可（低い方が便利かも） 安定して置ける形状の物 アルミホイル 市販の25cm幅の3cm分 炎の芯となるもの ティッシュやクッキングペーパー 芯の穴開け 鉛筆でも爪楊枝でも可 サラダオイルランプの作り方 作り方は、下記を参考にしました。 実際に作成して、ポイントとなるのは アルミホイルの長さは、容器の高さに依存します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
