半円の向かいの自販機に回し蹴り

これ別に馬鹿にしてるわけじゃないんですよ。いやまぁある程度は馬鹿にしてるんですけど。

子供の頃に受けた衝撃はいつまでたっても衝撃的

最近、浦沢直樹さんの漫画にハマってまして「MONSTER」「20世紀少年」などを拝読したのですが、どちらも主題は「幼少期のトラウマ」なんですよ。

いや実際はわからんけど僕はそう感じたんですよ。

で、空想の世界なんでやっぱり大袈裟な展開ではあるんですけど、現実でも有り得ない話じゃないと思うんです。

それぐらい子供の頃に受けた衝撃ってえげつないと思うんですけど、その衝撃に際して頭を抱えて導き出したなんかしらが、年月を経ていい感じに育ったり歪んだりすると、良くも悪くも魅力的な人間に仕上がっていくと思うんです。

言いたいことがだいぶ逸れてきたけど、それはそれでそう思ってるんです。

昔々、ある所に国語の先生がいました

僕、小学生のころ、例外なく小学校に通ってたんですけど、その小学校には例外なく国語を主食とする先生がいたんです。

で、その先生が言った言葉が今だに強く残ってまして、或る生徒がなんかの発表で「・・・主人公がパニックになってなんたらかんたら・・・」みたいなことを言ったんです。

そしたらその先生が、たしかイトウ先生が「パニックになって、じゃなくて混乱して、やろ。」って言ったんですね。

そ れがまぁ何故か分からないんですけど、ホントえげつないほど衝撃的で、僕自身普段からそんなに横文字を多用してたわけでもないんですけど、もの凄く腑に落 ちたというか、体ん中に空いてる円柱型の穴に、寸分の狂いもない円柱型の、色で言うと赤い艶の無い材質のなにかがシャコっと収まったんです。

シャラスコっ、て感じで。

で、 その時のその言葉のニュアンスが「日本人なら着物を着るべき」とか「男ならたくましくあるべき」とか「女なら奥ゆかしくあるべき」とかそうゆう僕の大っ嫌 いなあるべき論じゃなくて、なんかこう淡々とした反射的な本能的な遺伝子的な「追われたら逃げる、逃げられたら追う」的な、全然うまく言えないんですけ ど、そうゆうニュアンスだったもんですから、僕は非常にシャラスコしたんです。

それ以来、言葉を発する時にはいったん頭の中で横文字があったら日本語に変換して喋るようになりました。

ニュアンスニュアンス言っちゃってますけどね。
ニュアンスはニュアンスですからね。

タイ米も米

ただ、僕もイトウ先生の様になりたいとか、そうゆう純粋で可愛げのある動機で日本語に気を使う様になったんじゃなくて、

単純にシャラスコしたからこうなったんですけど、それとは別の機会にもイトウ先生にはシャラスコさせられたことがあったんです。

僕の小学校では各学級ごとに理念的なものを掲げてまして、その理念は生徒の発案の中から多数決でもって決まるんです。

で、ある時僕の考えた「タイ米も米」という差別撤廃を謳った理念が採用されたことがあったんです。

正確にいうと僕の母が考えたんですけど、でもまあ血がつながってるから僕が考えたようなもんですよね。

で、「タイ米も米」は達筆な誰かの筆文字をもってして見事黒板の上に掲られたわけなんですけど、ある日それをみたイトウ先生が「この言葉自体が差別」と言い放ったんです。

シャラスコしました。

かなり悲しいほうのシャラスコをしました。

なんで僕（の母）が一生懸命考えた理念をそんな風に言うの？と。
なんでやと。

話が逸れましたけど、要するにそんな本能的日本人のイトウ先生がこの漫画を見たら、一体どんな言葉をもって僕をシャラスコさせてくれるのか。

Dear イトウ先生

インターネットのリファラルな可能性にかけてこのコミックをアウトプットしました。
もしこのメッセージをキャッチすることがありましたら、ぜひITOティーチャーのアンサーをヒアリングしてみたいです。

アサップでお願いします。

という名前のwebサイトを戯れに作りました。

名前をつけます

なんか語呂がいいんで「お前に名前をつけてやる」ってゆう上から目線なサイト名にしてしまったんですけど、実際は名前をつけさせていただくという概念でやらせていただいております。

靴を履く、ではなく履かせていただくという概念でやらせていただいております。
野生爆弾さん、大好きです。尊敬させていただいております。

