[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
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
CSSでボックスの内容物を上下中央揃えにする方法3種。｜web bibo
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
HTML5でコーディングするときに役立つ10のオンラインツール
最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。 Initializr 様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 HTML5 Demos and Examples HTML5の独自機能のDemoを試せるサイトIE、firefox、opera、safari、Chromeとそれぞれのブラウザの対応状況をチェックできます。 HTML5 Canvas Cheat Sheet – Nih
KompoZerを日本語化する
KompoZerのデフォルトの表示は英語となっています。そのまま使用してももちろん良いのですが、使いづらい人は表示を日本語化する必要があります。 以下、Windowsのファイルの拡張子が表示設定になっていることを前提に解説してあります。拡張子が非表示になっている（標準状態）人は、フォルダオプションから表示させるように設定しましょう。 公式サイトにある言語ファイルをダウンロードします。ここから.xpiという拡張子の日本語言語ファイルをダウンロードしてください。デスクトップなどに保存しますが、まれに環境によっては.zipファイルなどとしてハードディスクに保存されてしまう場合があるようです。そのときは、一旦保存してから拡張子.zipの部分をリネームで削り取り、.xpiファイルに戻します。 KompoZerを初めて起動すると、以下のようなダイアログボックスが表示されます。 これはソフトウェアのTi
1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」:phpspot開発日誌
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」 2007年10月03日- Website Performance | CSS Sprite Generator 複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」。 GoogleはHTTPコネクションを減らすため、画像は一枚で出力しています（参照）。 同じことをやろうとすると結構面倒ですが、複数の画像をZIP圧縮してアップロードするだけで、画像の結合＆CSS出力を行ってくれるサービスが登場しました。 使い方は簡単。画像ファイルをZIPでまとめて圧縮後、アップロードします。 positionに関するCSSが出力されています。 ページ下部には画像を表示したい位置に「background: url〜
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
5 Free Videos — Website tutorials and tools
Website tutorials and tools Jack Born's website for website marketing tutorials and tools Just click the play button and you’ll see a short but important video that will save you a lot of time and money when you register a domain name (www.yoursite.com) Get 4 More Free Videos Just fill out this short survey and you’ll get instant access to four more videos as good as the one you just watched… if n
ITmedia Biz.ID：オフィスソフトで100段落の“長文”ダミーテキストを自動生成する
WordやPowerPointでちょっと何かを試したいとき、適当な文章（ダミーテキスト）を作成したり、既存の文章からコピペする場合がある。実はもっと簡単にダミーテキストを生成する方法があるのだ。 WordやPowerPointで資料を作っているとき、ちょっとしたダミーテキストが必要になる場合はないだろうか。また、後輩に使い方を教えたり、自分で新機能を試したりするときも適当なサンプルが必要になったりする。そんなとき、適当に文章を作成したり、既存の文章からコピーする場合が多いが、実はもっと簡単にダミーテキストを生成する方法があるのだ。 オフィスソフトには、ダミーテキストとして利用できるサンプルテキストの生成機能が用意されている。まずはWordとPowerPointの場合だが、文頭に「=rand()」と入力してみよう。オートコレクト機能が有効になっている場合は、ダミーテキストが生成されるはずだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://quarter4.info/create/22-wordpress-customize-hack.html
フォームのデザインいろいろ - DesignWalker
Google Code Archive - Long-term storage for Google Code Project Hosting.
JQuery Corner Demo
jQuery
[CSS]横並びのレイアウトをfloatで配置するTIPS -Floater
知っておくと便利なHTMLで書ける特殊文字一覧『HTML/XHTML Character Entities』 | P O P * P O P
フォームボタンCSSデザインするテクニック （Rediscovering Button Element） - youmos