azusa-tomita azusa-tomita

これはラーメン Advent Calendar 2013 13日めの記事です。

紹介するのはTrigoの追い鶏節醤油＋お肉ご飯

無化調なのでさっぱりと食える醤油ラーメン。
名前にもなってる鶏節とは、鳥から作るかつお節のようなものということで結構珍しいものらしいです。
そのおかげでさっぱりした後味の中にしっかりした存在感を感じさせる。
具材もチャーシューではなく鶏ハムの徹底した鶏づくし。

これはWeb Accessibility Advent Calendar 2013 14日目の記事です。
とはいえアクセシビリティの概念的な側面には詳しくないので小手先の内容になってしまい、そうそうたる記事の中で恐縮。

JSで表示を制御するカルーセルについて、非JSの環境で使うためにはどうすればいいか今一度考えてみました。

非JS環境での問題

非JS環境での一番の問題は、そもそもカルーセルは表示できる領域に対してコンテンツが多い場合に利用されるものなので、その中身をすべて表示するには領域が足りない、という点です。（あたりまえですが）

そんなわけでできるだけ他のデザイン要素に影響しない、カルーセルの領域の中で収まる代替表現が必要になります。

<snippet>
    <content><![CDATA[]]></content>

CSS珍百景 Calendar 2014 13日目の記事です。

input要素にdisplay:table-cell;を指定しようとしてえらい目にあった話です。

こういう指定をするじゃろ

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style id="jsbin-css">
	*{
	margin:0;
	padding:0;

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style id="jsbin-css">
	*{margin:0;padding:0;font-size:12px;font-family:arial;line-height:1.2;}
	h2{margin:3em 0 10px;}
	body{padding:10px;}

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style id="jsbin-css">
	*{margin:0;padding:0;font-size:14px;color:#333;font-family: arial, sans-serif;}
	body{margin:10px;}
	ul{width:200px;margin-bottom:1em}

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style id="jsbin-css">
	*{margin:0;padding:0;}

	.wrap{background:#eff;}