CSSで画像を上下左右に反転する方法 - Qiita
画像の切り抜きを行うのに使ったサンプル。 IE8でも動作した。結構昔からFlipってあるのね。知らなかった。 IEだとDXImageTransform.Microsoft.BasicImage()があるけど、これと同じことらしい。 <!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <title>画像の上下左右反転サンプル</title> <style> .refrect-lr{ -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -moz-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .refrect-ud{ -webkit-tran
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
hamashun me : フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件
フォームボタンにbackground-colorプロパティを指定すると、iPhone Safariではなぜかグラデーションがかかり、更に色が薄くなります。 デフォルトの状態 こんな感じですね。 background-colorで背景色を指定した状態 #sample { -webkit-border-radius: 4px; background-color: rgb(1,47,145); } <input type="submit" value="Submit" id="sample" /> こうすると、 グラデがかかり、色も薄くなってしまっています。 単色のgradientで指定する これを解決するには、一色のみを指定したgradientを使用します。 #sample { -webkit-border-radius: 4px; background: -webkit-gradient(l
CSSでボックスの内部に影をつける方法 - Fridayeight
box-shadowを利用すれば、影をつける事ができます。insetを使う事で影を内側に出来るようになります。今回はフォーム入力部分と送信ボタンに影をつける方法を書いてみます。 サンプルのhtml form部分 <form> <input class="searcharea" type="text" name="name" id="is" value=""> <input class="submitarea" type="submit" value="検索"> </form> 入力フィールドのクラス名を.searcharea、送信ボタンのクラス名を.submitareaとしました。 スタイルシート box-shadow:A B C D (E) inset; Aはx方向へのずれを、Bはy方向へのずれを、Cはぼかしの強さを、Dではぼかし広がりを指定しています。Eで色の指定をしています。最後の
web-cocoon.jp - 鳥取県 米子 ホームページ制作 ゲー アプリ 制作 鳥取 方法 リソースおよび情報
web-cocoon.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、web-cocoon.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！
ほんっとにはじめてのHTML5とCSS3
今回は、要素に「シャドウ」をつける box-shadowプロパティを使ってみましょう。 CSSプロパティ 参考：CSS Backgrounds and Borders Module Level 3 | 7.1. Drop Shadows: the ‘box-shadow’ property 本日のINDEX box-shadowプロパティの値 box-shadow の値は 最低 2つ必要 3つ目の値は、シャドウをぼかす半径 4つ目の値は、シャドウを拡張させる半径 以上 4つの値は絶対この順番 オプションの値は「シャドウ色」と「内側へのシャドウ」 ボックスシャドウの色 内側へのシャドウ 2重のボックスシャドウも指定できます 疑似要素「::first-letter」にも使えます デフォルト値「none」で影なしに戻せます ● 2017年10月：2重のボックスシャドウの構文を追加しました。 ●
iScroll4でネイティブに近いスマホ向けHTMLページを作成する
こんにちは。松田です。 スマホ向けにネイティブに近い動作をするHTMLページを作成しようとした時、必ずぶつかるのがヘッダーの動作の扱いです。 特にiOS向けに処理を書く場合、iOS5では実装されているposition:fixed;がiOS4では動作しないため、iOS4でCSSのみでヘッダーを固定することが難しくなっています。 そんな時につかえるのがiScroll4です。iScrollではJavaScriptの動作によりヘッダーの固定を行う処理が行われます。 http://cubiq.org/iscroll-4 上記のサイトからDOWNLOADボタンを押すとtar.gz形式のファイルがダウンロードされます。 examplesディレクトリにたくさんサンプルが入っているので見てみると良いかもしれません。 特に使えそうなのが、lite、pull-to-refresh、carousel、あたりです。
safari4 betaで実装されたCSS Animationを使ってみました。
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves ‘Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
検索フォームをCSSでデザインするサンプル集 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
【CSS】ページの上下左右中央にボックスを配置する時、最低限のマージンを確保するサンプル | バシャログ。
こんにちは、まだ1月感覚の抜けないhakoishiです。 ただでさえ短い2月、気がついたら「そんなのあったっけ？」になってそうでどうしよう。 さて、今回はページの上下左右中央にボックスを配置する時、最低限のマージンを確保する方法をご紹介します。 言葉では伝えにくいので早速サンプル。 ページの上下左右中央にボックスを配置する時、最低限のマージンを確保するサンプル ウィンドウを広げたり縮めたりしてみてください。 ページ中央に配置されたグレーのボックスが、ウィンドウが一定サイズ以下（このサンプルの場合、ヘッダー、フッターを別として縦400px、横600px）になるとそのままの配置で固定されます。 ※IE7以降対応です。 エラーページとかアクセスマップとか、中身がちょっぴりしかないんだけどちょっとだけこだわりたいなー、なんてページに使うと良いんではないでしょうか？ まずはベース。当ブログのこの記事
CSSのiframeを二つ並べて、スクロールを連動させる
僕が使う都合上、左はoverflow:hiddenにして、右のフレームにしかスクロールバーが出ないようにしている。 右のスクロールバーを動かすと両方のフレームが連動してスクロールされるようにするにはjQueryを使ってこう書く。 #migiでscrollイベントが起こったら、#hidariのscrollTopを#migiのscrollTopと同じところまでスクロールする。 ってことをしている。 上のサンプルもちゃんと連動してスクロールされるはず。 MacのSafari, Firefox, Google Chrome, Opera,あとiPhoneのmobileSafari(二本指スクロール)で動作確認した。
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
jQueryメモ：クリックしたのは何番目の要素？
クリックした要素、例えばリストなんかで、そのクリックした要素がリスト中の何番目なのかというのを取得する方法、以前は普通に使っていたような気がするのですが、ここ最近思い出せない。検索してもなかなかでてこなかったりして悩んだのですが、普通にリファレンスに書いてあるじゃーんってのに遅いですが気づいたのでメモエントリー。 何番目の要素か 何番目の要素なのかを調べるには、jQueryのindex()を使う。 ■サンプルHTML <div id="test0"> <ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> <li>リスト４</li> <li>リスト５</li> <li>リスト６</li> </ul> <p>クリックした要素は<span>？</span>番目です</p> </div> リストをクリックした際に「？」の部分が変わる。クリックした要素が何番目
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
常にインフォウィンドウを1つだけ表示する方法／Google Maps JavaScript API V3 | WordPressにGoogle Maps API V3！
◆インフォウィンドウを1つだけ表示する方法 Google Maps API ｖ3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。 XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。 別のXMLファイルに記述したデータ読み込み 700マーカー以上を表示させてみた。 しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。 アイコン（マーカー）の種類を変更するサンプル え～。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。 良くわからんので、Googleのサンプルを探してたらありました
iPhoneサイト向けCSSサンプル（CSS3）｜ConneLog｜ConneCre
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
iPhone / Android 向けウェブページでの transform:translate3d 導入 疑問編
