webとデジタル

タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。 CSSで文字コードを指定する XXXXX:before { content:’\E89E’; font-family: “Material Icons”; } こうすればよい。 contentには文字コードを入力する。 文字コ…続きを読む

このブログ、Google Analyticsによると1セッションあたりの平均PVが スマホで1.23 PC・タブレットで1.29 とのことで、世の中のブログの平均がどうなのか知らんが、なんか低い気がする。 低いとすれば、たぶん記事のカテゴリーがバラバラすぎるのが理由だと思われる。一応自分のライフログとして運用しているので、書いてある事が仕事、ベース、ゲーム、旅行…と節操が無い。 別にPVを上げるこ…続きを読む

発作的に自分のサイト構造を見直しているのですが、ふとよく見る「前の記事へ」「次の記事へ」のリンクって必要なのか?と思いました。 そういえば最近のオシャレなブログではこんなエリアは無いような気がします。気がしてるだけかもしれませんが。 いわゆるこういうやつです。 こういうリンクが効果を発揮するのは、ブログの記事テーマが統一されていて前後の記事を見ても自分の関心事にハマる場合か、著者のことが大好きすぎ…続きを読む

1年ぶりくらいにコーディングしてみまして、なんだかんだで使いたくなる上下左右センタリング。昔はネガティブマージンとか使ってせっせとやってたのですが、最近調べてみると画期的に省エネな方法がありました。毎回検索するのも面倒なので自分用の備忘録として残します。 こんな感じにマークアップしているとします。 CSSはこうなります。 section { display: flex; justify-conte…続きを読む

最近よく見るようになりましたエフェクトの実装方法です。 海外のオシャンティーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 基本的な考え方 アニメーションはcss3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、css3とjsのあわせ技で頑張ります。 具体的なマークアップ html 何の取…続きを読む

久しぶりのサイト制作ネタです。 ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。 だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。 あと、俺がめんどくさがりというのも大き…続きを読む

レスポンシブWebデザインは設計さえちゃんとしてれば実装も運用もラクチン(あくまでマルチデバイス対応という視点で言えば)ということで、私は会社仕事でもプライベート案件でも積極的に利用してる手法です。 でも最近は、この手法がパフォーマンスの観点からそれベストなのか、的な議論もありますね。まぁそういったレスポンシブの是非については別稿に譲るとして、レスポンシブとは切っても切れないブレイクポイントについ…続きを読む

かなり前の話ですが、ハイスタのDVD特設サイト見て「おっ」と思いました。 背景に動画が流れている!カッコイイ! 全ての創造は模倣から生まれるという言葉をそのまんま鵜呑みにして、とりあえず自分のサイトで真似してみました。 実装方法 デモ Dynamite Satan plus ※2014年1月現在のバージョンです。もしかしたら今後リニューアルするかもしれないです。 ※PC限定。 プラグイン YTPl…続きを読む

案件でこういうのが必要になって、コーダーから「出来ない」と報告を受けたけども「できるんちゃう」と思って実験したらできたのでメモ。 よくあるtable-cellを使うんやけども、縦並びなのはドンピシャな例が見つからなかったんで書いておきます。 デモ » こちらから コーポレートサイトの左右ナビに使いそうなやつです。 ソース html レイアウトのためとはいえ、(文書構造上)無意…続きを読む

こういうケースって俺だけかもしれませんが、さっきまでドハマりしてたので書いておきます。 案件で「display : table-cell」を使ったレイアウトを実装しようとサンプル作りまくって検証してたんですが、IEだけ全然効かない。8、9、10全部。しかもtable-cellのとこだけ効かない。IE8以降対応しているはずだからおかーしーなー。 と思いきや、そもそも検証用の簡易サンプルの作り方が問題…続きを読む

1 / 212