れーとーびーむの作り方 - HTML・CSS・JavaScriptの基礎編

もうすっかりおなじみとなった「れーとーびーむの作り方」シリーズ! 拍手!!!

え、なってない?

何はともあれ、今回もはっじまっるよー☆

……俺がWEBサイト「れーとーびーむ」(の新サイト)を作り始めてから、だいたい1年になる。

「れーとーびーむの作り方」では、この間の俺の経験と知識と努力の跡をみなさんにお届けしたいと思っている。

今回は初歩中の初歩、WEBページの根幹であるHTMLとゆかいな仲間たちについて説明するよ。

これらがなければWEBページじゃない、というよりWEBページとはこれらによって成り立っているのだ!

HTMLとCSSとJavaScript、なんとなく「WEBの三要素」とでも呼びたくなってくるなあ!

» 続きを読む

俺のゲーセン事情

なんと今日は\俺のxx回目のバースデー/です。

祝え。

だめ?

……さて、もう知っている人もいるかもしれないが、俺は京都府の北部在住なんだ。

そう、生まれも育ちも京都府北部。

「京都」と言うと誤解されがちだが、北部なんか京都市から車でも電車でも2時間かかる、もはや別の都道府県といっても過言ではない。

もちろん、ドが付く田舎で、海と山以外は何もない。

そんなところでも、俺たちは生きている。

生きているけど、やっぱりあれもこれもない住環境はなかなか悲しいよ。

ということで、今回は京都府北部のゲーセン事情について紹介しよう。

» 続きを読む

【マリオメーカー】自作コース紹介①『あぁ友情 弾幕STG 〜Easy〜』

先日、スーパーマリオメーカーについて拍手コメントで「賛否両論あるが私は気に入っています」と言われちゃったよ。

いや、俺もマリオメーカーは存分に楽しんでるよ。

あの記事は、懐古厨による戯言だと思ってもらえれば。

あと、人間って批判を書くときはかなり筆が進むんだよね。

さて今回は、以前ちょっと紹介したマリオメーカーの自作コースをじっくり紹介!

» 続きを読む

れーとーびーむの作り方 - モバイル対応編

このサイトではモバイルへの対応を重視していると、ずっと言っている。

今やWebブラウジングの主役は完全に、スマホやタブレットといったモバイル端末なんだから当然だ。

スマホ向けコンテンツを制作している俺でなくても、すでにWebサイトのモバイル対応は必須となっている。

で、PC向けに作ったサイトがそのままでもスマホから見やすいかというと、そんなことは全くない。

PCのディスプレイとスマホの画面とでは、大きさ(主に幅)も向きも違うからだ。

そこで、それぞれのデバイスに合った表示方法を提供する必要が出てくる。

Googleなどの検索エンジンも、モバイルからのアクセシビリティ(閲覧のしやすさ)を重視する方向性となっている。

これに対応するためには、閲覧者のデバイスそれぞれに合わせて表示を切り替えるということをしなければならない。

そこで今回は、メディアクエリと呼ばれるCSSの機能を使い、閲覧者のブラウザの“幅”に応じて表示を切り替えることでモバイル端末に対応するレスポンシブ・ウェブデザインという方法を紹介する。

また、その他のモバイル対応に役立つテクニックも紹介する。

» 続きを読む

れーとーびーむの作り方 - 色・フォント編

WEBサイトを作る上で、最も重要なのは何?

HTMLなどの知識? 内容(本文)? デザイン?

どれもすごく重要だけど、もひとつ重要なものがある。

アクセシビリティ――アクセス・閲覧のしやすさだ。

これはデザインの一種でもあるけど……(いわゆる工業デザイン、機能美ってやつ)

見た目のデザインセンスが絶望的に不足してる俺だからこそ、アクセシビリティを重視したデザインにはできるだけこだわりたかった。

ということで、今回はこのサイト「れーとーびーむ」(ブログ「れいぶろぐ」を含む)の色とフォントに凝らした工夫を紹介しよう。

ググったり人に聞いたりしたものが多いけど……

» 続きを読む