スタッフブログ

あけましておめでとうございます。 昨年に引き続き、本年もどうぞよろしくお願いいたします。 この記事の公開日は元旦らしいですが、お正月っぽい技術ネタとは…？となってしまったので 情弱でも導入できる！HTMLを書いたりCSSを書いたりする人向け（？）のプラグインをご紹介しようと思います。 HTMLHint Highlight Matching Tag HTML CSS Support / HTML SCSS Support CSSTree validator Live Sass Compiler WordPress Snippet テキスト校正くん HTMLHint こんなかんじで文法チェックをしてくれるやつ。 エラーが起きている付近のタグを強調したり、コンソールにエラー文を出してくれます。 いちいちwebサービスにコピペしなくても書きながらチェックできて楽！ Highlight Matching Tag 対応している開始タグと閉じタグをハイライトしてくれるやつです。 めちゃめちゃ長いhtmlを書くときに目が滑らなくてよいです。 HTML CSS Support / HTML SCSS Support クラス名やらidやらを補完してくれるやつです。 べんり。 CSSTree validator cssのエラーを教えてくれるやつ。 Live Sass Compiler scssで書いたやつをコンパイルしてくれるいいこ。 拡張機能の設定→Settings:Formats→"savePath"の値を変えるとcssファイルの保存先を変えたりできる有能っぷり。 WordPress Snippet WPのテンプレートタグを補完してくれるやつ。 テキスト校正くん なんとな～く文章を校正してくれるやつ。 wordを開くほどでもない文章の校正を　するときにちょっと便利。 どれもちょっとしたものではありますが、あると無いでは書く速さが変わってきます。 気になったプラグインがあったらぜひ導入してみてくださいね！ 以上です。 り

