別冊webメモ

自分用リファレンス&アウトプット

remでフォントサイズ指定

css

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

モダンブラウザ用のclearfix 

css

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

サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む

css

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

AtomにいれたPackage2016

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

AtomにいれたPackage

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

テキストをドラッグ(反転)したときの背景色を変える

css

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

「ええやん!」Facebookの言語が関西弁に対応。いいね!ボタンもええやん!に。

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

Googleでblog検索したい

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

あのHTMLタグは何の略か知っておくと、タグの選択に迷いがなくなる。かも。

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

iPhone6っていくらなの?

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

ECサイトで一番大事なのは「うさんくさくない」ことだと思っている。

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

ECの売り上げは、「客数」×「単価」×「購入回数」で決まる。

EC

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

埋め込みyoutubeのカスタマイズ方法

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

ライブシェイプを使うと、タブが簡単につくれる。

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

Photoshopのライブシェイプで角丸などが設定できる属性パネルがでない時は

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

webデザイン、横幅いくつでつくってる?

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

Googleのポケモンマスター認定書と名刺をもらう方法(たぶん)

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

ワールドカップ仕様のGoogleさんアレコレ

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

Facebookメッセンジャーの「いいね!」はサイズが選べる。

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

URLだけで簡単ダミー画像づくり「Dynamic Dummy Image Generator」

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

Movable Typeが復元できない

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

紙幣の写った写真は、Photoshopで開けない

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

[iPhone]safariでボタンの角丸とグラデのスタイルを指定したい

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

CSS3のグラデーションを無効化するには

css

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

WordPressでカテゴリーごとにアイコンをつける方法

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>

AppleGothicの和文フォント

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

Googleマップ ポケモンで、150匹全部集めたらどうなるか

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

font-size:13pxのときの、相対フォント%リスト

よく使うけど、確認しないと覚えてないリスト。 基準文字サイズは13pxで指定しています。 body { font-size: 13px; } cssにコメントでメモしておくと便利。 /* Font-size list (base: 13px) 62% = 8px 70% = 9px 77% = 10px 85% = 11px 162% = 21px 239% = 3…

OGP制作に便利!facebook-ogpsd.psdとOGP画像シミュレータ

KAYACメンバーがつくった これで一撃!簡単にOGP画像をつくれる2つの秘密道具! が、便利だったのでメモ。↑リンク先で、正方形だったり長方形だったり調節が面倒な OGPの制作に便利なfacebook-ogpsd.psdがダウンロードできます。 そしてOGPシミュレータ。 画…

Contact Form 7でボタンを画像で設置したときに403になったら

Contact Form 7でフォームをつくった時に ボタンを画像で表示するようにタグを置き換えたところ 保存で403エラー。おろろ。 WAF(ウェブアプリケーションファイアウォール)を無効にする サーバはロリポップをつかってました。 左のメニューからWEBツール>WA…