顔に見えたら写真を撮ります

このサイトは「意図してないけど顔に見えるモノを写真におさめ、適当な名前をつけさせていただいて公開する」だけの無益なサイトです。

上のお金の画像みたいなやつです。これはアイキャッチ用に意図して配置したものですけど。

ターゲットは僕です

顔に見えるナニカの写真を見せられたところでなんも面白くないですからね。

だからターゲットは僕だけなんですけど、僕の好きな言葉っていうか「これなんかよう分からんけどたぶん真理突いてるわ」と思った言葉に、

人間が変わる方法は3つしかない。
1番目は時間配分を変える。
2番目は住む場所を変える。
3番目はつきあう人を変える。
この3つの要素でしか人間は変わらない。
最も無意味なのは「決意を新たにする」ことだ。

という言葉があります。誰の言葉か知らないんですけど、今これ書きながら調べたところ、大前研一さんという方のお言葉らしいです。

んで、何ヶ月か前にこの言葉を見たときに「これや！」と思って、「これ実践したろ！」と思って決意を新たにしたんですけど、ぜんぜん実践できないんですよ。

決意を新たにしただけなんで。

これはあかんと思って、行動パターンを変えざるを得ない課題を自分に課すことにしました。

それが今回作ったサイトです。

ざっくり週刊

ざっくりです、ざっくり。もうこの時点で甘えが出てますけど「きっちり週刊」にして続かないのがイチバン最悪なんで。

でもなるべく週一ぐらいで顔見つけて行きたいと思ってるんですけど、そうそう見つかるもんでもないんでそのうちネタ切れになると思うんですよ。

そうすると行動パターンを変えるしかないんですよね。
今日別の道で帰ろうとか、いつも昼食ってる店に夜飲みいってみようとか。

そしたらもう僕の思うツボですわ。

みるみる変わっていきますわたぶん。目つきとか。身長とかも伸びますわ。

まだ其処にいますか？

ここまででおそらく大半の方が離脱してると思うんですけど、もしまだいらっしゃいましたら、こちらのサイトをついでにご覧いただく概念でお願いします。

ざっくり週刊「お前に名前をつけてやる」
http://www.giveaname.xyz/

floatレイアウトももう古い？

これからはflexレイアウト

レスポンシブデザインの案件を扱うようになって、floatってなんかうっとおしいなー、displayプロパティ便利やなーって思う機会が増えてきたんですけど、このたび、floatさいなら！ってなるようなdisplay値を発見しました。

その名もdisplay: flex;

発見てゆうかもうずいぶん前からあったんですけど。

IE9以下は対応してないんで敬遠してたんですけどIE9感染者もだいぶ減ってきたみたいなんで色々調べてみました。

ちなみに主要なところでいうと、Safariはベンダープレフィックスが必要みたいです。

3つの要素を横並び

よくある感じのやつで実践していきましょう。

▼まずは装飾だけした状態

<ul>
  <li>
    <dl>
      <dt>おばあちゃんの膝</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの肘</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの池袋</dt>
      <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
    </dl>
  </li>
</ul>

▼横並びさせたい要素の親要素に「display: flex;」

<ul>
  <li>
    <dl>
      <dt>おばあちゃんの膝</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの肘</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの池袋</dt>
      <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
    </dl>
  </li>
</ul>

li要素が横並びになりました。驚くことに「要素の高さが揃って」ます。floatした要素の高さを揃えるのはメンドかったですね。

▼横並びさせたい要素に「flex: 1;」で等分

<ul>
  <li>
    <dl>
      <dt>おばあちゃんの膝</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの肘</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの池袋</dt>
      <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
    </dl>
  </li>
</ul>

膝と肘と池袋が1：1：1の割合で等分されました。なんてこった。flexなだけあって親要素のwidthに合わせて可変します。

▼分割の割合を変える

<ul>
  <li>
    <dl>
      <dt>おばあちゃんの膝</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの肘</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの池袋</dt>
      <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
    </dl>
  </li>
</ul>

「おばちゃんの肘」は重要やからもっと目立たせたいなーって時は、おばあちゃんの肘（2番目のliタグ）だけ「flex: 2;」にします。すると1：2：1で分割されます。

▼配置の方法を変える

<ul>
  <li>
    <dl>
      <dt>おばあちゃんの膝</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの肘</dt>
      <dd>ダミーテキストダミーテキスト</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>おばあちゃんの池袋</dt>
      <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
    </dl>
  </li>