みなさまこんにちは！今日も元気にstayHomeしてますか？ わたしはstayHomeでもそうじゃなくても外に出ないタイプなのであまり変わりません。 今日は技術ネタが思いつかないので、社畜の方もそうじゃない方にもおすすめしたいミールキットをご紹介します。 自粛が続いても続かなくてもごはんを作るのがだるい 毎日毎日ごはんを作るのって辛いですよね…。 食材のやりくりを気にしながらメニューを考えて、仕事が終わったらごはん作って食器洗って掃除してお風呂入って…。 小さいお子さんがいるおうちなら、お子さんのお世話がプラスされるんですよねきっと。 コロナの影響で休園・休校になっているご家庭だと、朝昼晩の3食を考えなきゃいけない…。 世のお父さま・お母さま方ってすごい。超人ですよね。 わたしは怠惰な人間なので、そんな生活が続いていたらブチギレてしまいます。 いえ、ブチギレてしまいました。 料理は楽しいけど作ることに追いかけられるのは嫌！ そんなあなたにおすすめしたいのがミールキットです。 ミールキットってなに？ 字面のごとく決められた食材がセットになっているやつです。 指定した時間帯におうちで受け取るだけ！切れた野菜と肉と調味料が入ってる！ ダイエットメニューに対応しているものもあってすごく魅力的です。 どのサービスを選ぶか考える ただ、どのサービスを選ぶのかめっちゃ悩みました。 どれもこれもおいしそうだけど同じメニューが続いたら飽きるし、お値段が気になる…。 わたしの場合は残業がちょこちょこ発生するのと、エブリデイ配達だと罪悪感があるので、 確実に食材を受け取れる 平日のみの配達 お弁当じゃない 作るのが楽 を必須条件にして選びました。 サービス名 送料 時間帯指定 2人分1食あたりの価格 調理時間 Oisix \200～ 可、21時まで \1,000～2,000程度 2品で20分程度 ヨシケイ 無料 不可、宅配BOX貸出あり \980～1,500程度(1品) 1品で10分程度 セブンミール \500以上注文で無料 不可、店舗受取あり \1,000程度 2品で20分程度 お弁当を除外するとこんな結果になりました。 楽でおいしいけどデブが加速するんだよな…。 らでぃっしゅぼーやのシステムは私には難しかったのでこちらも除外！ イオンや西友のネットスーパーもあったのですが、キットの種類が少なかったので入れていません。 こう見ると札幌が配送地域に入っているのってあんまりないのね…。 セブンミールを使ってみた結果と感想 色々悩んだ末、セブンミールを使ってみることにしました。 選んだ理由は3つあります。 安い 店舗受取りにすれば深夜でも指定したセブンイレブンで受け取れる 住んでるマンションに宅配BOXが置けない ヨシケイとセブンミールでちょっと迷いましたが、宅配BOX置けないんじゃそもそも受け取れませんからね…。 初めて注文してから受け取るまでは内心どうかなあと思っていましたが、 使った結果家事の負担がだいぶ減り、今では大満足です！ 肉も野菜も切れているのは当然だとしても、 味付けが秒で終わる 火を使わないで完結する副菜もある(レンジでチンするスープとか) 調理時間が短い 作り方を工夫すれば洗い物が少ない んですよ。ほんと最高かよ…。 ？？？という方が多いと思うので、実際に作っている最中の写真を撮ってみました。 さくっと20分ぐらい！2人分ミールキットを調理してみた セブンミールはこんな袋に入っていて、レジで「セブンミールください」というと出てきます。 （たまに名前を聞かれたり店長さんが慌てて出てきたりします） この日のメニューはマカロニサラダと目玉焼きのっけハンバーグ！ 中身はこんなかんじ。 肉と卵と切れた野菜と調味料のセットです。レシピもついてる。 米は自前で炊く必要があるので注意！ 1.付け合わせの野菜をレンチンする 耐熱ボウルに入れて蓋をして熱を通します。 2.ハンバーグ用の玉ねぎを炒めつつ肉をこねる準備 ばさっと素材をボウルとフライパンにあけて混ぜます。 玉ねぎがいい感じになったら肉の入ったボウルにinします。 一緒に↑の写真にあるAの袋の中身を入れます。 3.混ぜる 適当に粘り気が出るまで混ぜます。 4.焼く 2つに分けて丸めたら玉ねぎを炒めていたフライパンに入れて焼きます。 レシピに焼き時間が書かれているのでgoogoleHomeにタイマーをセットして放置。 5.マカロニサラダの準備 焼いている間にマカロニサラダを作ります。 付け合わせをチンするときに使ったボウルに材料の玉ねぎとにんじんを入れてレンチンします。 6.生野菜と調味料を投入 チンしない野菜とCの袋の中身、小袋に入っていた茹で済みのマカロニを混ぜます。 （わたしはマヨネーズ嫌いなので自分の分のマカロニだけ先に取り分けてます） これでマカロニサラダ完成！ 混ぜてる間にハンバーグをひっくり返したりとかしましたが、難なく1品完成です。 すごいぞ！ 7.目玉焼きと照り焼きソースを作る ハンバーグが焼けたらお皿に取り分けて、空いたフライパンにAを入れて照り焼きソースを作ります。 一緒に目玉焼きも作っちゃいます。 8.盛り付けて完成！ 盛り付けへたくそですができた！！ お好みで米を足したり痩せたい気分の時は豆腐を足したりします。 今回は写真撮りながらだったので時間がかかりましたが、 キングオブ不器用のわたしですら大体15～20分ぐらいで作り終わります。 というわけで ごはんづくりに振り回されているお母さまお父さま！ ごはんを作る時間も心の余裕も無い悲しき社畜たち！ 調理スキルに自信が無い人間よ！ 2人分で1食1,000円、1人分なら500円のミールキットでおいしい生活してみませんか？ 人生変わるとまでは言いませんが、家事の悩みが軽くなりますよ！ 以上です。 り

最近お気に入りのデニムのお尻に穴が開いて傷心気味の私です。 どうもこんにちは。 今日はよく使うスライダープラグインを紹介しようと思います。 jQuery不要のレスポンシブスライダー【Swiper】 Swiper つかいかた あらかじめCDNになっているjsとcssかファイルをDLしてhtmlに入れておきましょう。 「GetStarted」のリンクをクリックすると詳しい入れ方が書いてあるぞ！ 1. Swiperのサイトを開きます 2. 「Demos」をクリック！ 3. いろんなタイプのものが出てくるのでお好みのスライダーの「Source code」リンクをクリック！！ 4. githubに遷移するので、htmlをこぴぺ なんとこれだけ！！！ いいかんじのスライダーが表示されます。 ナビゲーションの見た目を変えたいときはswiper.cssの記述を上書きしちゃいましょう。 他にもスライド時の動きを変えたり、スライド方向を縦にしたりできるようです。 demosにあるもので足りない時は「API」を見るとパラメータがいっぱいあるので、カスタマイズし放題！ やったね！！ 以上です。 り

