Warpspire: Fragments toward a more resilient future
It's me. Kyle Neath Aster. In a previous life, I used to build internet and go by Kyle Neath. These days I spend my time on creative pursuits and go by Kyle Aster (after the Sierra Nevada wildflower). For me, that's looks like mountain biking around my home of South Lake Tahoe, stuck behind my computer making SketchUp renderings for my new house, throwin' chips at my off-grid ranch, and even a lit
EM Chart - Aloe Web Design Coupons
Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad. Let’s say you have an H3 that’s 24 pixels. It doesn’t matter how the font-size is set (pixels, EMs, percentages, etc). Yo
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
「すぐバテるボクサー」にどうスタミナを付けさせる？ 欠点を直すアドバイス術
「パンチ力はあるのにスタミナがない」というボクシング選手に対して、もしあなただったらどうやって指導しますか？ 今回は、部下や後輩の欠点を直すためにどうやってアドバイスしたらいいか、についてお話します。 この記事をお読みの方の中には、部下や後輩がいらっしゃる人も多いと思います。彼らを指導していく際に、多くの人が悩んでいることのひとつに「彼らの欠点をどうやって直せばいいか」というものがあります。 ということで今回は、部下や後輩の欠点を直すためにどうやってアドバイスしたらいいか、についてお話ししたいと思います。 関根勤さんの教え方 バラエティ番組で、バイプレイヤーの地位を確立されている関根勤さん。最近は、彼がテレビに出ていない日はないのでは、と思えるくらい、色々な番組に出演されていますよね。 そんな関根さんが、2005年10月に『バカポジティブ』（新書版もあります）という書籍を出版されました。ネ
Create a simple but yet attractive web layout | Grafpedia
You need to learn to use the Photoshop software, to be able to create a website with? You are on the right place. On Grafpedia, you can find 100 tutorials, explained step by step, to create incredible web designs. We have the new HTML5 tutorials for creating a website, but also PSD web design tutorials to create a layout from scratch. All of these resources are available in exclusive on Grafpedia.
Photoshop ショートカット(2) - FICC LABS
だいぶ久しぶりのエントリーになってしまいましたが、Photoshopショートカット第2弾です。 今回は知っていると便利そうなものを中心にまとめてみました。 日ごろ集めた情報と自分の良く使うものを、とりあえず、ダーっと勢いでまとめた感じなので箇条書きで少し見辛いですが、今後は便利系ショートカットはこのページに追記していく予定なのでキャプチャーとかいれてもう少し見易くしていければと思っております。 もし、他にもこんなのも便利なショートカットがあるよという方がいらっしゃいましたら教えていただけると大変有難いです。 ■インターフェース Tabキーを押すとツールバーとパレットが非表示になる。 Shift + Tabでパレットのみ非表示にすることが出来る。 パレットのタイトルバーをShiftを押しながらクリックすると最寄の枠にくっつく（CS3ではナシ） Fでスクリーンモードでの切り替え イメー
[ JavaScript ] jQuery サンプル集
このページの目次 – [連続アニメーションサンプル](#animate) – [アコーディオンパネルのサンプル](#accordion) – [テーブルの偶数行に CSS を適用し、ストライプ ( しましま ) にするサンプル](#addClass) 連続アニメーションサンプル {#animate} ———————————————————————- jQuery のみで動く連続アニメーションのサンプル。 上から落ちてくるバージョンを IE8 で見ると、エッジに黒い縁が出るのはなんで？ ( 最終更新日 : 2010/12/06 ) – [上からフェードインしながら落下バージョン](https://bowz.info/wp-content/uploads/2008/10/jquery-samples/animate/a.html) – [右から出現バージョン](https://bowz.inf
![[ JavaScript ] jQuery サンプル集](https://cdn-ak-scissors.b.st-hatena.com/image/square/19691f3db719fc116cbcdd5e767c89ee15487f3e/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2018%2F09%2Fudon-1.jpg)
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
印刷用 CSS で背景画像を印刷させる方法 - lucky bag
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。 wg:Printing CSS background images (sort of) カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくい
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
FIREWORKS ZONE | プラグインなど
September 12, 2017 Guide On How You Can Build And Enhance Collaboration With SharePoint SharePoint is a powerful application that empowers teams with dynamic and productive sites for every department, division and project team. The application makes it easy to share files, resources, and news enabling team members inside and outside the organization to collaborate effortlessly and securely across
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ
WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。 バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの
clearfix + Dreamweaver CS3 デザインビューのレイアウト崩れを防ぐ方法
clearfix を使っているページを Dreamweaver CS3 のデザインビューで見てみると表示がおかしくなり、編集がしにくいんですよね。 このレイアウト崩れを正常に戻す方法をメモしておきます。 ↑ こんな感じで、どこを選択して編集すれば良いのかわかりにくい。 ## [ overflow: hidden; ] を指定する方法 clearfix セレクタの中に [ overflow: hidden; ] か [ overflow: auto; ] を指定すれば良いんだそうです。 ↑ float は解除されたが、float を内包する div の背景画像と背景色は表示されない。 ※ [ overflow: auto; ] を指定した時 Safari での表示がおかしかったので、私は [ overflow: hidden; ] を使う事にします。 ### 問題点とかヒントとか – あくま
[ CSS ] 縦方向メニューのサンプル
今更ですが、CSS で縦方向メニューのサンプルを書いてみました。 ↑ 完成イメージ ## サンプル – [サンプルファイル](https://bowz.info/wp-content/uploads/2008/03/vertical-menu/index.html) ### 主要部分の HTML のコード サンプルのリスト サンプルのリスト サンプルのリスト ### CSS のコード #menu ul { list-style: none; margin: 0; padding: 0; } #menu ul li { line-height: 0; } #menu ul li a img { vertical-align: bottom; } #menu ul li ul { margin: 10px 0 15px 0; } #menu ul li ul li { background-i
![[ CSS ] 縦方向メニューのサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68310a54a0d035f3ab5454697ec3b8c6cc82025/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2008%2F03%2Fsample_01_a.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マージンの相殺について：CSS | Tech de Go
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 12 | コリス
flashmymind.com
Movable Type: エントリーを削除した時、HTML も削除する