タグ

technicとtipsに関するstudio-no9のブックマーク (20)

  • [CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート

    <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title> <!--[if IE]> <style> .arrow { top: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html> </textarea>

    studio-no9
    studio-no9 2010/05/24
    headデザイン
  • 覚えて良かったCSSテクニック « zaru blog

    ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

    studio-no9
    studio-no9 2010/04/26
    liをクラス指定せずに3カラムで並べる、高さ指定したボックスの一番下にボタンとかを配置したい
  • JPEG画像をより美しく、より軽量に最適化するテクニック

    JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため

  • 【Fireworks】グラフィックウィザードで大量の画像を自動で作る | バシャログ。

    軽い腱鞘炎になってしまいました、toyama です。左手を使うキーボードショートカットが原因です。別名で保存とか、属性をペーストとかマスクとしてペーストとかグループ解除とかしようとすると痛いので、湿布に包帯を巻いてカバーしているのですが、広範囲に巻きすぎているのか左手だけ「リングにかけろ」みたいになっています。 この資料をもとにこの見出し画像を大量に複製して書き出してください!入れる文字はエクセルにまとめてありますので!見出しごとに写真変えてね!うんざりするほど大量にあります!納期は今日!というお仕事があると思います。 テキストをコピー&ペーストすればいいだけなのに、どうしてこんなに辛いんでしょう。そんなときは Fireworks さんにおまかせ! 自動的に画像をつくってくれます。 グラフィックウィザードを活用する こんな画像をテキストだけ変更して、大量に作るミッションです。 用意するのは

    【Fireworks】グラフィックウィザードで大量の画像を自動で作る | バシャログ。
    studio-no9
    studio-no9 2010/04/26
    テンプレートを使って画像を自動複製する方法
  • セレクタでのCSSハック一覧表|web bibo

    CSSハックの種類は色々ありますが、その中で役に立ちそうなハックだけを一覧にしてみました。 CSS Validation Serviceに通るハック(valid)とエラーになるハック(invalid)に分けています。 少ない記述でハックを使いたいと思う方はプロパティでのCSSハック一覧表をご覧下さい。 ・08/06/06 IE8の検証を載せました。 ・08/06/29 Firefox 3の検証を載せました。

  • floatを使わずにinline-blockで横並びにする方法|web bibo

    /* CSS(スタイルシート)に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ: HOME » CSS レイアウト・ボックス » floatを使わずにinline-blockで横並びにする方法 floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class

    studio-no9
    studio-no9 2009/12/22
    横並びの数を指定せずにboxを横に並べる
  • 1px欠けの角丸ボックスをCSSだけで作る方法|web bibo

    スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:

  • http://www.webbibo.com/

    studio-no9
    studio-no9 2009/12/22
    CSSでなにか組むときに最初にチェック
  • RedLine Magazine : OLリスト 番号だけ画像なしでスタイルを変更

    OLリスト 番号だけ画像なしでスタイルを変更 こちらのページより、面白いなーと思ったCSSネタ。 CSS Code Snippets : 15 Wicked Tricks | DevSnippets 上記ページの8番目の「Style Your Ordered List」の部分。これはOLリストのliタグの中にpを入れて、OLで付与されるリスト番号の部分のフォントの見た目のスタイルを変更するっていう趣旨。 今までOLリストを使う時、liの中にpタグを入れた経験がなかったし(多分)、実はOLリストの数字の見た目を変えたい時は画像置換で背景画像を表示させてた。画像にしちゃえば好きなフォント使えるし、数字の他にちょこっと飾りなんかも入れれるし。ただ、それをするためにはidやらclassやらをhtmlに別途与える必要が出てくるんよね。それってあまり好みじゃない書き方だったりする。もちろんCSS3の:

    studio-no9
    studio-no9 2009/05/06
    これ、おもしろいね
  • フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

    タイトルが長い… サイトやブログの価値を調べる10の指標とツール|前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか?ボクはしっかりバテてダレてます。あんまり仕事してま…(加藤さまに給与減らされるので自重しました) さて、そんな訳で題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ(略)みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、

    フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
    studio-no9
    studio-no9 2008/10/25
    リストタグの途中にだけCSSを適用したい、とかの参考[sample]
  • CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

    DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff

  • CSSでロールオーバーもどき

    CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法(改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像

    CSSでロールオーバーもどき
    studio-no9
    studio-no9 2008/10/25
    カーソルがあったときに白っぽくさせるやり方
  • IEでのCSSのバグを回避するhasLayout | コリス

    IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ

  • 世界の名画でデジカメ画像を一発補正

    Anker's 3-in-1 MagSafe foldable charging station drops back down to its Prime Day price

    世界の名画でデジカメ画像を一発補正
    studio-no9
    studio-no9 2007/12/22
    色調をほかの絵に合わせる[palette]
  • PHPで正規表現を読みやすくする方法:phpspot開発日誌

    PHP In Action | Readable regular expressions It bothers me: I can dream up more ideas in one afternoon than I can write down in a week. PHPで正規表現を読みやすくする方法。 通常、PHPで正規表現を記述するとき、次のようにpreg_matchに直接渡して使う行うことが多いかと思います。 preg_match("/^[a-z]+$/", $str); 正規表現の内容が複雑になるにつれ、コードがよく分からなくなることはありがちですね。 そこで、次のようにコードを記述すると単位ごとにコメントが付けられて読みやすくなります。 $regex = '/(w+s+)'. // Word followed by spaces '{6}'. // Repeated six

  • Webデザイナー/開発者が覚えておくとよい25のテクニック:phpspot開発日誌

    25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい25のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScriptPHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー

  • Alpha.67

    解説以上の内容を教えてくれる場所がない。大人数、シアター形式のセミナーでは充実感が薄い。ロクナナワークショップではそんな方々のために、少人数制の講座を開設しました。 テーマは脱初級。講師の心意気・考え方を感じられる距離で、技術だけでなくものの見方・考え方を学習することができます。また、各講師独自の観点でより実践的な内容を学べます。 ROKUNANA WORKSHOP OF MEDIA DESIGN あなたの師匠を探しに来てください。

    studio-no9
    studio-no9 2007/03/29
    半透明の表示サンプル[sample]
  • HugeDomains.com

    Captcha security check luv2help.com is for sale Please prove you're not a robot View Price Processing

    HugeDomains.com
    studio-no9
    studio-no9 2007/03/15
    フォトショップのテクニックやサンプル
  • lockエラー | 月額200円からのレンタルサーバー JSN

    まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※(米印)」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず1文字分右に動かして、「text-indent : -1em;」で最初の行だけ1文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で

    studio-no9
    studio-no9 2007/03/15
    注釈(※)のような先頭行をそろえたいときに
  • hori-uchi.com: _blankを使わないで別ウィンドウを開くにはre

    はてなブックマークをみていたら、気になるエントリーを発見。 [戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法 target="_blank"という書き方がXHTML 1.1 や XHTML Basicに準拠していないので、これらに準拠するようにしつつ、別ウィンドウで開くにはどうすればよいかという話です。 別ウィンドウで開くにはJavaScriptを使えってのが推奨される方法なんですが、onclickを使って定義するのはめんどうということで、この記事では、aタグにclass="popup"という属性を与えておけば、JavaScriptで別ウィンドウを開くということをしています。 この件については友人HTMLCSSマスターなkawachi君と話したことがあって、そのときは、下のエントリで紹介されているrel="external"という方法を使うのがいい

  • 1