</ul>

flex-directionというプロパティで配置の方法をいじくれます。デフォルト値は「row」で横並び。なので特に指定しなければdisplay: flex;をしていするだけで横並びになるわけです。「column」を指定すると要素が縦並びになります。

メディアクエリで書き分ければえらいことになるのは容易に想像できるワケです。

justify-contentプロパティでえらいこっちゃ

▼まずは「display: flex;」で横並び

<ul>
  <li>膝</li>
  <li>肘</li>
  <li>池袋</li>
</ul>

▼「justify-content: flex-end;」で右揃え

<ul>
  <li>膝</li>
  <li>肘</li>
  <li>池袋</li>
</ul>

▼「justify-content: center;」で中央揃え

<ul>
  <li>膝</li>
  <li>肘</li>
  <li>池袋</li>
</ul>

▼「justify-content: space-between;」で等間隔

<ul>
  <li>膝</li>
  <li>肘</li>
  <li>池袋</li>
</ul>

他にもまだまだ

紹介しきれてないアレがいっぱいあります。要素を右から並べたり、垂直方向に中央揃えしたり・・・

続きはwebで。

ウロコ4,5枚ほど落ちました。

コトノホッタン

ライブで飲んで酔って踊ってたら、左足首があらぬ方向に曲がりました。「あっ！」って言いました。

病院に行ったところ、骨にヒビ＋捻挫のえげつないやつとのことでした。

休み明けはよくある

僕が行った病院の先生は「休み明けはライブでやらかした人がよくくるんだよーあははは」と言っていました。

ほんとかよ、と思いました。

上半身がムキムキになる

松葉づえ生活初日の翌日、上半身が筋肉痛でバキバキになりました。これたぶん松葉づえ生活が長くなればなるほど、上半身の筋肉がえらいことになると思います。

なのでその辺の松葉づえの人には、喧嘩売らないほうがいいと思います。

横断できるかな歩道

ながめの横断歩道は、たいてい渡り終わる前に赤になります。なので、青の時にスタートラインに着いたら、一回やり過ごして青時間をMAXまで貯める必要があります。

ただ貯めたところで大抵、間に合いません。

マクドナルドは分かってる

注文と会計が終わった後、いつもは「横にずれてお待ちください」って言われるのに、この前は「出来ましたら席にお持ちします」って言われました。そこで初めて、あ、ほんとやお盆持てんやん俺！と気づかされました。

あいつらは分かってる。

意外と見てくる人々

道行く人々が意外と見てきます。松葉づえなんて別に珍しくないやろって思ってたんですけど、意外と見てきます。

なので目立ちたい人は足を折りましょう。

優先席のなんかそのむずかしさ

これほんとむずかしいんですけど、やっぱ僕もなるべく座りたいんで、優先席のとこ行くんですけど、こんな松葉づえついた奴が目の前来たら譲らざるをえないじゃないですか。

いやまあ譲って欲しくて優先席行くんですけど、一見して「立ったまま電車乗れる人」って判断つかないじゃないですか。

妊婦さんとか明らかに高齢の方とかはまあアレなんですけど。

例えば、人込みとか電車とかが怖くて発作が出ちゃうけど、座ってればなんとかギリギリいけるみたいな人って傍からみても健康そのものなんで、もしそうゆう人の前に立ってしまった場合、その人は傍からみたら悪人みたいになるんですよ。

そうゆうとこがアレですね。

あと、朝の通勤はみんな基本的に譲ってくれないですね。みんなぐったりしてますからね、必死で座れた席を譲りたくない感がハンパないです。みんな寝たフリしますから。

そうゆうとこが人間臭くていいですね。

武器としてのポテンシャル

竹刀か松葉づえか選べって言われたら、松葉づえ選びますね。

なんかこうグリップ感ていうか、こう握って脇を締めた時のグッていう感じがなんかめっちゃこうグッてくるんですよね。

たぶん強いっすこれ。

ほんで相手も当然油断してるでしょうから。

この杖の先のとこでミゾオチ突いたらえぐいっすねたぶん。したら相手、屈むじゃないですか。したら松葉づえ反対に持って、持ち手の角のとこを後頭部に振り下ろしたらイケますねたぶん。

なのでその辺の松葉づえの人には、喧嘩売らないほうがいいと思います。

自転車のポテンシャル