今年最後のブログ当番、りです。おひさしぶりです。 今回は平成初期～中期に流行った個人サイトとかで使われていたであろう、なつかしのHTMLたちを振り返ってみようと思います。 するーっと流れるMARQUEE <MARQUEE>こんなやつが</MARQUEE> <MARQUEE>ひたすらに流れていきます</MARQUEE> さんぷる： こんなやつが ひたすらに流れていきます ぴかぴか光るよ！BLINK <BLINK>こんなやつが</BLINK> <BLINK>めっちゃ光る</BLINK> さんぷる： こんなやつが めっちゃ光る 光るかと思ったら光りませんでした…。 どうやらNN（！）専用タグだったらしいです。 無駄に引きたくなるHR <HR> さんぷる： コンテンツの区切りでよく使われていたhr。なんだかやたら使ってたような気がします。 今ならページ区切れよと全力でつっこみたくなりますね。 そのた：カウンター [昨日:52] [今日:28] [合計:2193777] どこにファイルをしまったらいいかわからなかったのでただの文字ですが。 訪問者数をカウントしたりするやつ。 こんなのあったなあ。キリ番（777とか1234とかのなんとなくそろってる感のある数字）踏んだら掲示板に飛ばされたりしたりしなかったり。 そのた：すごくちっちゃいgifアイコン 昔は今みたいに回線が太くなかったので、軽い素材しか扱えませんでした。 こんなに細かい画像作ってる人はすごいなあ。 と、いうわけで 魔法の○らんどで作った風の何かをつくってみよう！

りったんのほむぺ

あなたはXXXXX人目のお客さまです

りったんのほむぺだよたくさん遊んでいってね

ぷろふ けいじばん にっき りんく
来てくれてありがと～また遊びに来てね
[昨日:52] [今日:28] [合計:2193777] ©りったんXXXX All Righit Rserved. うーん、この。

なんだかノスタルジックな気持ちになってしまいますね。

ほんとはCSS3でmaqueeやblinkの表示を再現しようとしたのですが、インラインで書くと動かなかったりだったのでそれはまた今度。 しまりの無いブログとなりましたが、本年はここまでとなります。 本年は格別のお引き立てを賜り、厚く御礼を申し上げます。 来年も更なる発展、飛躍に向けて、従業員一同努力を重ねる所存でございますので、 より一層のご支援・ご愛顧を賜りますよう、心よりお願い申し上げます。 り

去る6/24に、KidsVentureとして環境広場さっぽろに出展してきました！
今日はそちらのゆるレポを書いていきたいと思います。

どうでもいい情報ですが、間寛平さんも来ていたようです。

そもそもKidsVentureってなに？ KidsVentureでは電子工作、プログラミングを通じてつくる楽しさを学び挑戦意欲溢れる次世代の創出に貢献します

このキャッチフレーズにあるとおり、子どもたちにプログラミングや電子工作の楽しさを知ってもらい、興味が湧くきっかけづくりをしている団体です。

Ichigojamという小さなコンピュータを組み立て、BASICという言語でプログラミングを行っていきます。

6/24はどんなことをしたの？

今回はより多くの子どもたちにプログラミングの楽しさを知ってもらおう！というコンセプトのもとに、
BASICでのゲームプログラミングを行いました。

IchigojamにとりつけてあるLEDランプを操作する簡単なチュートリアルを行い、
子どもたちがプログラミングにちょっと慣れたあたりで早速ゲームプログラミングを開始！

今回は子どもたちの様子に合わせて「川下りゲーム」や「じゃんけんゲーム」にチャレンジしてもらいました。

画面に向かう子どもたちの表情は真剣そのものです。

ゲームの基礎が完成したら、改造タイム！

じゃんけんゲームではグー、チョキ、パーの他に、思い思いの「むてきの手」を設定してもらいました。

1講座50分のちょっと長丁場ではありましたが、みなさん集中して取り組んでいました。

最後は講師と一緒に記念撮影を行って終了！

