Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS:ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
Dropboxを使用するときに気をつけたいたった一つのことに関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。はじめに さいきん非常に注目のDropbox。 Dropboxを使えば複数のパソコン間でファイルを共有したり、間違えてファイルを上書きしてしまった場合バックアップファイルを参照したり、さらには複数のパソコンの設定を同期したりなど非常に便利です。 登録するだけで無料で2GBの容量を使用することができます。 注意点 こんなに便利で使い方次第で無限の可能性を持ったDropboxですが、注意しなければならない点がひとつだけあります。 それはDropboxを使っていく上でパソコン内にキャッシュがたまっていくこと。 有料プランで50GBや100GB使用しているときはこのキャッシュフォルダの容量も膨大になってしまうので、ときどき掃除してあげる必要
画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1
Photoshopと比べると、どうしても知名度が低いものの、その使いやすさに熱烈?な支持者が多いFireworks。 ですが、正直95%(なんとなく)はPsユーザーなため、あまりFwのコンテンツはネット上でも見かけません。 本屋に行ってもあるのはPhotoshopの教本ばかり。。。 そこで、Fwに力を入れてる日本のサイトをまとめてみました。 Fireworks Bros.(白坂 翔さん) Fireworks Bros. 株式会社デザインエージェント、84ism/ハチヨンイズムでご活躍されている白坂 翔さんのブログ。 ・素人っぽく見えないドロップシャドウのつけ方 ドロップシャドウはニガテなので、非常に助かります。 ・普通に拡大すると、矩形がボケてしまう場合の対処法 Fwの弱点としてアンチエイリアスが弱いのがあります。定番のワザかもしれませんが、知らない人は必見! Fireworksマニア(Y
Googleの検索結果は、言うまでもなく優秀ですが、この検索結果をさらに絞り、よりピンポイントな結果を得たい場合、「AROUND」演算子を使うと便利です。 結果のどこかに検索単語があれば良いという場合であれば、「AND」演算子を使う(例:Bert AND Ernie)と便利です。しかし、この方法だとBertとErnieという名前が、ページそのものとはあまり関連がない場合でも検索に引っかかってしまいます。こういった場合、「AROUND」演算子を使うと、検索単語がある範囲を限定できるので、より限定的な検索結果を得ることが可能です。 例えば「Bert AND Ernie」を検索したい場合、「Bert AROUND(1) Ernie」と検索することで、BertとErnieが、かなり近くにある検索結果を得られます。範囲を拡げたい場合は、(1)の数値を(2)、(3)と変更していくと、検索範囲が拡大され
サイトやブログ作り・デザインを考えている時に参考になる記事や影響力の大きいブログやサイトをまとめてみました。 IT関係やデザイナーは絶対に読むべきブログ・サイト 僕も多分、皆さんもお世話になっている方も多いと思いますが 改めて、僕がよく参考にしたり、楽しませてもらったりしているブログやサイトをまとめてみました。 2つのブログを追加させてもらいました。 「ホームページを作る人のネタ帳」さん jQueryやWebデザインと様々な幅の広い話題で毎日を飽きさせてくれないブログです。 なにより、多くの人から愛されているブログだと感じます。 「photoshop vip」 Photoshopのチュートリアルなどを豊富に紹介しています。 Webデザイナー関係の人は、ぜひ見ましょう。 「コリス」さん フリーな素材からJavascriptやCSSなど紹介しています。 更新頻度ま高いので必見です!!! 「We
大量の画像を書き出す場面に遭遇して( ꒪⌓꒪)ってなるのはWEB屋の宿命のようなものですが そんな書き出しを一瞬でもはやくやっつけたい。 むしろやりたくない。なにもかも機械に任せたい。 機械がやってくれてる間にはとサブレ食いながら優雅にFaceBookをたしなみたい。 そんなめんどくさ効率を追求するために調べたまとめです。 なにかお役に立つものがみつかればうれしいです。 書き出しをとにかく速くしたい スライスチップ作成パレット スライスチップ作成パネル-CS4用 | Dearps スライスがFireworksみたいになるエクステンション。ほんとうに助かってます。 ワンクリックでスライスができるのでガイドつくってちまちまやるより数倍速いです。 Flash Helper Scripts Flash Helper Scripts:JavaScriptで「Flash+Photoshop」連携をパワ
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
2010年11月26日18:00 カテゴリTipsLightweight Languages javascript - ブログパーツ/ウィジェット開発者におねがい JavaScript: The Good Parts Douglas Crockford / 水野貴明訳 [原著:JavaScript: The Good Parts] たった二つです。 名前空間を一つだけ用意して、それのみを使うこと 設定はグローバル変数ではなく、引数渡しにすること そうでないと、導入したサイトで変数衝突が起こる公算が大きくなります。 それが実際に発生したのが、右の画像です。表示がぐしゃぐしゃになっています。 問題を起こしたのは、以下のsnippetでした。 <script type="text/javascript" src="http://blogchart.jp/js/blogparts.js"></sc
各所で話題になっていますが、Linuxを劇的に高速化する方法が発見されました*1 *2 *3。特にブラウザなど複数のアプリケーションを同時に起動した状態では、体感速度がびっくりするほど向上します。 高速化する方法も簡単です。カーネルの再構築という難しい作業は不要で、設定ファイルを数行書き換えるだけです。是非試しましょう! ステップ-1: ~/.bashrc の編集 ~/.bashrc の末尾に以下の4行を追加します。 if [ "$PS1" ] ; then mkdir -m 0700 /sys/fs/cgroup/cpu/user/$$ echo $$ > /sys/fs/cgroup/cpu/user/$$/tasks fi ステップ-2: /etc/rc.local の編集 /etc/rc.local の末尾に以下の2行を追加します(2010/11/24更新。不要なmkdirコマンド
こんにちは。 先日、新型MacbookAirの美しさに魅せられ、ついついMacbookAir13インチ特盛りをポチってしまった橋本です。 今日は、弊社熊谷の記事「続・続Macを買ったらすぐインストールするアプリケーション」のインスパイアの意味も込めて、アプリではなく、Macの設定変更について書いてみたいと思います。 ※注意※ 今日ご紹介させていただく内容は、ターミナルからコマンドを入力して設定を変更するものです。試してみる際には自己責任でお願いします。MacOSX 10.6.5で動作確認済です。 では、早速。 1. デスクトップ上のアイコンを消す ちょっとしたファイルを保存するときに、ついついデスクトップに保存してしまうことってありませんか?自分はよくあります。ただ、このいい加減な習慣を続けていると、いつの間にかデスクトップがアイコンで埋まってしまって、せっかくの壁紙が台なしになってしまい
「ライティング」は、自分自身を表現したり、頭の中を整理するのに適した、身近で基本的な手段。しかし、そんな身近な手段だからこそ「言いたいことが、なかなかうまくまとまらない」、「じっくり書くことに専念できない」といった悩みも尽きません。そこで米Lifehackerでは、よりよいライティングのためのコツを10点にまとめました。「英語で書く」ことを前提としたものですが、言語を問わず活用できる方法が紹介されているので、ぜひ参考にしてみてください。 1: 書く前に、考えを整理しよう 書き始める前に、落ち着いて考えを整理しよう。ラフなアウトラインがあれば、全体をまとめやすくなる。「Scrivener」や「yWriter」は、ライター向けの便利なツール。このほか、「Evernote」や「OneNote」といった、一般的なオーガナイザーを活用してもよい。 2: 書くためのスケジュールを設定しよう ものを書く
「往年の名作「スーパーマリオブラザーズ」、あの濃い内容でわずか40キロバイト」に載っていたわずか565バイトのテトリス。文字数にして551文字。79文字*7行のプログラミングで、テトリスが動きます。 以下のソースコードをメモ帳に貼り付けて、htmlで保存すればテトリスが動きます。 <body onKeyDown=K=event.keyCode><script>X=[Z=[B=A=12]];h=e=K=t=P=0;function Y() {C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/ A)*145)])p=B[i];!t|c+4?c-4?0:h+=d:B=C;for(f=K=i=0;i<4;f+=Z[A+p])X[p=h+B[i++]]=1 if(e=!e){if(f|B){fo
One of the most useful tools a web developer has is the command line. If you're reading this post, you're probably no stranger to the terminal. But you may not know all the special commands and utilities you can use to boost your productivity. Getting Started If you’re running macOS or your favourite flavour of Linux, you’re all set. Just fire up the terminal, and keep going. If you’re on Windows,
29 Comments Yup…i must agree, they are the best tuts of 2009. Keep up the good work. Awesome collection, Thank you. Nice roundup, thanks! Great tuts, thanks for sharing Amazing tutorials, my favorite – photo manipulations tutorials. Thanks. great tutorials thank you yeh you saying right greatest tutorials of 2009. Very good round up. Excellent collection, great work! Bookmarked 🙂 Awesome collecti
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く