CSSに関するネタを中心に色々書いてます。
2015年はアクセシビリティに関わる案件をやったりしていたので、特に WCAG 2.0 やらの対応が必要とは言われてない案件でも意識するようになったりしました。
そんな中で、タブ実装が必要な案件が有ったので、WAI-ARIA をマークアップに取り入れたタブを実装してみました。
せっかくやってみたので、今回は機能自体はとてもシンプルだけど、WAI-ARIA をマークアップに取り入れたアクセシブルなタブを紹介するです。
「WAI-ARIA ってなにそれ？おいしいの？」みたいな方や「単純にシンプルなタブを使いたい！」って方でも使えると思います。
先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。
なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。
さて、今回は久々にCSS関連なエントリーです。
ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね...
そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。
レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像を使った方が良いと思いますが、スマホで見ると画像のテキストが潰れちゃうとか、お客さんの要望とかデザイナーの拘りとか色んな要素が絡むので、中々そうもいきませんね。
ブログを更新してるって事はわりと仕事が落ち着いている時！
良いのか悪いのかは分かりません。
して、さすがに、前のネタはビミョー過ぎたかな！とか思いつつも今回も特に珍しいネタではないですが、メモがてら。
随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。
たまには、ゆるめなCSSの話題でも。
対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。
普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。
と言うことで、隣接セレクタ (E + F) を使った実用的？かも知れないネタでも。
結構前に、ここの名刺印刷が良かった！的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り！
名刺印刷をどこに頼むかお悩みの方はぜひ！
さて、適切なタイトルが浮かばなくて何だかよく分からない感じのタイトルですが、iPhoneやiPod TouchのMobile Safariですが、通常a要素を display: block; な感じにしてタップできる範囲を広げた場合、その部分全体がハイライト表示されるかと思います。
その辺りに関してちょこちょこと。
Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。
なので、止める方法を。
CSS3にそれっぽいプロパティが有るので、1行書くだけです。
textarea {
resize: none;
}
こんな感じですね。
これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。
これだけだと、寂しいのでエントリーっぽくするために。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。
なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。
前回のエントリー「とっても使えるoverflowプロパティ。その使い方色々。」の補足で、Dreamweaver使ってコーディングする場合、デザインビューを使ってるとその部分が選択できない問題が有ったと思います。（確認しているのはVer8）
一時的に、宣言を取れば普通に選択できます。
さて、ちょっと必要になったんで、各プロパティを初期値にするCSSを書いておきました。
使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。
他に、ブログサービスとか使ってると、良く分かんない場合が有るのでそんな時にも活用できるかもしれません。
光の4戦士
まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。
さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。
あんまoverflowプロパティを使った事が無い方は、ビックリですよ！
これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど
サンプルとかは以下よりどうぞ。
ず、随分間が空いてしまった・・・何て言う現実。
気付けば冬間近ですね。
久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。
ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。
地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。