今回の体験で、少しでもプログラミングに興味を持ってもらえたらなあ、と思っています。

プログラミングをやってみたい！Ichigojamで遊んでみたい！というみなさまに朗報！

7/7（土）に、ビットスター株式会社 本社にて、KidsVentureを開催いたします！

今回は時間たっぷりの12〜17時。Ichigojamの組み立てから行います。

2020年からのプログラミング授業必修化に向けて、この機会にぜひIchigojamでプログラミングに触れてみませんか？

詳しい時間や講座内容は公式サイトからご確認くださいませ！

みなさまのお申込み、お待ちしております！

https://kidsventure.jp り

こんばんは、R.Iです。 今日はWPのDBをまるごとエクスポート&インポートするときの手順をまとめてみようと思います！ WPに入れてあるデータを問答無用で丸ごと取って入れれるので、 ローカル→本番に反映（逆もあり）する時に漏れがなくてとっても便利です！ とりあえず目的のDBをエクスポートしてみる phpMyAdminを開いて、サイドバーからWPのDBを開きます。 この時にテーブルのサイズを確認しておきましょう！ 開いたら右側コンテンツの上にある「エクスポート」のボタンをぽちっと押します！ ぽちっとしたらエクスポートの方法を選べるので、「詳細」を選択します。 なんやらいろいろ選べるのですが、よくわからないので2つのポイントだけ抑えていきます。 ①Tables: さっき確認したテーブルの重さが2MB以下だったらここはスルーでおｋです。 これより重たいと作業中にタイムアウトしちゃったりするらしいので、 wp_postsとかの大量にデータが入ってる重たいレコードのチェックを外して、 後から別でインポートしたりするとよいらしいです。 ②生成オプション DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する にチェックを入れときます。 そうするとこんなかんじになります！ （一応見といたほうがいい項目も赤枠つけてみました。赤枠内と同じものが選択されてたらおｋです。） 上の画像と見比べて、心の準備ができたら実行ボタンをぽちっとしてください！ 秒でDB名.sqlが落ちてきます。 DBをインポートする準備 落としたDBをお好みのエディタで開いて、パスがちゃんと通るようになっているかチェックしましょう！ 忘れがちなところなので注意ですよー。 記載箇所がいっぱいありますが、URLを検索して置換するのが楽ちんです。 既存のサイトURLが http://なんとやらかんとやら.com/ だったら、 なんとやらかんとやら.com で探してあげましょう！（末尾の/があったりなかったりで漏れちゃうので） 置換が終わったら保存！ 今度はDBをインポートしてみる インポート先のDBを開いて、今度は「インポート」ボタンをぽちっとします。 ぽちっとしたら↓の画面が出てくるので、お好みのDBを選択してあげます。 2MBまでしかインポートできないので気を付けましょう！ （これに気付かずドはまりしたことがあります） 選択したら何も考えずに「実行」をクリック！ はい、おめでとう！できたよ！ 念のためインポートしたDBを使ってるサイトをひらいて、 漏れがないかさらさらっとチェックしましょう！ 以上です！ きっとつっこみどころが満載だと思うので、 これ違うよ！！というのを見つけたらこっそり教えてくださいｗ では。 R.I

こんにちは、R.Iです。 夏も終わりに近づいてきましたねー。 寒暖差などでみなさま風邪をひいていたりしませんか？ 風邪をひくとだるいしお酒飲めないしぼんやりするしお酒飲めないしとっても困りますよね。 今日はそんな憎い風邪をおうちに居ながら速攻で治す方法をご紹介します。 私調べの方法なのでお試しになる場合は自己責任でお願いします。