自転車楽なんですよね、歩くより。これは怪我したところにもよると思うんですけど。めっちゃ楽。

こんな少ない運動エネルギーでこんな早く移動できるってこれもう自転車はんぱないっすわ。

なのでよく松葉づえを担いで自転車乗るんですけど、そうするとみんな漫画みたいな二度見を決めてきます。

雨の日は死ぬ。てゆうか死ね。

雨の日まじでえげつないっす。

まず傘させないですから。まあ濡れますよね。いい感じに濡れますから。なんなら風邪でもひいてください。

あとこれがまじで恐ろしいんですけど、松葉づえが滑ります。

アスファルトとかはわりとだいじょうぶなんですけど、駅の中のなんかおしゃれな感じの床とかもうツルツルっすね。

こんなんおそらく健常者が絶対気づかないバリアフリー的観点なんで、もう床は全部濡れても滑らんような材質のやつにするべきっすわ。

松葉づえってなんかカッコイイみたいな中二病患者のみなさま

今度、僕の松葉づえでその足をたたき折りに行きますんでご連絡ください。いろんな気付きがありますんで割とオススメです。

芥川賞も。

荻窪ですよ、荻窪

荻窪の何口かよく分かんないんですけど、駅を出てクッて曲がってスッて行くと、黄色い汚いなんかビニールみたいな素材の屋根が出てくるんですけどソコです。

カウンターだけのこきたないお店です。

何系かよくわかわん

ラーメンの話題になるとことあるごとに「荻窪の十八番めっちゃえぐいっすよ」みたいな話するんですけど、そうすると決まって「何系？」って聞かれるんですけど、何系かよくわからないんですよね。

しいていうなら醤油なんですけど、「醤油ラーメン」じゃないんですよねこれが。

具体的な具の話

具体的に何が入ってるかお話ししますと、まず麺が入ってますよね。驚くことに。
麺はあれですね。中太ちぢれ麺です。
「手もみらーめん」っていうぐらいなんで手でもんでると思います。

次にスープが入ってますね。
これがようわからんけどたぶん醤油ベースで、えぐいほど油が入ってます。
多分1/3ぐらいあぶらっすねあれ。

で、スープの中に生にんにくのこまいのが、えぐいほど入ってます。
これが原因だと思うんですけど、十八番を食べると10回中10回おなか壊します。

あとこれがもう最高なんですけど、豚肉と長ネギをなんかうまい感じのエキスで炒めたやつが入ってます。

あとは海苔が1枚。あと、しなちく。あとニラ。ごま。

あとすぐにスープに全落ちするレンゲが入ってます。

3回食べると1.5倍うまい

初回から間違いなくうまいんですけど、3回食べるとさらに1.5倍ほどうまくなります。

さらに真冬のめっちゃ寒い日に食うと、そこから3倍うまくなります。

なので夏に食いにいった人の「別にうまくなかったけど」みたいなアレは受け付けません。

ラーメン激戦区ちゃうやんけ

って話ですよ。
荻窪ってよくラーメン激戦区的なこと言われてますけど全然違いますからね。

他のラーメン屋がなんか刀とか槍とかでカンカンやってるところをブルドーザーでガッサアアアみたいなもんですからね。

「TVチャンピオン優勝」みたいな看板置いてあるとことかもうほんとクソですからね。食ってて、なんやこれ一体なにで優勝したんやと思いましたからね。

餃子は餃子でもうすげえなこれ

十八番の看板メニューは「特製十八番」っていうんですけど、これもう間違いなく東京一やと思うんですけど、餃子がまたノーベル賞レベル賞なんです。

もうほんとこんなうまい餃子食ったことないっすわ。

あとこんな熱い餃子食ったことないっすわ。10回中10回ヤケドしますからね。

ガリがえぐい

あと「ガリください」って言うとガリが出てきます。当たり前ですけどね。ガリが出てくるんです。小皿に乗って。

このガリがもうまじでえぐいんです。

これあの十八番食べてもらわないと伝わらないと思うんですけど、ここのラーメンって「めっちゃガリ食べたくなる味」なんです。

で、ガリ食べるじゃないですか。
ガリの花言葉は「味のリセット」じゃないですか。

リセットしたあとにラーメン食うじゃないですか。
はいめっちゃうまい。

