About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Gaming, Opera GX Opera GX now lets you control every detail of your browser, with more customization options... November 20th, 2024 With the latest update, Opera GX now expands its modding features, giving you even more ways to completely transform your... Desktop Get Spotify Premium with Opera One R2’s new Music Player November 19th, 2024 Spotify becomes the default music player in Opera One R2.
スマホでアニメーションするときはcss3の「translate3d」を使おう スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。 投稿日2011年09月16日 更新日2011年09月16日 jQueryのアニメーション たとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。 javascript $('#rect').click(function(){ $(this).stop().animate({'marginLeft' : '300px'}, 300); }); css3のアニメーション 同じことをcss3の
レスポシブサイトを作成するときにCSS記述でスタイルを切り替えることができる便利なMedia Queries。 スマホを横に向けた場合だけにCSSを当てたい場合につまずきました。 解決したのでその方法と注意をメモします。 スタイルシートを一枚でレスポンシブサイトを制作する場合にはこのMedia Queriesの指定方法に気をつけましょう。 PC表示とスマホの両方で縦横記述が使える ここが注意点です。一部のサイト様ではスマホを傾けた場合の記述方法として紹介していますがPCとスマホ両方に反映されてしまうMedia Queriesを紹介されていました。 以下がPCやスマホ等の全てのデバイスで縦横判定してくれるMedia Queriesの記述です。 PC/スマホの横向き指定 @media only screen and (orientation:landscape) { /* style */ }
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
それぞれのレイヤーごとのスクロール速度をずらことで、奥行きの感じられる動作を実装することができます。 今回は、jQueryを使って、背景画像の縦スクロールと横スクロールのパララックスを実装してみます。 ・縦の時間差スクロールサンプルページ ・横の時間差スクロールサンプルページ html <body> <head> <link href=style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="scroll.js"></script> </head> <div id="scroll_bg01"> <div id="scroll_bg02"> <div id="scroll_bg03"> </
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
例として以下の様な 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ブラウザでの
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer. CSS gradients are already immensely powerful
上のヘッダーバーがある時を境にFixedしなくなった このブログでは上のヘッダーバーをスクロールしても固定されるようにデザインしているんですが、ある時デザイン編集をしたのを堺に一切Position:Fixedが効かなくなり、固定されなくなってしまったのです。 心当たりをあたっても全くわからないし、iPhone Safari以外のどのモダンブラウザ（Chrome / Firefox / IE）で表示しても固定されないし途方に暮れていました。 原因はある１行のCSSだった CSSファイルを圧縮しようと整理していた時に偶然見つけたのがまさかの原因でした。 それはこれ [css]html{ transform:scale(1); }[/css] 何故か要素を拡大するtransform:scale()をhtml全体にX方向Y方向とも1で固定してしまっていました。 打った覚えがないのでなんとも言えない
InternetExplorer10以上で、１行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。 これを押すと、入力されている内容をクリアできるのですが お客さんから、違和感があるから消してほしいと要望があったり テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと 初期設定のままでは何かと使いにくい場面の多い機能です。 このクリアボタンは、::-ms-clearの擬似要素でcss制御できます。 ※InternetExplorer10以上でご覧ください。 試してみたところ。:hoverも組み合わせられました。 <div class="sample"> <input type="text"> </div> <div class="sample"> <input type="text" class="custom">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
