iphone でWebサイトを見たときに、 PCで見たときと違うフォントサイズで表示されてしまいます。 どうやら自動フォント調整機能があるらしいですね。 回避方法 -webkit-text-size-adjust:none; これをCSSで指定してあげるとPCと(ほぼ)同じような期待する表示に... 続きを読む
3D Text Use multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce. Works in the latest builds of Safari, Chrome, and Firefox. h1 { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0... 続きを読む
In your development, in some scenarios you might not required the dotted lines on buttons to be appeared, this article helps you in removing weird dotted lines on buttons in Firefox browser using CSS, one strange thing here is that you cannot... 続きを読む
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be... 続きを読む
Demo: Formalize CSS | Download | GitHub repo Formalize CSS — Dress up your forms! Intro As designers, we are used to having quite a bit of control over how things are displayed in a browser. Sure, differing rendering engines don’t always ag... 続きを読む
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can setEqual height columns have been a need of web designers forever. If all the columns sha... 続きを読む
TweetWebを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら... 続きを読む
Last Week: Asynchronous script execution and GPU Acceleration by default http://peter.sh/async-gpu-default/ #Chromium #WebKit Home About Experiments Contact Next to having four seperate pages for the major rendering engines, this page shows a... 続きを読む
Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. IHave you ever seen an element on a page with transparent borders? I think Facebook or... 続きを読む
I came across this blog post (via @pornelski and @souders) where Markus has stumbled upon a case where an IE6-only stylesheet included with a conditional comment blocks the downloads in IE8. Whaaat? I had to dig in. To give you a summary: tur... 続きを読む
2010年09月21日 10:53 ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース モバイルサイトの開発 モバイル事情 こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマ... 続きを読む
恐らく、auの古めの機種でしか発生しないとは思うのですがたまたま遭遇してしまったため書き残しておきます。 というか、今までこんな現象知らなかったので...今まで私が制作したサイトはことごとく2g(ry ...。 xhtml、htmlどちらでも同じ現象が発生します... 続きを読む
マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーに比べてMEが絶滅危惧種的な人数なので、 デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、本格的にHTMLコーディング... 続きを読む
As discussed on the most recent episode of Think Vitamin Radio we have been working hard on the redesign of this site and have been looking at how the site reacts when rendered on the iPhone using media queries (if these are new to you then B... 続きを読む
かのうです。 サイブリッジは今夏休み!でも私は休みをずらして9月末の祝日と合せて大型連休にしうと企んでいます。今のところまだ予定はないんですけどね笑 そういえば「iモードブラウザ2.0」のお話 2009年5月以降に発売開始されたdocomo端末に「iモードブラウ... 続きを読む
iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (... 続きを読む
Webkit, the engine under the Safari and Chrome browsers, adds an interesting property to CSS called “font-smoothing”. You can probably guess what it does by its name. There are three different values you can use for it: -webkit-font-smoothi... 続きを読む
IE9 introduces support for the CSS3 Color Module, including its popular opacity property. As we have done with other standards-based features, opacity is implemented so that the same markup used in other browsers just works in IE9’s standar... 続きを読む
-webkit-border-radius: ; -moz-border-radius: ; border-radius: ; -webkit-border-top-left-radius: px; -webkit-border-top-right-radius: px; -webkit-border-bottom-right-radius: px; -webkit-border-bottom-left-radius: px; -moz-border-radius-topleft... 続きを読む
3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか? ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。 xhtmlの場合、htmlの場合、と両方確... 続きを読む
jsdo.it - share JavaScript, HTML5 and CSS - jsdo.it is a service to write JavaScript, HTML5, CSS in your browser and share it. You can copy and modify others' code. And also Ask questions about JavaScript, HTML5, CSS 続きを読む
I’m what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most repo sites are... 続きを読む
How do I start? Read the Getting Started guide. Choose fonts from the Font Directory. Optionally, use the WebFont Loader library for more control over font loading. What are the Google Font API and the Google Font Directory? The Google Font D... 続きを読む
css, form | 21:10 | フォームで、チェックボックスとラベルテキストを並べると、ブラウザによって、縦方向にちょっとだけズレます。そんなときはこういう風にCSSを指定すると、なんとか良い感じになるはず。input { margin-right: 2px; font-size: 93%; line-h... 続きを読む
Back to Web Devout home CSS hacks Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of ... 続きを読む
While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification. With all browsers except for IE being slated... 続きを読む
<p>The <code><ruby></code>, <code><rt></code> and <code><rp></code> elements allow us to add ‘ruby’ phonetic annotations in languages like Japanese and Chinese. Despite the terrors of internationalisation and patchy browser support — with ... 続きを読む
Of course, in the real web most of us are stuck having to support Internet Explorer, which doesn’t yet support any of these properties. The best place to use them is therefore an environment where you can control what browser will be used. A... 続きを読む
Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit link... 続きを読む