ラーメンに限らないんですけど、やっぱ「ひとくちめ」ってうまいですよね。
てんやの上天丼の「ひとくちめ」とかもうほんとうまくて毎回腰ぬかすかと思うんですけど、要するにこのガリを用いれば、何回も「ひとくちめ」が楽しめるんです。

参考画像です。こんな男前な出てき方しないんで。

あいよー

「あいよー」っていう店員さんがいます。

いやそらいるやろって話なんですけど、これも行ってみないと伝わらないと思うんですけど、実際行くと「あいよーって言ってるな」って思うと思います。

反対口

駅の向かいにピンサロがあります。

って思ってる人けっこういると思うんすよ。なんか話づらいなーみたいな。でも興味あるけど・・・もう技術の進歩早すぎて頭パンパンやわ、みたいな。

実際SVGについて調べてみたところ、えげつないポテンシャルを持ってまして全部紹介したら、うわメンドクサってなって今まで通りSVGと交わることが無くなってしまうと思うんで、「これは・・・！」と思ったことだけ、えらく簡潔に書きます。

えらい簡潔ぶりなんでたぶん参考になりません。

SVGって？

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略。
天下のベクターやぞ。解像度？なにそれ？

SVGってなにがいいの？

ベクターやから荒れない。
テキストやからソースに直書きで完結。
フィルターにアニメにやりたい放題。

どんなとき使うの？

See the Pen LpEXBE by 伊與田佑介 (@iyodayusuke) on CodePen.

↑↑↑↑こんなことがしたい時ですね。

これhtmlとcssで完結しちゃってんですよね。素晴らしいですよねこれ。
ただ、複雑なオブジェクトをSVGにしてhtmlに直書きすると、ソースがえぐいことになるんでグループワークとかだと嫌われるかもしれません。

でもimgタグでも参照できちゃうんで。SVGマジえぐいんで。

SVGファイルどやって作んの？

アウトライン化したベクターデータをイラレで保存するときに形式をSVGにするだけ。

SVGってなんて読むの？

エス・ブイ・ジーっぽいすね、どうやら。

めっちゃ呼びづらい。ピングとかジフとかなんかないのか？

「サフェナ」で行きませんか？

いろいろ調べたところ、医療業界では大伏在静脈（サフェナスベイン）の略語がSVGらしいんですよ。

で、現場では「サフェナ」って略してるらしいんすよ。

だからもう「サフェナ」で行きませんか？

大伏在静脈ってなんて読むの？

「だいふくざいじょうみゃく」です。

大伏在静脈ってなにがいいの？

知りません。

どうすかこのセンス。これ、缶ビールなんです。

「愛なんて知らねえよ、夏」感

が出てますよね。「愛なんて知らねえよ、夏」って確かドラマですよね？いや見たことないんですけど。見たことないけど知ってるんですよね。そんで妙に口に出したくなる。

この「口に出したくなる」ってのはコピーの重要な要素だと思います。

そんで今回見つけたのがこの「前略 好みなんて聞いてないぜSORRY」ですよ。かっこよすぎやろって話ですよ。いや、好み聞いてよって話ですよね。

とりあえず飲む

飲む前からやんやゆうてもしゃあないんでね。

賞賛も批判も体験があって価値がでるんでね。

とりあえずおつまみ

うまい酒もまずい酒もうまい肴があって価値が出るんでね。

シマチョウとししとうの最強タッグでいきます。
悟空とベジータです。

今日は時間がないんでね。あらかじめ作っておいたやつがコチラですねー。

シマチョウはおろしにんにくで炒めて塩で。
ししとうは軽く炙って塩で。

これはもうアレですよね。
スーパーサイヤ人ゴッドですよね。

役者がそろったところで、さっそく「前略 好みなんて聞いてないぜSORRY」をいただいてみましょう。

・・・。

・・・。

・・・。

うわ・・・・。

なんやこれ・・・。

飲めたもんじゃねえ

全くダメでした。

ってゆうか僕、ビールが全くダメなんでした。

日本酒に変えました。

うまい。

問答無用にジャケ買いさせる破壊力

いやあの「日本酒がうまい」ってことが言いたいんじゃないんですよ。いやでも日本酒って実際めっちゃうまいですからね。カニ味噌の甲羅焼きと合わしてクッといった時のポテンシャルっつったらえげつないっすからね。

いやあの「カニ味噌と日本酒のポテンシャルのえぐさ」がいいたいんじゃなくて「おそらくターゲットにすらしてないであろうビール嫌いの人間が思わず買っちゃうコンセプトとアートワークの素晴らしさ」。これに尽きます。

