毛筆や筆で書かれたようなフリーフォント、ペンや鉛筆で書かれたようなフリーフォント、マジックやクレヨンや太ペンで書かれたようなフリーフォントを紹介します。 走り書き、かわいい手書き、達筆なフォント、いっぱい揃っています。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌でも幅広く利用できる日本語のフリーフォントです!
![商用利用無料! 毛筆・筆文字、ペン字、マジック、手書きの日本語フリーフォント 総まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e2b96128cc2150f788ab0321fbce6816d79ddf24/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-00%2Fhandwriting-japanese-freefont%402x.png.png)
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「(エクセルでいうところの)行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
<textarea name="code" class="css" cols="60" rows="5"> <!--[if IE]> <style type="text/css"> .container {padding-left:14px;} .frame {left:4px; top:4px;} .shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');} </style> <![endif]--> </textarea>
CSS3に対応していないIE5/6/7/8をCSS3の擬似セレクタに対応させるスクリプトを紹介します。 ie-css3.js 対応するセレクタは、下記の11種類です。 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty スクリプトの動作は、セレクタを見つけたらシミュレーションしたものに変更されて適用されている、とのことです。 スクリプトの使用方法は、DOMAssistantと併用し、外部スクリプトとして記述します。 <textarea name="code" class="html" cols="60" rows="5"> <head> <script t
テキストにさまざまなエフェクトをかけるPhotoshopのチュートリアルを紹介済みのものから未紹介のものまで、2009年の総まとめです。
ブログツール「WordPress」のインストール時に、簡単な作業でセキュリティをアップするチップスをWP Engineerから紹介します。 Small Security Tipps for your WordPress Install 以下、そのポイントを意訳したものです。 はじめに WordPressの標準のインストールは非常に簡単で、WordPressの人気の要因の一つともいえます。しかしながら、インストールを行う際に少し手を加えることで、不正なアクセスをより難しいものにすることができます。 テーブルのプレフィックス DBで使用するテーブルのプレフィックスを標準の「wp_」から異なる文字列に変更します。 設定方法 「wp-config.php」の「$table_prefix = 'wp_';」の「wp_」を変更します。 認証用ユニークキー WordPressの安全性をアップするために、
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
Photoshopを使用して、グラデーションを描いた時に濃淡の縞ができないように滑らかにするチュートリアルをslodiveから紹介します。 How To Correct Banding In Your Gradients Using Photoshop 下記にチュートリアルのポイントをステップごとに紹介します。 Step 1 レイヤーにグラデーションを作成し、作業(確認)用にそのレイヤーをコピーします。
ハイクオリティなスモークのエフェクトを描く、高解像度のPhotoshopのブラシColorburnedから紹介します。
コンテンツ箇所をHTMLの上部(ヘッダ・ナビゲーションより上)に配置するスタイルシートのトリックをSoh Tanakaから紹介します。 Markup Hierarchy - Advantages in SEO demo 上記のようなレイアウトをHTMLで記述した際、上左の順番で配置するのが一般的ですが、「float」と「position: absolute;」を使用して、下記のようにコンテンツ箇所を先頭に配置しています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="main" class="container"> <div id="content">Content</div> <div id="header">Header</div> <div id="sidecol">Side</div> </div>
New CSS Sticky Footer - 2009 demo 主な対応ブラウザは、IE6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリスト New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよりクリーンにし、マルチカラム対応にしたものとのことです。 仕組みはシンプルで、下記が最小の構成になります。 HTML マルチカラムの場合は、「id="main"」のdivに配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrap"> <div id="main" class="clearfix"> </d
アロー、ビュレット、サーチ、ショッピングカートなど、20,000個以上のウェブサイトで汎用性の高いミニサイズのアイコンを紹介します。 ダウンロードはフリーで、ライセンスは各アイコンで異なります。
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その2つの不具合が無いものとなっています(IE7調べ)。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
写真画像をレタッチして、見栄えをよくするPhotoshopのチュートリアル集のPart 2です。 Softer Background Effect Bourne Ultimatum Color and
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は8つのステップで紹介されています。
PSDTUTSのエントリー「Photoshopでゴールドに輝くテキスト エフェクトの作り方」の紹介です。 How To Create A Gold Text Effect In Photoshop 上記画像は、グラデーションの具合をあまり検討せずにぱっぱと作ったのでいまいちですが、グラデーションを変更することにより、ゴールドだけでなくシルバーなどにも応用ができます。 チュートリアルにキャプチャ入りで説明があるので、簡単に流れを。 背景の作成。 レイヤースタイルで、背景を作成。 「グラデーションオーバーレイ」の設定は、 描画モード:通常、不透明度:100%、グラデーション:#000000から#443501で逆方向、角度:90、比率:138%。 背景にフィルタ処理。 [フィルタ] - [テクスチャ] - [テクスチャライザ] フォントは、「Times New Roman」を使用。 テキストのレ
Allan Jardine | Reflections ブックマークレット「Design」には4つのツールがあり、それぞれ同時に使用することもできます。 Grid リアルタイムに変更できるグリッドを表示します。
Splashupは、Photoshopライクなインターフェイスで画像を編集できるオンラインサービスです。 下のキャプチャ画像はPhotoshopではなく、ブラウザで表示している「Splashup」です。 Splashup Splashupでは、Photoshopのようなインターフェイスと操作感で、ローカルファイルの画像やfickr・Picasaなどのオンライン共有サービスの画像を編集することができます。 undo機能、レイヤー、フィルター、ブラシ、テキスト編集など、ちょっとした作業は全てできてしまいそうです。 Splashup Tour 他に同様のオンラインサービスが多数ありますが、Splashupは頭一つ抜けている感がします。 是非、そのインターフェイスと操作感を試してみてください。 もう、Photoshopはいらないかもしれません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く