目次 ひたすら生姜を摂取する ビタミンCを大量に飲む アホほど水を飲む 溶けるほど寝る 1.ひたすら生姜を摂取する 寒気がするときよくやるやつです。 加熱前の生姜にはジンゲロールという成分が含まれており、殺菌作用・免疫力強化・発汗作用・整腸作用があるそうです。 が、風邪はウイルス性のものがほとんどなので、生姜先輩の殺菌効果もあまり期待できず…。 しかしながら加熱後の生姜に含まれるショウガオールには体を温める効果があるので、 うどんに生姜をぶちこむ ↓ とりあえず火にかけてぐつぐつする ↓ 食べる ↓ 温かい！ を繰り返し、体温をある程度上げ、免疫力が上がるようにしています。 ※高熱が出ているときはやらない方がbetterです。 2.ビタミンCを大量に飲む 風邪をひいたり病気になったりすると、体の中にある白血球が病原を排除しようとがんばってくれます。 白血球は血中のビタミンC濃度が高いと活動が活性化する(らしい)ので、 ビタミンCのサプリメントやいちごやキウイなどのくだものをできるだけ食べます。 ビタミンCは水溶性ビタミンなので、摂取目安量をかなりオーバーした量を取ってます。 ※肝臓や腎臓が悪い方は真似したらだめですよ！ 3.アホほど水を飲む これは高熱が出ているときによくやるやつです。 ある程度体温が高いのは免疫力が上がるので放置で良しなのですが、 38℃を上回るようなときはひたすら水を飲んで体温を下げます。 1日に大体4～5lほど飲むと体温が落ち着いてくるかんじがします。 それでも体温が下がらなかったらリンパ節がある脇や首を冷やします。 冷えピタは表面温度だけを下げて体の熱をあまりとってくれないという噂がありますので、 もっぱら濡れタオルやアイスノンを使っています。 4.溶けるほど寝る 睡眠はやはり大事です。 ｵﾌﾄｩﾝにinして20時間以上大人しくしていましょう。 寝すぎて眠れなくなってきたら英語の本を読んだり数独を解いたりして、自分を眠りへ誘います。

まとめ 寒気がするタイプの風邪か熱が出るタイプの風邪かでやることは変わりますが、 1+2+4または2+3+4を組み合わせればたいていの風邪は3日以内に良くなります。 それでも治らない場合は肺炎などの別の病気になっている可能性があるので速攻で病院にGOです！ 以上、R.Iでした。 R.I

こんにちは、R.Iです。 もう4月だというのに、寒い日が続いていますねー。 こんな時はおふろに入ってゆっくりじんわり温まりたい・・・。そう思いませんか？？ そんなわけで！今回は日帰りで定山渓温泉に行ってまいりました！！ 定山渓ってどこ？ ここです。 THE☆山です。バス以外の交通機関はあるのだろうか・・・？ とりあえず、たくさん温泉に入れる施設があります。 後はゆるキャラ的な子がいるようです。 この子の抱える闇が意外と深いので気になった方は調べてみてください。 とりあえず行ってみよう。 日帰り温泉パックがあるので、これで温泉の旅に出ることにしました。 ちなみにこのチケット、往復バス券と入浴券がセットになっているのでかなりお得です。 予約販売もしているようですが、札幌駅のバスターミナルのこのへんでも買えます。 定山渓ついた。 せっかく来たので白糸の滝に行ってみよう！と思い、散策開始。 ちょっと迷ったものの無事到着。 雪残りすぎｗｗｗｗｗｗ 行く途中に坂道が結構あって疲れました・・・。 戻っている途中で足湯を見つけたので足湯タイム。 大分体力を奪われていたので、もういっそこのまま足湯を堪能して帰ろうかとも考えてしまいました。 だがしかし！だがしかしだ！やっぱりのびのびできるおふろに浸かりたい！！！！！！ ちょっとがんばっておふろまで歩く。 だらだらと温泉街の方へ徒歩ります。 以外と途中にある景色がすごいです。 謎のオブジェもありました。(温泉の妖精・・・？) 定山渓ホテルさんに到着！ この時点ですでに16時を回っていたので、ささっと温泉を楽しんできました。 泉質と効能は下記のとおりです。 泉質 ナトリウム塩化物泉（中性低張性高温泉） 効能 神経痛、関節痛、五十肩、運動麻痺、関節のこわばり、打ち身、くじき、痔疾、慢性消化器病、病後回復、疲労回復、健康増進、虚弱児童、慢性婦人病、冷え性、切り傷、やけど 定山渓ホテルさんは時間帯によって大浴場と中浴場が交互に男湯と女湯になるようです。 私が行った時間帯は女湯が中浴場でしたが、噂によると大浴場には滑り台的なアトラクションがあるとか・・・！ お出かけになる際は公式サイトで時間帯をチェックしていった方が楽しめるかもしれません！ やっぱりおふろは最高！ バスの時間があったのであまりゆっくりはできませんでしたが、のびのびおふろに浸かる事ができました。 温泉は素晴らしいです。 最後に最近のお気に入りの曲を貼ります。 この曲を聴きながらおふろに入ると楽しい気分になれますよ！(多分) では。 R.I