おいこれ誰が作ったんや

こんだけかっこいいもんを見せつけられたんで気になって調べました。

どうやらヤッホーブルーイングさんってゆう長野に本拠を置くビール醸造所みたいですね。

「情熱」と「遊び心」ですか。素晴らしい。

ここ入りてえな

飲食業界で「ここ入りてえな」って思ったのは初めてで、さっそく採用サイトを見てみましたところ、応募資格に

◆お酒が好きな方（下戸不可）
◆喫煙をされない方
◆日本のビール業界を変えたい方

とありました。

タバコやめれねえから無理だわこれ。でも喫煙者のイカれた味覚からの意見はいらんのやろか？

あ、ちゃうわ俺ビール飲めんのやった。

あ、ってかそもそも「好みなんて聞いてない」んやった。素晴らしい。

ファンを作るってこうゆうことなんですよね。それに不可欠なのが「情熱」と「遊び心」ですよね。

ヤッホーさんには「前略 好みなんて聞いてないぜバカヤロー」ぐらいまで突っ走って欲しいです。

イラスト：Masa
http://ameblo.jp/nigaoecom/

みなさんアレですかね。やっぱ色指定は16進数派ですかね。僕もそうなんですけど。ただ「10進数もあなどれねえな」と思ったんで、何があなどれないか書こうと思います。

アルファがあなどれない

アルファってのはアルファチャンネルのことで、要するに「透明度」のことなんですけど、「色指定」と「透明度」の指定が1行で出来ちゃうところがあなどれないっすね。

てゆうかソコだけなんですけど。

透明度指定できんかったら、わざわざ10進数使わないっすね。

らっきょ置いてなかったら、わざわざあのカレー屋いかないっすね。

どうゆう時に使うとあなどれないの？

ってゆうことですよね。

例えばbodyの背景にでっかい写真配置して、その上に透明感のあるボックス置いて、その中に文字要素なんか置いて近未来感出したい時あるじゃないですか？

このボックスの色を16進数で指定して透明にする場合、

<body>
  <div class="box16">
    <p>センチメンタル・ジャーニー<br>16進数</p>
  </div>
</body>

って感じに指定しますよね。「box16」に#000000の背景色をひいて、opacityで透明度を指定。そうすると「box16」に内包する要素、ここでいうと「センチメンタル・ジャーニー」も透明になっちゃうんですよね。

うっとおしい。

そこで10進法なんですけど、

<body>
  <div class="box16">
    <p>センチメンタル・ジャーニー<br>16進数</p>
  </div>
  <div class="box10">
    <p>チャイニーズ・キッス<br>10進数</p>
  </div>
</body>

ってゆうことなんです。

10進数で色指定した「box10」のほうは「チャイニーズ・キッス」がくっきりです。すばらしい。

4番目の数字が透明度の値

div.box10 {
  background: rgba(100,50,200,0.3);
}

上記の指定方法でいうと、最後の「0.3」が透明度の値になります。opacityと同じで「1」が不透明で、「0」が透明（完全に見えない状態）です。

それでは良い10進数ライフを。

↑こんな感じの目です。

やっぱなんかちょっとちゃうんですよね

僕はWEBデザイナーをやっているんですが、ITっぽいセミナー・勉強会はそれとなく参加するようにしています。

ネットで転がってる情報と、現場の生の声ってやっぱなんかちょっとちゃうんですよね。

ただ、WEBにたずさわる人間がIT系のセミナー行くってめっちゃ普通じゃないですか。

普通の男ってつまらないじゃないですか。

つまらない男ってモテないじゃないですか。

女性にというかなんかこう世間にモテないじゃないですか。

なんで僕はモテたいんで、つまる所つまる男になるために、WEBデザインとぜんぜん関係ないセミナーに行ってきました。

参加資格は「うまい棒100本持参」

この参加資格を見て、こんなもん絶対面白いやんと思って申し込みました。要するに「参加費用1000円」と同義なんですけどね。

参加者がたしか15名ぐらいだったんで、100×15で1,500本のうまい棒が一堂に会しました。その様子がこちら↓↓↓

写真右下に見える調味料は、味を変えるために誰かが持ち込んだものです。僕もリセット用に「Myガリ」を持ち込んだんですが、これは裏目に出ました。

「スウィートチリソース」っていう調味料がうまかったですね。生春巻きにつけるアレ。

