こんにちは、さいとうです。
気がつけば9月！
今年は夏の暑さが前倒しでやってきたので、お盆過ぎにはもう涼しかった印象です。
イマイチ「夏」を満喫した実感がないですね。
もうちょっと「暑い夏」を楽しみたかったなーと思います。
前回、ロードバイクを買ったーという話を書きましたが、
購入後、雨の日と用事があった日以外の週末は、だいたいロードバイクでどこかへ行きました。
・豊平川河川敷
・白石〜厚別〜北広島のサイクリングロード
・滝野すずらん丘陵公園
・えこりん村（恵庭）
・小樽
・羊蹄山一周（参加してくれたみんな、アリガトウ！）
・定山渓〜定山渓レイクライン〜小樽〜石狩
・定山渓〜中山峠〜支笏湖〜札幌（昇天コースw）
などなど、、、
ロードバイクを約５ヶ月乗ってみて、思いのほか身心に変化があったなーと感じます。
お腹の周りについていた、なんとなく恥ずかしいポヨっとしたお肉が最近少なくなった気がします。
乗る日によっては半日くらい漕ぎ続けているので、当たり前といえば当たり前なんですけどね。
ロードバイクで出かけると、目的地に着く前にたびたび休憩して食べ物を食べるのですが、
食べても食べてもエネルギーとして使ってしまうので、全然太りません。
「美味しいもの食べたいけど、太っちゃうのは嫌だなー」と思っている方、ロードバイクはオススメですよ。
近郊の美味しいお店を巡るグルメツアーを計画しても楽しいです。
競輪選手みたいによっぽどペダルを踏みしめてスピードを出さない限り、
次の日に響くような筋肉痛には不思議と襲われません。
走ったその日に、骨に近い筋肉（インナーマッスル？）がじんわりするくらいです。
もちろん、筋肉を使っていないわけではないので、
太もも、もも裏、ふくらはぎ、お尻周りと筋肉が張って固くなってきます。
日頃からよくマッサージやストレッチをするように心掛けています。
春に乗り始めた頃はズボンの太ももがきつくなるかもなーと思いましたが、
今のところ全然そんなことはありませんでした。
むしろ、直立するとひざの間が1cmくらい空いていて微妙なO脚だったのですが、
なんと、今は膝がびったりくっつくようになりました！
単純に体を動かしているからかもしれませんが、やる気が少しアップした気がします。
休日になんとなくダラダラしてたら夜になっちゃったみたいなことがなくなりました。
知らない道を走って景色をみたり、
長〜い坂道を太ももをプルプルさせながら登ったり、
逆に下り坂では自動車並みの速度で風を感じながら下ったり、
ただ自転車に乗っているだけなのに非日常感があって、
自然とリフレッシュできてるのかなーと感じます。
———-
ロードバイクを始めたときに目標だった札幌〜旭川帰省や、
自転車ソロキャンプは来年にお預けになりそうですが、
それでも1日の走行距離が160kmオーバーを達成したり（定山渓〜中山峠〜支笏湖コース）、
みんなと自転車を車に積んで出かけたり（羊蹄山一周コース）、
たくさんの楽しい経験ができました。
ロードバイク初年度としては、まずまず充実したシーズンだと思います。
北海道はあと２ヶ月もすると、自転車には乗れない季節になってしまいますが、
今シーズン、もう一回みんなで出かけたいと思って、いろいろ計画中です。
（羊蹄山の次は、秋の洞爺湖一周ツアーを検討中！）
忘れてました。
今回のニッチはCSSコーナーで、連続するインライン化した要素の間にできる隙間を消す方法です。
え？何言ってるかわからない？
例えば、こんな感じのリストがあったとして、
[HTML] <ul> <li>おはよう</li> <li>こんにちは</li> <li>こんばんは</li> </ul>
CSSの ”display: inline-block;” を使って、これを横並びにしたとします。
[CSS]
ul {
list-style: none;
}
ul li {
display: inline-block;
backbround-color: #ddd;
}
わかりやすいように、li要素に背景色をつけました。
すると、こんな風に表示されると思います。
ね？ <li>要素の間にほんの少し隙間ができるでしょ？
この隙間を消して、こんな風に隙間を無くしたいと思います。
方法はいくつかあります。
[CSS]
ul {
overflow: hidden;
list-style: none;
}
ul li {
float: left;
backbround-color: #ddd;
}
横に並べる方法を問わないのであれば、この方法が手っ取り早いです。
<li>がフロートしたことにより、<ul>の領域が確保できないので
<ul>に ”overflow:hidden;” を当てています。
ちょっと前でいうところの ”clearfix” ってやつですね。
[HTML] <ul> <li>おはよう</li><li>こんにちは</li><li>こんばんは</li> </ul>
こんな方法でも、隙間は消えます。
一列に並べると可読性が・・・という方は、
[HTML] <ul> <li>おはよう</li><!-- --><li>こんにちは</li><!-- --><li>こんばんは</li> </ul>
こんなふうに</li>と次の<li>をHTMLのコメントタグで隠すようにしてあげれば
改行しても隙間は消えます。
さて、様々な制約で（１）、（２）の方法が使えない時、
これから紹介する第３の方法でも対応できます。
どうもこの隙間って、<li>要素と要素の間の改行が関係しているようです。
（２）であれ？と思った方は鋭いです。
そこで、CSSで<ul>要素のフォントサイズを ”0” にしてみます。
[CSS]
ul {
list-style: none;
font-size: 0;
}
ul li {
display: inline-block;
backbround-color: #ddd;
}
どうですか？隙間は消えましたか！
でも文字も消えてしまいましたねw
<li>要素のフォントサイズを元に戻します。
[CSS]
ul {
list-style: none;
font-size: 0;
}
ul li {
display: inline-block;
backbround-color: #ddd;
font-size: 16px;
}
フォントの大きさの変更だけで、隙間をなくすことができました。
あまり使う機会があるかというと微妙ですが、機会があればお試しあれ。
さいとう