こんにちは、R.Iです。 早いもので今年も残すところ1カ月となりましたね！ 今年の目標は痩せる！でしたが、あまり達成できたかんじがしないので、来年も引き続きこの目標に向かって頑張りたいと思います！ いつになったら痩せれるのやら・・・（笑） さて、今回は以前書いた記事サムネイルを表示させる時に便利なやつの派生版として、今回はサムネを勝手に上下左右中央配置してくれる素敵なCSSちゃんをご紹介します。 前回の記事ではいちいちtopから●px、leftから●pxなど指定しないといけないものでしたが、とりあえず真ん中らへんが見えてりゃいいよ！的なゆる案件で使ってみてください。 CSS3を使っているので、対応ブラウザは確認しておきましょう！ まずはコードを。 HTML <span id="thumb-box"><img src="images/thumb.gif" width="300" heigh="450" alt="中央配置したいサムネ" /></span> CSS #thumb-box { position: relative; display: block; width: 300px; height: 300px; overflow: hidden; } #thumb-box img { position: relative; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);/*IE9*/ } こんな画像を こんなかんじで表示してくれます。 topとかleftで左上から50%に配置したimgを、transformでぐいっと-50%まで戻してあげているので真ん中にくるイメージです。 spanに対してoverflow:hidden;をかけてあげているので、黄色の斜線部分は表示されないようになっています。 以上となります。 ではまた。 R.I

こんにちは！R.Iです。 だいぶ暖かくなって夏らしさが見えてきましたね。 夏休みシーズンが近いこの時期、旅行に行く方も多いのではないでしょうか。 せっかくの長期休み！行くなら海外！と思っている方も多いはず！ リヨンってどんなところ？ 人口：164万8216人 面積：47,87km² (4,795ha) (Wikipediaより) 都市の規模は日本で言う大阪のような街です。たしかフランス第2位ぐらいの都市だったような・・。フランス南都部に位置する町です。 観光ガイドでは食と織物の町として紹介されることが多いようですね。 街の中心にはローヌ川とソーヌ川という2つの川が流れています。 ソーヌ川を挟んで、Vieux Lyon(ヴュー・リヨン)という古い町並みが残された地区と新市街にざっくり分かれています。 Vieux Lyonはこんなかんじ。 今回はVieux Lyonのおすすめ観光スポットを3つご紹介します。 リヨンおすすめスポット3か所 ノートルダム大聖堂 画像はウィキペディアより。 ユネスコの世界遺産に登録されている場所。 自分が一番印象に残ったのは屋根(？)からの景色です。 リヨンの街が一望できます。 天使の像とかもあったり。 ちょっと存じ上げないですが聖人っぽい方の像があったり。 鐘があるところに入れたりもします。 聖堂内もなんかすごい。モザイク画とかすごい。めっちゃ細かいです。 ぱっと見普通の絵かな？と思ってよく見ると・・・。(ぶれちゃっているのはお気になさらず・・・。) こんなことになっていたり。 聖堂内のバラ窓なんかもすごくきれいですが、写真を撮り忘れてしまいました・・・。 ミニチュア・映画博物館 Vieux Lyonに遊びに行ったときに偶然発見したところです。ガイドブックとかにも載っているみたいですが、全く気付いておりませんでした・・・。 写真は地球の歩き方より。 すごい。 細かい。 人間と比較するとこんな感じです。 切り絵みたいなのもあったりします。 ミニチュア以外にも、映画に使われたセットなんかも展示されています。 自分が行ったときはちょうどスターウォーズの展示を行っていましたが、写真NGだったりそうじゃなかったりで写真は撮れませんでした・・・。 トラブール 元々は織物が雨で濡れないように作った建物内の道だとか。 Vieux Lyonのあちこちにあり、入るとちょっとしたダンジョン気分を味わえます。 トラブールの中はこんなかんじ。 ベビーカーも余裕の広々設計。(ただし段差が激しい。) 普通の民家にもトラブールがあるので、間違って入らないようにご注意を！ 入れるトラブールにはこんな看板がついてたりします。 まとめ リヨンは旧市街が素敵です。もちろん新市街も素敵ですが。 トラブールを探しながら石畳の道を歩いていると、ちょっとした冒険者気分になれます。 今年の夏は映画の巨大セットのような街で過ごしてみてはいかがでしょうか？ R.I