出世魚とうまい棒

今回のイベントの趣旨は「セミナーを聞きながらうまい棒を1人100本食べましょう」というものだったんで、ちゃんとテーマを持って登壇される方が数名いらっしゃいました。

セミナーの内容はそこそこ興味深いものだったんですけど、ここに書くのもまあアレなんで特に書きませんけど。

で、うまい棒100本を食べるワケですから、100本ずっと「うまい棒」が「うまい棒」でいてくれるわけないと思ってたんですよ。

稚魚と成魚で呼び方が変わる「出世魚」みたいな感じで、食べ進めるうちに僕の中の「うまい棒」の認識が変化していくことは容易に想像できたワケです。

なんとなく、

• 1本～　うまい棒
• 30本～　うまくないけど・・・まあ10円なら食べる棒
• 60本～　まずい棒
• 90本～　めっちゃまずい棒
  

みたいな感じやろうなぁどうせ、と思ってたんです。

でも実際は、

• 1本～　うまい棒
• 5本～　水分を奪うケモノ
• 10本～　痛い棒
• 20本～　甘い棒

でした。

今回の100本食いの最大の壁は「満腹」だと思ってたんですが、そうではありませんでした。実際は「痛み・飽き」との闘いでした。

10本を超えたあたりで、口の中がめちゃくちゃ痛くなってきます。舌の表面が切れてる感じになってきます。

大好きな「めんたい味」なんか食えたもんじゃありません。「ピザ味」あたりもかなり攻撃的でした。

なので20本を超えると、刺激の少ない甘い味しか食べれなくなりました。「シュガーラスク味」しか食べれなくなりました。

「じゃあ20本目以降は100本目までずっと甘い棒だったの？」というとそうではありません。

33本しか食べれませんでした

甘いのばっか食ったせいで胃が気持ち悪くて無理でした。

• 34本～　会社へのお土産

でした。

そういや、途中抜け出してタバコを吸いにいったんですけど、そん時にゲロ吐きました。うまい棒だけで構成されたゲロを吐くのは初めてでした。この経験が今回一番の収穫でした。

って思ってる人けっこういると思うんですよ。でもこれ10秒で解決できます。

z-indexって？

z-indexは「要素の重なり順を指定する」ためのCSSのプロパティのひとつです。値を整数で指定し、数字が大きい要素ほど、重なり順は上位になります。

div.box {
  z-index: 1;
}
div.text {
  z-index: 2;
} 

上記は実際にz-indexを指定したCSSの記述例ですが、この場合、「box」の上に「text」が重なります。

そんなこと分かっとるわ

ってことなんですけど、ちゃんと指定しても効かないんですよね。効かない時があるんですよね。けっこうな頻度で。

納期が迫ってる時に、こうゆうしょうもないことでつまづくとホント吐きそうになりますよね。あまりに効かんもんやから該当部分のコーディングそのものをやり直したり。

よくあるのが「シングルページ・1カラム」なんかで、もうこれほぼ「仕様」と化してる「ヘッダー固定」。グロナビを含んだヘッダー要素をサイト上部にposition: fixed;させるお決まりのアレなんですけど、実装してブラウザでスクロールしてみると、カルーセルなんかがヘッダー要素の上を通っていく。

よっしゃほんなら、ってことでz-indexを指定してやるんですけど、なんなら「1」と「1800」ぐらい戦闘力に差をつけるんですけど、カルーセルが上を・・・

はい、吐きそう。

なんで効かないの？反抗期？

z-indexは現在中学2年生の男の子なんで、頭ごなしに「100！ほら、100！」って言っても聞く耳もちません。

そこで「position」です。

「position」を「static」以外に

z-indexを指定したい要素の「position」を「static」以外に変えてやると、これはもうアホみたいにあっさり効きます。イライラして吸ったタバコ5本分の縮まった寿命どうしてくれんの？ってぐらいあっさり効きます。猫が犬になったぐらい従順さに落差があります。

要素のデフォルトの値は「static」になってますんで、例えば

div.box {
  z-index: 1;
  position: relative;
}
div.text {
  z-index: 2;
  position: absolute;
} 

みたいに指定してやると、今日はもう定時に帰れます。おめでとうございます。

早く帰って家族サービスしてください。家に居る中学2年生のz-indexに「上で寝ろ」と言ってください。彼は「うるせえ」と言って、下のソファで寝ます。