LPI-JapanがHTML5プロフェッショナル認定試験とかやっていたので，これは勉強しなくても受かりそうとか思い，先々週適当に受けに行ったら普通に落ちました。頭にきたので適当にその辺のサイトとか見たら古い情報ばかり載っていて全然役に立たないサイトが多すぎたのでW3CのHTML5-RECとか読みましたけど，英語で難しかったので何かないかなと思ったら，そういえば「HTML5 Differences from HTML4」があったなと思い読んだらすごく分かりやすかったので，HTML5プロフェッショナル認定試験受ける人はこれ読んだ方がいいと思いました。その辺の参考書とか読むよりわかるし何より私はこれのおかげで合格しました。これは昨日の事です。
要するにW3Cの仕様書読めということです。あと改行せずにだらだら長い文を書くのはやめよう。
JavaScriptよく分からないのでLv.2は勉強しないと受かる気がしない。(function(){})();するだけで合格出来ないのだろうかとか思ったりする（謎）。
2015年6月8日 23時38分02秒 | カテゴリ: 日記・雑記 | タグ: HTML, HTML5, W3C, Web | コメント(0) | トラックバック(0)
そういえばこれ見てて思ったのが，ここも1カラムで白黒だなとか思った。イラッとして2時間くらいでこのテーマ作ったので確か1カラムで白黒になってるんだと思った。特に理由は無い。あと元々色々な色使ってなんやかんや出来ないからこの前のテーマも多少色付いてたけど似たようなもんだったと記憶しています。
2カラム以上はカラム落ちしたり幅変えると見にくくなったり色々と面倒なのでもう1カラムでいいような気がして最近はもうこんな感じの作りしかしなくなってしまった。レスポンシブレイアウトとかスマートフォン対応とか最近のWeb業界は大変だなとか思いながら，そういう理由で何も考えなくていい1カラムで作るあたりダメなのだと思うけれど，WebデザイナーでもなければWeb関係の仕事もしていないのでまぁいいかとか思ったりします。いや，やっぱりダメか。
WordPressも最近全然いじってないし新機能とかも全く理解できなくてもう強引に生PHPでぐちゃぐちゃやってるあたりもうダメな感じがします。アーカイブページもis_pageでページ番号で引っ張ってテーマの方で内容書いてるあたり拡張性の欠片も無い感じでダメとか。
あと最近ここ全然更新していないし色々と終わってる感じがする。というかもうこんな時間だし寝よう。
2014年3月11日 00時47分51秒 | カテゴリ: 日記・雑記 | タグ: Web | コメント(0) | トラックバック(0)
本当ならタイトルにRe:とか付けて言及するのがこのサイトで慣例になっているけれど別にそこまででもないと思ったので雑記で
本当は//www.example.com/のようにスラッシュから書くのが正しいのだと思うけど
どっちなんじゃい！
すみません，こういう表現をするサイトの運営方針ではありませんでした。
で，本題。正直好きにすればいいと思うけど，httpsだけを通してhttpをリダイレクトしないみたいな設定も出来るはずだから必ずhttpでうまくいくとは限らないとは思いました。現実にそんな変な設定するサイトがたくさんあるとは思えませんが。私はURIコピーして貼り付けるだけなのでhttpsならhttpsだしhttpならhttpだしみたいなスタンスです。//に置き換えてもいいのかなとは思いますが面倒なのでしばらくやらないと思います。
あとどうでもいい話。SSL使わなくなった場合の説明の2つめs抜けてるような気がした。あとがURIが日本語のままでなんかとりあえずUTF-8でURLエンコードにしてリンク張っておきました。
あとさらにどうでもいい話。なんでこんなにこの人のサイトばかり言及しているのかというと単にもう5年くらい追加していないRSSで見ているサイトのうち更新されている人がもうこの人くらいしかいなくなったのと更新されていても方面が全然違う方向で言及出来ない内容になってるとかTwitterで言及して終わってたとかこのサイトに書くネタがないとかそういう理由です。ごめんなさいyoruakiさん。このサイトで粘着してるみたいになっていて本当にすみません。
2013年10月23日 20時29分03秒 | カテゴリ: 日記・雑記 | タグ: Web | コメント(0) | トラックバック(0)
<p class="hoge"> <span>hogera</span> <a href="#top">TOP</a> </p>
（中略）
で、ここからが本題。背景画像の配置を右から指定する方法。
.hoge a { background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#999)); background-image: -webkit-linear-gradient(top, #FFF, #999); background-image: -moz-linear-gradient(top, #FFF, #999); background-image: linear-gradient(top, #FFF, #999); border: 1px solid #999; border-radius: 3px; color: #000; display: inline-block; font: 16px/24px "Helvetica", "Arial", sans-serif; padding: 0 17px 0 6px; text-decoration: none; position: relative; } .hoge a:after { background: transparent url("arrow.png") no-repeat 0 0; content: ""; height: 12px; position: absolute; right: 6px; top: -webkit-calc(50% - (12px / 2)); top: -moz-calc(50% - (12px / 2)); top: calc(50% - (12px / 2)); width: 9px; }
そんな面倒なことしなくてもこれでいいんじゃないか
.hoge a {
background-image: url("arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
background-image: url("arrow.png"), -webkit-linear-gradient(top, #fff, #999);
background-image: url("arrow.png"), -moz-linear-gradient(top, #fff, #999);
background-image: url("arrow.png"), linear-gradient(to bottom, #fff, #999);
background-position: -webkit-calc(100% - 6px) 50%, 0 0;
background-position: -moz-calc(100% - 6px) 50%, 0 0;
background-position: calc(100% - 6px) 50%, 0 0;
background-position: right 6px top 50%, 0 0;
background-repeat: no-repeat;
border: 1px solid #999;
border-radius: 3px;
color: #000;
display: inline-block;
font: 16px/24px "Helvetica", "Arial", sans-serif;
padding: 0 17px 0 6px;
text-decoration: none;
}
デモとかそういうものはないので各自で確認して下さい。あとこのサイトのスタイルシートが手抜きなのでコード用のスタイルとか指定していないので見にくくてすみません。
とりあえず最新版のSafari 6.0.2 (8536.26.17)とFirefox 18.0.2とOpera 12.14で確認して問題ないような気がしたので。IEは知らん。でも，IE 9はlinear-gradient以外はその通りに表示されると思う。Windowsに行って確認するのが面倒なので気が向いたら後でやる。
あとどうでもいい解説。linear-gradientはto bottomが正。問題のbackground-positionだけどcalc使うなら別にわざわざ:afterしなくても<length>のある場所ならどこでもいいとか書いてあったのでここに直接書けばいいんじゃないかなとか思ってやってみたらなんか動いたのでいいような気がする。正確なところは知らない。あとはFirefoxが4値構文に13から対応したとMDNに書いてあったのでcalcしなくても動くと思う。そして，一番下にCSS3の4値構文の形に対応したブラウザ（Opera 10.5+とIE 9+）に適用させてやればいい。
WebKit 536以前（つまりSafari 6以前，iOS 5.1やAndroid 4.2とか）はそもそもcalcに対応していなかったのでこのままでは表示ができなかった。それからIE 9に関してはlinear-gradientがあるためその行が解釈されず無視されるため背景が白く抜ける。対策については後で考える。
最近利用者の多いAndroid端末を切り捨てるわけにもいかないので，結局:afterを使わないとダメっぽい。もしくは画像に透明な領域を入れて普通にbackground-position: right center, 0 0;してしまうとか。
Android 4.2やiOS 5.1などではcalcが使えないのでそれを使わずに書くとこんな感じになると思う。
.hoge a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
background-image: -webkit-linear-gradient(top, #fff, #999);
background-image: -moz-linear-gradient(top, #fff, #999);
background-image: linear-gradient(to bottom, #fff, #999);
border: 1px solid #999;
border-radius: 3px;
color: #000;
display: inline-block;
font: 16px/24px "Helvetica", "Arial", sans-serif;
padding: 0 17px 0 6px;
position: relative;
text-decoration: none;
}
.hoge a:after {
background: transparent url("arrow.png") no-repeat 0 50%;
content: "";
height: 24px;
position: absolute;
right: 6px;
width: 9px;
}
もしくはposition: relative;するのが嫌だみたいな特殊な人にはたぶんこれでも動くと思う。確認はしたけれど1pixelも動かない保証はない。
.hoge a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
background-image: -webkit-linear-gradient(top, #fff, #999);
background-image: -moz-linear-gradient(top, #fff, #999);
background-image: linear-gradient(to bottom, #fff, #999);
border: 1px solid #999;
border-radius: 3px;
color: #000;
display: inline-block;
font: 16px/24px "Helvetica", "Arial", sans-serif;
padding: 0 6px;
text-decoration: none;
}
.hoge a:after {
background: transparent url("arrow.png") no-repeat 2px 50%;
content: "";
display: inline-block;
height: 24px;
vertical-align: top;
width: 11px;
}
とりあえずこのスタイルがなんでそういう表示になるかの解説はもう省略。あと後者のスタイルはフィーリングで書いたので何でこの表示になるのか自分でもよくわかってないから説明のしようがない。
IEで白く抜けるので背景色指定した方がいいかもしれないしもしくはlinear-gradientの使用を取りやめて画像を使う。もしくはfilterを使う。もしくはSVGを使う。もしくはそれ以外のIE対応用のスクリプトなどを使う。IE 10で確認はしていないけれどおそらく他のブラウザと同様に表示されるはず。
CSS3の機能を利用しようと思っても結構ブラウザによって対応がまちまちで特に今回はWebKitが足を引っ張っている事象だったので興味が沸いた。あとはCSS3がどのくらいたてば普通に使えるようになるかが気になります。
2013年2月6日 22時21分10秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Web | コメント(1) | トラックバック(0)
10月になり東京駅の丸の内駅舎の復原工事が完成したり郵便局株式会社と郵便事業株式会社が合併して日本郵便株式会社になったりといろいろありました。そして私が散々使っていたマイクロブログのWassrがサービス終了となりました。どうでもいいですけど日本語だとミニブログと言うけれど英語圏はマイクロブログと言うそうですね。私は英語かぶれなのでマイクロブログと言いますが。そして新たにGoogle+も開始しました。こちらはいろいろと投稿・共有できるサービスなので活用したいと思っております。
そんな訳で3ヶ月も何も更新しなかったのですがこの3ヶ月の間に『TARI TARI』を見たり『人類は衰退しました』を見たりして過ごしていました。と言うか勢いでBDまで買ってしまいました。おかげでお金がありません。寄付したい方はこのサイトについてに記載されている口座までどうぞよろしくお願いいたします。
最後にGoogle+にも投稿した写真を載せて終わりたいと思います。
2012年10月3日 02時47分38秒 | カテゴリ: 日記・雑記 | タグ: Google, JR, Web, アニメ, 写真, 郵便局, 郵政 | コメント(0) | トラックバック(0)