こんにちは、R.Iです。 最近寒くなったり暖かくなったり、不安定な天気が続いていますね。 雪に飽きつつある私としては、そろそろ春になっていただきたいところではありますが・・・。 昨日の暴風雪の影響もありますし、北海道の春はまだまだ遠いのかな、と思っています。

さて、昨日は4年に一度のうるう年の日でしたね！ だからといって特に何かあるわけではありませんが、1年が365日から366日に増えてちょっと得した気分になりました。 せっかくうるう年の日なので、何かうるう年っぽいことをしたいなーと考えていたらこんなサイトを見つけました。

PRESENT4229 -4年後にメッセージを送ろう

なんとこのサイト、4年後に宛ててメールが送れるそう。タイムカプセルを埋めるみたいで面白そうですね。 ということで、早速やってみました。

まず、自分の名前とメールアドレスを入れます。 今回は自分から自分に宛てて送るので、宛先には自分のメールアドレスを入れます。

メールのタイトルを入れて、4年後の自分に対して熱いメッセージを入力！

入力した内容を確認したら、登録！

わくわくしながら4年後を待ちましょう。

だからどうしたというような内容ではありますが、4年後にこのメールを受け取った自分はどんなことを思うのだろうなーと想像するとわくわくしますね。 こちらのサービスは2/29しか使えないようなので今年はもう利用できませんが、次のうるう年の日にやってみてはいかがでしょうか。 では。 R.I

こんにちは、R.Iです。

最近めっきり寒くなって、とうとう冬が本気を出してきましたね。 だんだんと朝布団から出る時間が遅くなってきていて、そのうち会社に遅刻するのではないかとヒヤヒヤしています。

そんな話とは全く関係ありませんが、今日はサムネイルを表示させる時に便利な小技についてお話ししたいと思います。

ニュースサイトなどによく見られる、 index・カテゴリページ・記事ページの3種類から成り立つサイトを制作する際に、 カテゴリページと記事ページでサイズ違いの同じサムネイルを使うことってよくありますよね。 Photoshopでバッチを作って1枚1枚カテゴリ用と記事用に画像を作ればいいっちゃいい話ではありますが・・・、 サイトの仕様によってはカテゴリページ表示用サムネと記事ページ表示用サムネを別々に登録できない場合もあります。 そんな時に使えそうなCSSの小技を考えてみました。

まず、サムネイルに使いたい画像を用意します。 用意ができたらカテゴリページ・記事ページどちらか大きいほうのサムネイルサイズに合わせてトリミングします。

とりあえず記事ページにはめてみます。 いい感じにはまりました。

次にカテゴリページにぺたっとはめてみます。 すごく痩せて不健康なかんじになってしまいました。かわいそう。

このままではあまりに不憫なので、ここで小技に登場してもらいます。 大まかなイメージとしては、＜img＞をてきとーなボックス(＜a＞とか＜p＞とか)に入れて、 ボックスのサイズを決め打ちにし、overflowをhiddenにする、というかんじです。 太枠がボックスです。 斜線の部分を隠すイメージでやるとわかりやすいかもです。

実際のコードはこのようになります。

HTML <div class="postbox"> <a href="post1.html"><img src="zombie.jpg" width="298" height="226" alt="ゾンビ" ></a> <h3><a href="post1.html">記事タイトル記事タイトル</a></h3> <p>記事の概要文が入ります。記事の概要文が入ります。記事の概要文が入ります。</p> </div> CSS .postbox { overflow: hidden; } .postbox a:first-child { float: left; display: block; margin-right: 36px; width: 226px; height: 226px; overflow: hidden; } .postbox h3, .postbox p { float: right; }

この子を使うとあら不思議！imgの大きさに関わらず表示したいサイズに収まってくれます。

細かいCSSは適時整えてください。 整え終わったらあとはお好みに合わせてpositionを使って表示する位置を決めましょう。

以上です。 どこかで役に立つ機会があれば幸いです。 では。

R.I