中の人

optimist(オプティミスト)を屋号にする、
マークアップエンジニア、兼Webデザイナー。
1977年生まれ、千葉県育ち、埼玉県在住。
大学卒業後は、魚屋の店員としてで魚をさばいたり販売したりしてましたが、24歳の時に、Web業界に転職。
以後、Webデザイナー・WebディレクターとしてWebサイト制作に携わり、現在、某Web制作会社にて勤務。
主に、マークアップエンジニアとしてWeb制作に携わっています。
ジェフユナイテッド市原・千葉のファン。

Webデザイナーの備忘録

Sass、Compass はじめの一歩。

,

Sass を使い始めて2年位経ちます。まだまだ、使いこなせてはいないのですが、コーディングするうえで無くてはならないくらいにはなってきました。

Googleにやさしいマークアップの技法について、要チェックなものをまとめてみた。

, ,

マークアップをする時、何を基準にしてマークアップすればよいか悩んだことはありませんか?(id名・class名など)
ディレクターや、クライアントに説明が必要になった場合「なんとなく、、、」では理由にならなく、困ってしまうこともあるのではないでしょうか。
そんな時は、「Google先生が、こうおっしゃっていたので!」と言えればだれも文句は言えないでしょう!
以下、Google先生がおっしゃっているマークアップ推奨方法があったので、要チェックなものをご紹介したいと思います。

いまさら聞けない!? マークアップエンジニアの為の Sublime Text 3

Sublime Text を使い始めて、はや1年。もうこれなしでは、コーディングは考えられない!っていうくらいまでなんとか使えるようになってきました。
この記事を書いている時点ですが、マークアップに使うアプリケーションのシェアで、なんとあの Dreamweaver を抜いて、1位だそうです。
ここでは、「Sublime text って何?」「学校では習ってない」「世間のトレンドに乗り遅れた!?」という人の為と、自分への備忘録として、Sublime Text 3 のインストールから、おすすめパッケージの導入まで紹介したいと思います。

Mac で画面キャプチャの取り方

Windows だと、キーボートにスクリーンキャプチャボタンがあってそれで画面キャプチャをとったり、キャプチャ専用のアプリケーションでとったりしていると思うのですが、Mac だとキーボードのショートカットでキャプチャが取れます。
しかも、ショートカット次第でいろんなパターンで撮れるので、便利ですよ。

Googleカスタム検索の設置

ちょっと仕事で、Googleカスタム検索を設置するか否かみたいな事になって、ちょっと調べてみたのですが、検索結表示画面にでてくる広告がクリックされると【¥】になる事がわかりまして、当サイトは WordPress で作っていまして、 WordPress に独自の検索機能があるのですが、どうせならGoogleカスタム検索にして少しでも【¥】になればいいかなと思い、Googleカスタム検索にしてみました。
思っていたより以外に簡単だったので、ここで備忘録として紹介したいと思います。

jQuery たった7行でできる、シンプルな階層型メニュー

,

Webサイトで階層型メニューはよく使われる手法のひとつといえます。でもやり方は人それぞれ。CSSだけで実装する手法もありますが、JavaScriptライブラリとして最も浸透しているであろう jQuery を使って階層型メニューを作ってみました。しかも、たった7行!見た目はCSSで調整してもらえれば、汎用性もばっちりだと思うので参考にしてみてください。

jQuery で作る簡単でシンプルなアコーディオンメニュー

,

jQuery でアコーディオンメニューを作ってみました。
某参考書を元に作ったのですが、人によって書き方は色々あるというのを教えてもらった感じです。
できるだけ簡単でシンプルな書き方にしてみたつもりなので、参考にして頂けると幸いです。

もうキャッシュを残さない

この業界に入って、はや10年。
何百回とクライアントに「キャッシュをクリアしてみてください」といい、
何千回とキャッシュをクリアしては、リロード、確認をしてきました。

Media Queries は基本こう使う事に決めた。

スマホ、タブレット。みなさん使っていますか?
普及のスピードはひと段落した感がありますが、仕事では「スマホでも、タブレットでも見れるように。しかもワンソースで。」なんて事が増えてきました。
なので、備忘録として「俺はこう使う!」というのを残しておこうと思います。
(写真は、内容と全く関係ありません。)

marginプロパティの相殺について

Webの仕事について早11年。HTMLのコーディングなら一通りできていると思っていたが、こんな基礎的な事が知らなかった。ショックだぜぃ。

IE6用透過PNG表示 DD_belatedPNG.js

,

IEの自動アップグレードが発表されて、ようやくIE6の呪縛から逃れられるとほっとした Webデザイナーも多いはずです。とはいえクライアントの仕様書から IE6 の文字がすぐ消えるかといわれるとそうではありません。すくなくとも、あと2年くらいはIE6対策をしなくていはいけないのかなと僕は考えています。

ブログの投稿をfacebookに!【RSS Graffiti】

『ブログを書いているけど、facebookもやっている。』
『ブログのアクセス数を増やしたい。』
そんな人いると思います。僕がそうです。
そんな時は、この【RSS Graffiti】を使いましょう。
その悩みをまるっと解決してくれます。

Twitterウィジェットの作り方

超今更ですが、いざ設置するとなると『どーやるんだっけかーー』って忘れてしまうので、サイト名同様に備忘録として記事にします。

【WordPress Tips】自作のCSS, javascript を読込む

テーマを自作した際の、javascript を [/wp-contents/…]の様に、ルートパスで読込んでいました。
それしか方法が無いと思い込んでいましたが、流石はwordPressさん。あるんですね、便利なものが。

share