/* ========================================================== */ /* ここから下がメニューの設定 */ /* ========================================================== */ /* メニューのON/OFFを保存する為のチェックボックス 非表示 */ #menuOn{ display : none } /* 隠しメニューを表示したとき用のスペーサー */ /* なのでデフォルトでは非表示 */ #menuOn + menu + div.spacer{ display : none; } /* 隠しメニューを表示時のメニューの設定 */ /* absolute指定を行い、高さも与える */ #menuOn:checked + menu{ height : calc(100

WEBサイト作成者に超オススメ！たった500円でプロのアドバイスが買える「ココナラ」の費用対効果がすごい！ 7月にココナラというWEBサイトが正式オープンしました。 プロやセミプロの経験・知識・スキルを500円で取引できるサイトです。 誰でも「経験・知識・スキル」を出品したり、それを購入することができます。 人気のあるサービスは、自分の似顔絵を描いてくれたり、占いをしてくれたり、恋愛や仕事などへのアドバイスのようです。 (似顔絵は、友人の誕生日にあげると喜ばれるよ！) さらには、オススメのお土産を教えてくれたり、業界の裏話をしてくれるマニアックなサービスまであったりと、そのサービスは様々。 そんな中でもWEBサイトを作っている人に超オススメなのが、自分のWEBサイトを診断をしてくれるサービスです。 例えば、副業者がWEBサイトを作る場合、あまりお金をかけられないので、そのほとんどを自分で作

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する ・etc... などが一般的でしょうか。 今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！ 「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。 なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！ ■「JavaScript」の基本を徹底的に学ぶ！ まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

何となくで決めていたりしないでしょうか。 出た案のどれにするかの悩みを解決するために使われているのが、「ABテスト」という手法です。 ある会社では、「ABテスト」をすることでコンバージョン率が8.3倍なった例もあるそうです。 ※参考：【実録】36回のABテストでCV率8.3倍を実現するまでの全記録 | LPO研究所 今回は、GoogleアナリティクスでABテストを行う方法を中心に、なぜABテストが必要なのかとともに解説します。 ABテストは、スプリットランテストとも呼ばれ、新聞や雑誌などでも使われる効果測定の手法の1つです。 紙媒体などでは「スプリットランテスト」のほうが一般的で、Web媒体などでは「ABテスト」が一般的かもしれません。 具体的には、広告や表現の一部を変化させ、同じ期間で出し分けを行い、それぞれの反応率などを測定する方法です。 A案とB案、どちらがユーザーからの反応がいいの

2015年11月にGoogleが公開したGoogle General Guidelines（Google検索品質評価ガイドライン）をすべて日本語に翻訳したものを公開します。元のPDFファイル160ページをすべて翻訳しています。 SEOコンサルタント、Web担当者、Webコンサルティングをする方には必見の内容です。ぜひご覧ください。 翻訳文の中でリンクがたくさんありますが、アクセス出来ないリンク(www.raterhub.com など)があります。翻訳前のデータでもアクセスできない状態です。リンクがあるという認識を持って頂くためにあえてそのままにしております。ご了承ください。また、画像などは翻訳していません。Google検索品質評価ガイドラインの原盤をご覧頂きながら見ると理解を深めやすいと思います。翻訳はなるべく忠実に行っておるつもりですが誤訳などがありましたらご連絡頂くと幸いです。また、最

