3年ぶりにコーディングしたら、設定から記述の仕方まで、いろいろ忘れていたのでググりながら書きました。

CINRA主催のメディアカンファレンス『MEDIA DAY』の「New Business」と「Empowerment」を聞いたレポートです。＜INDEX＞ 【SESSION5】 New Business ■cakesについて ■晋遊舎について ■クラシコムについて 【SESSION6】 Empowerment ■greenz.jpについて ■soar…

昨年末に行われた、CSSnite Shift11（Webトレンド総まとめ回）のサマリーです。

CSS3から新しく追加された「rem (root em)」という単位で、フォントサイズを指定するのが便利です。 rem使用のメリット 従来の%やemは、親要素を基準にサイズが計算されます。なので、入れ子にすると親要素の影響をうけて、サイズが分かりづらくなってしまい…

floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。 .clearfix:after { content: ""; display: block; clear: both; } コレを書いて、.clearfixをf…

ChromeやSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。 ただし、それぞれの値は異なるので、ブラウザごとに余白な…

新しいPCにAtomいれたのでPackageもいろいろ追加してみた minimap minimap-autohide ソースコードの全体とどの辺にいるのかを表示してくれるパッケージと、 minimapを自動で表示/非表示してくれる。autoclose-html 自動で閉じタグ挿入。autocomplete-plus au…

Atomデビューしました。 まださわり方もよくわかってないので、 ドットインストールの「Atom入門」見ながらポチポチしてます。Atom入門 (全13回)dotinstall.com Atomにいれると便利になるパッケージ を、教えてもらったのでメモ。linter linter-jshint linte…

