CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
calc()が効かない？: 中の演算子の間にはスペースが必要です - Qiita
.example{ width:300px; height:100px; top:100px; left:calc(50% - 300px / 2); /*値と演算子の間にスペースが必要*/ } はい、演算子との間にはスペースが要るんです。 他ファンクションでどうなるかは不明。 ===== 【追記】2015-04-08 だいぶ前の記事ですが割と見て頂いてびっくりです。 Twitterで言及されていたのですが、 +, -には スペースが必要 で、*,/ には スペースが不要 なのだそうです。 参考： 1. https://twitter.com/terkel/status/553464271862902785 2. http://www.w3.org/TR/css3-values/#calc-syntax Note that the grammar requires spaces aroun
jQuery入門講座：クッキーの操作
索引 └ プラグイン目次 1章：小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章：ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章：カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
ブロック要素の横幅を内容に合わせる ／ カワズの唄
「記事の中で見出しに枠線をつけたい」 と妻から申し出が。 そりゃ簡単な話だとCSSを書いてあげました。 しかしご存知の通り、ブロック要素の高さ(height)は内容に合わせて変化するのですが、幅(width)はいちいち指定しないといけません。 めんどくさい・・・ どないかならないものか・・・？ なりますよ。 それが↓このコードです。 <span style=" border:solid 5px #8DC20E; padding:10px; border-radius:10px; display:inline-block; margin-bottom:20px ">内容量にあわせる</span> 『display:inline-block;』がポイントです。ブロックではなくインラインブロックにすれば、要素の幅を内容に合わせることが出来るのですね。 内容量 内容量にあわせる 内容量によって幅が
【jQuery】外部ファイルの読み込みと操作 - MAXIMUM.PROの日記
今回は、外部ファイルの読み込みと操作、GETメソッドを使ったファイルの扱い方を中心に紹介していきます。APIを使ったWebアプリケーションをつくる際に必要になってくるJSON形式について覚えましょう！！ 以下のファイルを用意してください。 sample.html <h2>load</h2> <p>外部ファイルのテキストデータをそのままタグに置き換える</p> <!-- javascript:void(0)：リンク表示、アクションは起こさない --> <div><a id="load" href="javascript:void(0)">読み込み</a></div> <div id="txtLoad">データ</div> <br /> <p>外部ファイルのHTMLデータをそのままタグに置き換える</p> <a id="load2" href="javascript:void(0)">読み込み
load( url, data, callback ) - jQuery 日本語リファレンス
HTMLを読み込み、DOMに挿入します。 デフォルトはGET通信ですが、追加のパラメータを設定すればPOSTでも可。 jQuery1.2ではURLの中でjQueryセレクタを使用可能で、これによって結果の中からセレクタにマッチする要素のみ取り出して挿入することが可能です。書式は、例えば"url #id > セレクタ"のようになります。詳しくは下記のサンプルを参照のこと。
クッキーの使用方法 | JavaScript プログラミング解説
有効範囲の設定 有効範囲の既定値は、クッキーが設定されたドキュメントのパスです。そして読み込み時はこのパスが前方一致で比較されるため、有効範囲を明示しない場合、ドキュメントより上位のディレクトリではそのクッキーを読み込めなくなります。 名前=値; path=パス たとえばパスを「/dir/」と設定するならば、 document.cookie = 'data=123; path=/dir/' とします。 寿命 (有効期限) の設定 有効期限を明示しない場合、そのクッキーはブラウザを終了すると削除されます。この期限を制御するには、max-age属性を設定します。 名前=値; max-age=秒数 max-age属性が有効ではない場合は、expires属性を使用します。たとえば有効期限を1日とするには、 var expire = new Date(); expire.setTime( expir
自宅で肉屋のコロッケを作る方法 :: デイリーポータルZ
肉屋のコロッケはうまいと言われますが、なぜうまいかご存知でしょうか？ 「目の前で揚げていて揚げたてを食べさせてくれるから」という理由を挙げる方がいます。確かに揚げたてのコロッケはうまいです。食材を扱う場所で提供されているという状況的な物も確かにあると思います。 しかし、肉屋のコロッケがうまいのにはもっと明確な理由があります。今日はそのやりかたを教えます。 1972年生まれ。元機械設計屋の工業製造業系ライター。普段は工業、製造業関係、テクノロジー全般の記事を多く書いています。元プロボクサーでウルトラマラソンを走ります。日本酒利き酒師の資格があり、ライター以外に日本酒と発酵食品をメインにした飲み屋も経営しているので、体力実践系、各種料理、日本酒関係の記事も多く書いています。（動画インタビュー） 前の記事：これこそカレーライスパンだ！ ＞ 個人サイト 酒と醸し料理 BY 工業製造業系ライター 馬
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
第一回Apache Cordova勉強会( https://atnd.org/events/57562 )での発表資料
HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はなぜアツいのか？PhoneGapとの違いは何か？ - ふろしき Blog
ハイブリッドアプリとは何か？なぜ今、Cordovaがアツいのか？ iPhoneにAndroid、WindowsPhoneと、モバイルデバイスは混沌としており、「ネイティブアプリ」の開発には高いコストが必要とされます。一方で、ブラウザを活用した「Webアプリ」は、パフォーマンスやデバイス制御に大きな制約がつきまといます。このような、ネイティブアプリとWebアプリの互いが持つ問題点を補う手段として、「ハイブリッドアプリ」と呼ばれる開発方法が注目を集めています。 ハイブリッドアプリの実現手段には、OSSの開発ツール/フレームワークである「Cordova」が有名です。HTML5の活用することで、ひとつのソースコードからiOSやAndroidなどの複数のモバイルOSに対応させることができ、またネイティブアプリが持っているポテンシャルを活かしたアプリ開発ができます。その起源は、2011年にAdobeが
CentOSとownCloudで社内用のDropboxをつくる | 和歌山でマーケティングオートメーション・ITツール導入ならシステムキューブ
オンラインストレージ、Dropboxなどはかなりメジャーな存在となっています。 クライアントをインストールしておくと、指定フォルダーの内容をサーバーにアップロードし、同じアカウントを登録してある他のPCと同期します。 またwebブラウザを介して、ファイルのダウンロードもでき、公開用URLを設定して、他の方との共有も可能です。 このDropboxはファイル送信経路や、ファイルサーバー側での暗号化は行われており、無料から利用できるとはいえ、セキュリティー的な部分で不安なものではありません。 しかしながら、たとえば消去や、取り出し、バックアップなど、具体的なデータの取り扱いについて、完全にコントロール下におけるものではありませんので、社内ポリシーで禁じられている、あるいは一定以上のセキュリティー基準を設けて、重要なファイルを置かないようにする、などさまざま運用方針を持っている方もいらっしゃると思
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS3] IE11でグラデーション指定(gradient) | mkoba のお部屋 ： DREAMHIVE Staff Blog
ガントチャート,プロジェクト管理,スケジュール表がサクサク作れる。チャート作成がカンタンに共有！しかもフリー タスク管理にも - Brabio!
ownCloudで“Dropboxライク”な自社専用ストレージをつくろう！