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
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で色の指定をしています。最後の
ほんっとにはじめての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重のボックスシャドウの構文を追加しました。 ●
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
横並びのリストを中央寄せにする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
[PhpStorm/WebStorm]JavaScriptデバッガを使おう！ | バシャログ。
夕食で肉をほとんど食べない代わりにヨーグルトをよく食べているtanakaです。 WebStorm 7 がリリースされましたね。PhpStorm 7もそのうちリリースされると思います。今回はJavaScript開発支援機能の中でも特に重要なJavaScriptデバッガの使い方を紹介します。実は私も今のいままで使ったことがありませんでしたが、これは便利です。 インストール、事前準備 前提として、ブラウザはChromeを使うこととします。 ブラウザ拡張機能 まずは、Chrome拡張機能JetBrains IDE SupportをChromeにインストールしましょう。 ウェブサーバ もし、ウェブサーバが動いてない場合は、PhpStormのビルトインウェブサーバをセットアップします。(これはなくてもデバッガの利用は可能だと思いますが、別ドメインのスクリプト読み込みなどで制限があるようです。)[Php
![[PhpStorm/WebStorm]JavaScriptデバッガを使おう！ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e09ad8f655ea0962c3fc07c12b65c5a618375e0d/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_tools.png)
【jQuery】グラフの描画をやってみた - Asterisk - アスタリスク -
どうも。 今回はプログラムの覚え書きです。ふとグラフの描画ってどうするんだろう？って思ったので。 色々と探して Flotr2 と言うライブラリを使うことにしました。 ライセンスは MIT License のようなので、将来的に何か作って公開することも考えると丁度いいかなと。 ディレクトリ構造 . ├── css │ └── bootstrap.min.css ├── js │ ├── bootstrap.min.js │ ├── flotr2.min.js │ └── jquery-2.0.1.js └── index.html index.html <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewpor
Nokogiriでスクレイピング - Qiita
nokogiriとは gemで提供されているスクレイピングライブラリのこと。 公式サイト http://nokogiri.org/ install gemでインストールする。 使い方 使い方はとにかく簡単。 スクレイピングしたいページにアクセスし、HTMLを取得してきた後、nokogiriを通して各要素にアクセスする。 要素へのアクセス方法は、XPathというものとCSS記法によるものがあるらしいが、普段使い慣れているCSSが使えれば十分だと思った。 サンプル require 'nokogiri' require 'open-uri' html = Nokogiri::HTML(open('https://www.google.co.jp/')) logo = html.css('#hplogo').first # id="hplogo" logo.name # タグ名 logo.attr
innerHTML += ... な書き方について - hogehoge @teramako
DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマーク - DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマークで『後でツッコミする』と書いたとおり、ちょっとツッコミたいと思う。 ツッコミ記事のつもりが、自分がツッコミされることとなり、ダメダメな記事です。それでも良ければお読み下さいｗ // サンプル1: パフォーマンスが悪い var ul = document.querySelector('#output'); for ( var i = 0; i < data.length; i++ ) { ul.innerHTML += ‘<li>’ + data[i] + ‘</li>’; } 上記コードはダメなコードであり、理由は、 li要素をループが回るたびに追
ke-tai.org > Blog Archive > JavaScriptを使ってQRコードを作れる「jQuery.qrcode」
JavaScriptを使ってQRコードを作れる「jQuery.qrcode」 Tweet 2011/4/18 月曜日 matsui Posted in ソフト紹介, 記事紹介・リンク | No Comments » もはやモバイルとは切っても切れない関係となっているQRコードですが、JavaScriptを使ってQRコードを作れるjQueryプラグイン「jQuery.qrcode」というものがあるようです。 ダウンロードはこちらのgithubのサイトから行えます。 → github jeromeetienne / jquery-qrcode [github.com] 簡単な解説はこちらです。 → jquery.qrcode.js – Jerome Etienne [jeromeetienne.github.com] このQRコードは実際に「jQuery.qrcode」を使って表示しています。
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行だけの場合には簡単に実装できる有用な方法です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OSHIRASE
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～