HOMEWEB制作系CSSのcontent: "";に動的に、attrを使ってHTMLのdata-から文字を取得して入れる方法 CSSの擬似要素 after、before でcontent: “”; というかたちで使うことが頻繁にあるのですが この content: “”; のなかの文字は、CSS側で 例えば content: “文字”; としたら 不変的な文字になりますよね。 これを、タグによっては変化するようにすることが出来るのが attr を使った方法 CSS で attr を使う まずは どのようなコードなのか見てみましょう <!--html--> <h1 data-subtitle="サブタイトル" >メインタイトル</h1> <!--css--> <style> h1:after { color: red; content: attr(data-subtitle)""; /*こ

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。 画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきて今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が増えるように思うので、利用する機会が多いと思う背景パターンをCSSのグラデーションを使っていくつか作ってみました。 ここでの表示は全てイメージになるので、実際の表示は以下デモページをご覧ください。

こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0

これからプログラミングを始めようと書籍やサイトで学習して挫折した方も多いと思います。そこで今回は、厳選したプログラミング学習サービス6選をご紹介させていただきます。 これからプログラミングを始めようと書籍やサイトで学習して挫折した方も多いのではないでしょうか。 挫折してしまった理由としては、学習教材に「少しづつでも継続できるものであること」と「達成感があること」が足りなかったからではないでしょうか。 そこで今回は、プログラミングを学習できるWebサービス18サイトを調査・実践し、3日坊主の私でも続いた「継続度」と「達成感」が高い厳選6サイトをご紹介させていただきます。 これからご紹介するWebサービスの評価につきましては、プログラミングを学習できるWebサービス18サイトを調査した中での相対的な評価となっておりますので、ぜひ参考にしてみてください。 本記事の対象者 業務でプログラミングの知

あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。 じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。 olとは？まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き！</li> </ol> こんな感じで数字付き！といった具合に。 ブログやサイトのUIを作

はじめに 食費を浮かせるためとはいえ、ランチを安いカップ麺で済ませていると、ちょっぴり飽きてしまいませんか？ そんな貴方は必見！身近な食材や調味料を加えるだけで、いつものカップ麺やインスタントラーメンが劇的に美味しくなる簡単アレンジ方法をご紹介します。 一瞬で激ウマになる「チョイ足し」アレンジ！人気の食材は？ ほんのひと手間加えるだけで本格的な味わいを楽しめたり、自分好みの味が作れる「チョイ足し」。 皆さんの中にも試したことのある方がいらっしゃると思います。 女性総合サイト「マイナビウーマン」では、読者の方に聞いたカップラーメンを激ウマに変身させるチョイ足しアレンジを掲載しています。 人気を集めたのはどんな食材でしょうか？それぞれのコメントとともにご紹介します。 1位　ごま油 「まったりとコクが出るから」 「ごま油は一発でおいしさアップした気になれる」 2位　チーズ 「お湯を少な目にしてと

最近、“寝違え”がひどく首の痛みが一日中続いてしまったため、何か良い治し方はないかと探していたところ、簡単、手軽にできそうなやり方が紹介されていました。 それは漫画「ゴッドハンド輝」で紹介されたいた方法。これによると、“寝違え”は首や肩に問題があるわけではなく、脇の下の神経が圧迫されたことによって引き起こされたというのがポイント。この部分の筋肉をストレッチで伸ばすことで、血行が回復し自然と痛みが取れるといいます。 紹介されていたやり方 運動1 ・寝違えで首が痛む側の腕を少しずつ後ろに引き上げる ・腕を引き上げて、自然に止まったところで20秒キープ。 ・20秒経ったら腕を下ろす。 これらを2セット 運動2 ・痛む側の手のひらで真後ろのベルトの真ん中を軽くおさえる ・そのまま肘を後ろに引いて20秒キープ。 これらを2セット 運動3 ・痛む側の手を肘角120°でバンザイする ・その角度のまま腕を

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い

最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l

Tabでカッコの外にカーソルを移動させる Shift+TabでもTabの挿入にする Ctrl+Spaceでオートコンプリートのパネルを閉じる コード補完の候補選択をTabとShift+Tabで上下に移動させる 日本語入力で変換候補をTabで移動できるようにする 以上のキーバインディングを設定しました。 （Sublime Text 3 Build 3059、Mac OS X 10.9 Mavericks） 1. Preferences ＞ Key Bindings - User の設定 ・Default (OSX).sublime-keymap - User [ // Tab でカッコの外にカーソルを移動する { "keys": ["tab"], "command": "move", "args": {"by": "characters", "forward": true }, "conte