New Entry

HTML5で最近使っているリセットCSS

Category
Bookmark

浅漬けCSS的なもの

/* html5 reset css */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, q, pre, table, caption, colgroup, col, tbody, thead, tfoot, tr, th, td, ul, ol, li, dl, dt, dd, form, fieldset, legend, label, span, a, img, em, ins, del, cite, abbr, sup, sub, dfn, code, var, samp, kbd, object, script, noscript, style, iframe, embed, param, map, area,
menu, hr, address, small, strong, i, b,
article, aside, figure, footer, header, hgroup, nav, section, figcaption, time, video, audio, mark, ruby, rt, rp, bdo, source, canvas, details, summary, command,
datalist, keygen, output, progress, meter {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

address, article, aside, figure, figcaption, footer, header, hgroup, hr, legend, menu, nav,  section, summary {
  display: block;
}

li {
  list-style-type: none;
}

a img {
  border: none;
}

img {
  vertical-align: bottom;
}

[hidden] {
  display: none;
}

これをそっくりこのまま使うってわけじゃなくて、必要に応じて足したり引いたりします。

その他・用意しておくと便利そうな指定もの


* {
  word-wrap: break-word;
}

body {
  line-height: 1.5;
  letter-spacing: 0.03em;
  background: #fff;
  color: #333;
}

a:link {}
a:visited {}
a:hover {}
a:active {}

label { 
  cursor: pointer;
}

mark {
  background-color: #ff9;
  color: #000;
}



/* clearfix
:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
*/

body要素に指定した色などは、適宜書き換えます。

背景色を敷いた要素に border-radius を指定すると何かはみでる件

Category
Bookmark


ロケタッチのシールページの角丸部分が変だったんですが、vantさんのブクマから解決方法が見つかりました。

Sneak ― Fixing the background 'bleed'

コードはこんな感じ。

div {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件

Category
Bookmark

フォームボタンにbackground-colorプロパティを指定すると、iPhone Safariではなぜかグラデーションがかかり、更に色が薄くなります。

デフォルトの状態


こんな感じですね。

background-colorで背景色を指定した状態

#sample {
  -webkit-border-radius: 4px;
  background-color: rgb(1,47,145);
}

<input type="submit" value="Submit" id="sample" />

こうすると、


グラデがかかり、色も薄くなってしまっています。

単色のgradientで指定する

これを解決するには、一色のみを指定したgradientを使用します。

#sample {
  -webkit-border-radius: 4px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(1,47,145)));
}

<input type="submit" value="Submit" id="sample" />


単色になりました。


ちなみに、なぜかpaddingも減ってるように見えます。

サンプルファイル

ロケタッチはリアルMMO RPGの可能性を秘めている

Category
Bookmark

ライブドアの新サービスがリリースされました。 名前をロケタッチと言います。

いわゆる位置情報を使ったサービスで、20代~30代の男子心をくすぐる要素があちこちに散りばめられています。 もっと詳しく知りたい場合はロケタッチのリリースの高揚感のなかでしか書けないことを書きます - アルカンタラの熱い夏という記事の下の方に関連リンクがあるので、そちらを見てください。

僕はいつもどおり、HTMLとCSSと見た目に関するJSちょいちょいで参加しました。 あとなんか文言センスが結構ウケてたような気がします。

さて、以下が本題です。

MMO RPGってやった事ありますか?

僕は結構ハードなMMO RPGプレイヤーで(最近は時間がなくてそうでもないけど)、そもそもWeb業界で働こうと思いたったきっかけもMMO RPGでした(この辺はいつかじっくり語り書きしたい)。

MMO RPGとはいわゆる大規模なオンラインRPGの事で、まあ詳しくはMMORPG - Wikipediaとか見てください。

MMO RPGというジャンルのゲームは、それはもうたくさんあるのですが、基本的なゲーム内容は大体似ています。

MMO RPGのゲーム内容

  1. フィールドを探検する
  2. 敵と遭遇したら戦う
  3. 倒すと経験値やお金・アイテムなどのドロップを取得する

細かく見ていくともっといろいろな要素があるんですが、基本はこの3つで、それの繰り返しで自分のキャラクターを育てたり、他のプレイヤーとコミュニケーションをして楽しみます。

では、次にロケタッチの流れです。

ロケタッチの内容

  1. 街を実際に歩く
  2. 面白そうな物や人、お気に入りの店などにタッチする
  3. 条件を満たすとシールを貰える

MMO RPGに似ていると思いませんか? シールの中にはMMO RPGで言われる所のレア(取得条件がかなり難しいアイテム)的な物も存在するようなので、いろいろ試してみて、Twitterとかで情報交換するといいんじゃないでしょうか。 みんなでそだてる、ロケタッチwiki というWikiが既に有志によって立ち上がっているので、それを参考にしてもいいかもしれません。

ところで、IRCで「ゲームは遊びじゃねえんだyp!!!」と発言した時には、『この人ガチだー!』と言われたりもしました。 その節はホントすみませんでした。

WiMAX URoad-7000を買ったらiPhoneが快適になりすぎたでござるの巻

Category
Bookmark

前々から享介さんに「良いよー」とすすめられてたんですが、ついにWiMAXを導入しました! WiMAXは使い方によって二種類あって、USBを直接ノートPCとかに挿すタイプと、WiMAXをWi-Fiにする(?)無線ルータ的(この辺よく分かってない)な機能のタイプがあります。 今回僕が買ったのは、無線ルータになる方です。

WiMAX URoad-7000買った

買ったのはURoad-7000というやつで、ビックカメラ専売?みたいです。 プロバイダーもビック縛りですが、まあWiMAXは解約に関する縛りも無いですし、現在キャンペーン中で、なんかものすごい安くなってたので、つい。

サイズは、iPhone3GSより少し小さいくらいで、 厚さは逆に少し厚い感じ。 重さはとても軽いです。

主な用途はiPhoneなのですが、一週間ほど使ったところ、もう手放せないくらいになっています。 たまに3G回線で使うと、遅すぎてしょんぼりなります。

繋がりやすさも、走っている中央線や、高層ビルでも繋がりました。 都心なら大体繋がるんじゃないでしょうか。 あ、歌舞伎町のルノアールだけはなぜか繋がりませんでした。

WiMAXのいい所は、買ったら(契約したら)スイッチを押すだけ、という簡単さにもあります。 Air Macにも挫折した僕ですが、WiMAXは挫折しようもありませんでした。