CSSテンプレート

WAI-ARIA をマークアップに取り入れたシンプルなタブ

2015年はアクセシビリティに関わる案件をやったりしていたので、特に WCAG 2.0 やらの対応が必要とは言われてない案件でも意識するようになったりしました。
そんな中で、タブ実装が必要な案件が有ったので、WAI-ARIA をマークアップに取り入れたタブを実装してみました。

せっかくやってみたので、今回は機能自体はとてもシンプルだけど、WAI-ARIA をマークアップに取り入れたアクセシブルなタブを紹介するです。
「WAI-ARIA ってなにそれ?おいしいの?」みたいな方や「単純にシンプルなタブを使いたい!」って方でも使えると思います。

レスポンシブ対応でPCとスマホで違う画像を使う

先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。

なんで、電卓!?とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。

さて、今回は久々にCSS関連なエントリーです。
ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね...
そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか(640px以下)で見た時に、違う画像を使いたい場合に使えそうなTipsです。

レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像を使った方が良いと思いますが、スマホで見ると画像のテキストが潰れちゃうとか、お客さんの要望とかデザイナーの拘りとか色んな要素が絡むので、中々そうもいきませんね。

指定した幅からはみ出たテキストを...にする

ブログを更新してるって事はわりと仕事が落ち着いている時!
良いのか悪いのかは分かりません。

して、さすがに、前のネタはビミョー過ぎたかな!とか思いつつも今回も特に珍しいネタではないですが、メモがてら。
随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。

IE7のために隣接セレクタを活用してみる

たまには、ゆるめなCSSの話題でも。

対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。
普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。

と言うことで、隣接セレクタ (E + F) を使った実用的?かも知れないネタでも。

【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。

まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。

ページを見ても、あんまり意味が無いっすね。えぇ。

いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。

んでは、続きにて中身の説明なんぞをしていきます。

textarea のリサイズ機能を止めてみる

Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。

なので、止める方法を。

CSS3にそれっぽいプロパティが有るので、1行書くだけです。

textarea {
    resize: none;
}

こんな感じですね。
これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。

これだけだと、寂しいのでエントリーっぽくするために。

【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。

前回の更新日が見たくない程に時が流れている今日この頃・・・。
ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。

こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。

なので、これからはちょろっとでもネタが有れば更新していきたいなーと。
何をモチベーションに更新するかはまだ見つかってないけど><

さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。

WebKit系のブラウザならそのまま確認できます。その際、ウィンドウサイズを変更して横幅を小さくするとポートレート用の表示になります。
スマートフォンから見たい場合は、

http://bit.ly/new_sp_v1

からでも見れます。
ついでにQRも用意しました。

QR:【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。

ちょうどCSS Nite LP16 も有りますし。LP聞いて、テンションが上がったところでコレを使ってもらおうと言う算段ですね。分かります。

では、中身のご説明などを続きにて。

スマートフォン向けサイトのラジオボタンを良さ気な感じに。

昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。

なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。

HTML5で組まれたブログのベースに使えそうな一式

MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。

MT underHat テーマ 002 のキャプチャ
MT underHat テーマ 002 - カンバス | MT underHat

今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。

何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。
入門用というか。
実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。
なので、触れやすい感じを目指してみました。

【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

HTML5版の新規でサイトを作るのに使えそうな一式です。
今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。

今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。

社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。
コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・

それはさておき、中身のご説明などを続きにて。

↑上に行くよ