文章をドラッグ（反転？ハイライト？）したときの色はcssで変更できます。 背景色と文字色を設定すれば、ガラッと雰囲気がかわりますね。 ::selection { background:#eeff44; color: #009940; } ::-moz-selection { background:#eeff44; color: #009940; } …

Facebookの言語に「日本語（関西）」が登場！ 変えてみてやって言われてるので、 「よっしゃ」をポチットすると「ええやん！」モードになります。 ええやん！すると… 「今どんな気持ち？」→「なにしてるん？」 「いいね！」→「ええやん！」 「コメントする」…

映画や本の感想をググるのにやっぱりblog検索は便利だと思うのです。 https://www.google.co.jp/blogsearch こちらはもう普通の検索になってしまっていました。 blog検索するには Google、ブログ検索を終了か？ “tbm=blg”パラメータで引き続き利用可能 => ニ…

元の意味を知ると理解が深まるシリーズ。 省略されているHTMLタグの元の意味を調べました。 テキスト系タグはいくつかはしょってます。 HTMLタグ DOCTYPE = Document Type (Definition)（文書型の定義） html = HyperText Markup Language（HTML文書）div = …

個人的に必要で買うつもりなのは、MacBook Airの11インチだけど、 iphone6をSIMフリーで買って、海外で使うのもいいな〜と夢が膨らんだので 財布的観点（重要）からApple商品を考えてみる。 iPhone6 SIMフリー Apple公式サイトからは、SIMフリーのiPhone6を…

個人的に売上うんぬん以前の話で、ECサイトで一番大事なのは「うさんくさくない」ことじゃないかなーと思っている。それは 「このサイトは今も管理されているのか？」 「このサイトにお金をはらって大丈夫か？クレジットカードの情報を入力しても安全か？」 …

売上=「客数」×「単価」×「購入回数」という公式 お店の売り上げをアップするには！的な本を何冊か読むと、だいたいこの公式が出てくる。 実店舗だけではなく、もちろんECサイトにもあてはまります。ECで施策を施す時は、根拠なしにキャンペーンを打ったりす…

ブログなどで動画を紹介するときに利用する、 youtubeの動画プレイヤーの見た目を、カスタマイズすることができます。 動画の埋め込みコードを取得 youtubeで埋め込みたい動画のページをひらいたら、 動画の下の部分、共有＞埋め込みコードから動画のコード…

小ネタ。 Photoshopのライブシェイプを使って 簡単にタブの形をつくる方法。角丸の四角を描きます。角丸のリンクをはずして、 下2つの数値を0pxにします。 できあがり。作成後、角丸や縦横の大きさも変更できます。

Photoshopのライブシェイプを使うと、 角丸や大きさ、色などを後から編集することができます。 この時に使うのが属性パネル。ただし、この編集モード、一旦選択をはずすと再度選んでも マスク表示になってしまいます。ライブシェイプの属性を編集したい時は…

PCのwebデザインっていつも横幅何pxでつくってますか？ 最近は画面にfit、レスポンスするサイトも多いけど、 あれはデザインデータどのぐらいのサイズでつくってるんだろう…気になります！ Webサイトの横幅まとめ メジャーどころのサイトの横幅まとめがあり…

今年のGoogleエイプリル企画を覚えていますか？ Googleマップ上に出現したポケモンを150匹つかまえるアレです。その節は楽しませていただきました。 Googleマップ ポケモンで、150匹全部集めたらどうなるか - 別冊webメモ 実はあの企画、どうやらまだ続きが…

W杯盛り上がってますかーー！ 私は今朝も眠気に勝てませんでした。 開催にあわせてGoogleさんも色々とW杯仕様になっているので 観察してみましょう。 青いペグマン 地味なネタからですが、おっ！となったので。 Googleマップのストリートビューを表示すると…

愛用しているFacebook Messengerがver.6.0のアップデート。 いいね！の大きさに変化が付けられるようになりました。大きさは3種類。大中小。 右下のいいね！ボタンを押す時間の長さで大きさが変わるようです。 押す時間が長いほど、大きないいね！になります…

サイトをコーディングしていく際に、 サイズだけ決まってるけど、仮画像って場合がままあります。サンプル画像を書き出してもいいけど、めんどくさいなー…そんな時に便利なのがこのサービス。 Dynamic Dummy Image Generator - DummyImage.com 好きなサイズ…

とあるMTで構築されたサイトから、バックアップをとって復元しようとした時の試行錯誤。 バックアップをとって復元するよ 公式にわかりやすくまとめられています。 バックアップと復元 : Movable Type 5 ドキュメント ポイント バックアップをとったMTと同じ…

Photoshopの紙幣偽造防止機能、発動。 レジ周りを撮った写真の中に、大きめに紙幣が写り込んだ写真がありまして、 Photoshopで色調補正しようと開いたところ こんな警告が。 その後「銀行券とその偽造防止対策について」というサイトに飛ばされました。 Phot…

ブラウザなどで見ると大丈夫なのに、iPhone実機で確認すると ボタンの角丸と色のスタイルがあたってない事案が発生。 iPhone Safariの仕様だった iPhone Safariのinputのsubmitボタン要素には 角丸とグラデーションが自動的に適用される、のだそうです。 解…

cssでグラデがかかっている要素を、cssで打ち消すには 元が CSS の linear-gradient() 関数は、色の線形グラデーションを表す <画像> を作ります。この関数の結果は CSS の <グラデーション> データ型のオブジェクトになります。 ということなので背景画像を…

WordPressでカテゴリーごとに、アイコンやイメージを表示する設定。 <div><img src="<?php bloginfo('template_directory');?>/images/A.jpg" alt="a" /></div> <div><img src="<?php bloginfo('template_directory');?>/images/B.jpg" alt="b" /></div>

きれいな形じゃないけど、 ポイントで使うとかわいいかもしれない。↓例（macかiPhoneで見てください） あっぷるごしっく。日本語で表示するとこうなる。

追記） Googleのポケモンマスター認定書と名刺をもらう方法（たぶん） - 別冊webメモ ======================== 今年のエイプリルもGoogleさんは本気でした。 Google Japan Blog: 来たれ！真のポケモンマスター （プロモーションムービーも本気） 「Googleは…