WordPressも対応してるレスポンシブイメージをかじる感じで説明
WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 最近、レスポンシブデザインの案件が7割を超えてきている中で、ウェブサイトを訪問する側への、PCから、タブレットから、スマホから、環境差を埋める優しい工夫が増々重要になってきているなあと実感してます。 そんな工夫のうちの一つ、今回はレスポンシブイメージの基本をまとめてみました。 記述方法や対応ブラウザについて、かじる程度に軽く説明しています。サクッと把握するのにちょうどいい分量だと思いますので、「レスポンシブイメージって？」という初心者さんはぜひどうぞ。 レスポンシブイメージとは？ レスポンシブイメージは、閲覧側の画面サイズに対して最適な画像のサイズと見せ方を選べる方法です。 大
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
JavaScript初級者のためのコーディングガイド - Qiita
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ==、!= ==と!=を使用してはいけません。代わり
【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ
Browse: Home » 【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ 1週間ほど前まで、毎日作業していたWEBのコーディング案件で、ググって調べた基礎の基礎をまとめておきます。 前回のコーディングの案件の時にも、作業が終わってから「久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」、「【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」とググったことをまとめておきました。人間、どうしても同じようなところでつまずいたり、ミスをしてしまうところがあるものなので、このようにまとめておくとこはとても有益で、今回のコーディングもこれらのまとめ記事からリンクを見て確認することが何度かありました。 コーディングに関することはググれば出てくるのだから、別にまとめておかなくてもいいじゃん！と思う人もいるかもしれませ
全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選
CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ
jQuery入門 - Qiita
はじめに jQueryの勉強した内容の自分用メモ。 jQueryとは javascriptのライブラリの一つ ユーザのクリックなどに反応して表示されるフォーム、アニメーションなど、HTML/CSSだけでは実現できなかった動きを表現することが可能 jQueryの基本 書き方 読み込み方 jQueryを利用するには、jQueryライブラリを読み込む必要がある ライブラリはインターネットから読み込むのが一般的 HTMLの<head>タグの中で<script>タグによりURLを読み込むことで使用できるようになる jQueryを記述したscriptファイルは</body>タグの直前に書くことで、WEBページの表示速度をより早めることが出来る jQueryオブジェクトの構造 jQueryオブジェクトは配列のような構造をしていてセレクタに合致した要素が配列のように入っている 注）実際は配列ではない 0か
Web系の企業さんの研修資料を読んでみた！
リブセンスさんの「人は一ヶ月でエンジニアになれるのか - 詳細解説」を読んでみてこれはかなりすごいなと感動しました。 あとはほかのWeb系の企業さんの研修に関する資料を読みつつ、どうすれば効率的にWeb開発の知識を習得できるのかなといろいろ考えてみたのでそのメモです！ 🚌 リブセンスさんの教育に対する考え方 人は一ヶ月でエンジニアになれるのか - 詳細解説 学生時代に知っておきたかったWeb技術の学び方の学び方 Web開発における問題点 Web開発は領域それぞれが深い。ゴールがない 新しい技術が日々生まれたり、深い知識が要求されるため、学び続ける必要がある - (問題点) 知っておかないといけない知識が多い - git/javascript/css/ruby/CI/ミドルウェア の画像 - 要求される知識も深く、定期的なバージョアップが要求される - (問題点) メインストリームの技術の
Web担当者必見！GoogleアナリティクスでABテストを行いサービスを成長させる方法 | Googleアナリティクスを一から学べる情報サイト｜アナリティクスガイド
何となくで決めていたりしないでしょうか。 出た案のどれにするかの悩みを解決するために使われているのが、「ABテスト」という手法です。 ある会社では、「ABテスト」をすることでコンバージョン率が8.3倍なった例もあるそうです。 ※参考：【実録】36回のABテストでCV率8.3倍を実現するまでの全記録 | LPO研究所 今回は、GoogleアナリティクスでABテストを行う方法を中心に、なぜABテストが必要なのかとともに解説します。 ABテストは、スプリットランテストとも呼ばれ、新聞や雑誌などでも使われる効果測定の手法の1つです。 紙媒体などでは「スプリットランテスト」のほうが一般的で、Web媒体などでは「ABテスト」が一般的かもしれません。 具体的には、広告や表現の一部を変化させ、同じ期間で出し分けを行い、それぞれの反応率などを測定する方法です。 A案とB案、どちらがユーザーからの反応がいいの
PASONAの法則とは？売れるランディングページを書く方法マーケティング・ヒーロー ケンタ
マーケティング・ヒーロー、時々マーケティング・エンジニア。Facebookライブで売上100万円売り上げる方法をLINE@で配信中 モットー『人類は財産。友達は宝。出逢いは最高の贈り物』 ブログに集まった読者を如何にファンに変え、申し込みや問合せをしてもらうか？ブログを仕事に活用すると言うことは、つまるところこの一点に帰結する。 こんにちわ。ITビジネスパートナーのやまもと（＠heronokenta）です。 日本におけるダイレクト・レスポンス・マーケティング（以下、DRM）の第一人者神田昌典氏が提唱した事で有名なPASONAの法則をあなたは知っているだろうか？ 簡単に言えば、「売れるページの作り方」の法則だ。 マーケティングやコピーライティングを勉強すると色々な法則を知ることが出来る。AIDAの法則、AIDAMAの法則、QUESTの法則など様々な法則がある。 そんな法則の中でもPASONA
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
Markdown記法
HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案された。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
jQueryを使ったスライダーの作り方とその仕組み
Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
Google ウェブサイト オプティマイザーでA/Bテストをする方法 : まりっぺぶろぐ
A/Bテストに関する記事を（たぶん）今後書くと思われるので、その前に解説的なものを書いておきます。試しにこのブログで実施したテストを例に解説します。 A/Bテストとは 文章やレイアウトなどが違う2パターン以上のページに訪問者を振り分けて、どれが一番ゴールされるかを検証するテストのこと。 一デザイナー視点で言うと、デザインの効果が（思い込みじゃなくて）数値でわかることや、人にデザインについて説明する時に、数値を交えて話すことで理解や納得がされやすくなることなどが利点だと思います。 Google ウェブサイト オプティマイザーとは ぐーぐる様が無料で提供している、A/Bテスト・多変量テストを実施できるツール。 「多変量テスト」が何なのかについては、ここらへんを見たりググったりしていただければと思いますが、とても簡単に言うと、ページ内のパーツごとに複数のパターンを用意して、なんていうかめっちゃ多
そこが知りたい、Flexbox | 第1回 仕様を知る 1
Flexible Box Layoutでカラムレイアウト たとえば、左右にカラム分けされたレイアウトを作りたいとします。これをCSSで実現する方法は何通りも存在します。 過去にCodeGridで紹介したような*table-cellやinline-blockを利用したカラムレイアウトであったり、単純にfloatを使用したものであったり、display: grid;であったり……。 *注：これまでに紹介した記事 「display: tableの活用：フレキシブルな段組みレイアウト」 「display: tableの活用：フィットする特性と均等配置」 「display: tableの活用：流し込む方向の制御」 「inline layoutを使いこなす：カラムレイアウト」 方法は挙げればきりがないのですが、今回はCSS Flexible Box Layout Module（以下、Flexbox）に
「なんとなく」を解消。z-indexを掘り下げてみた。 | バシャログ。
こんにちは。mackyです。 春なので、足元をスニーカーに変えて駅までダッシュしてみたら、ブーツでのダッシュより2分ほど早く駅に着けるようになりました。が、その分5分ほど長く寝てしまうようになったせいか、結局ギリギリです。そして汗だくです。夏にむけて、このダイエット法でいこうかと思います。 さて今日は、なにげにあやふやに理解していると痛い目にあう、z-indexについてまとめてみました。 スタックコンテキストとスタックレベル まず、重なりを自由に操るためには、スタックコンテキストとスタックレベルを理解しておく必要があります。 z-indexの意味やpositionとの併用のしかたをどれだけ知っていても、ここを理解していなければあまり意味がありません。 しかし、私は何度か説明を読みましたが、最初はほぼ意味不明。 とりあえず説明してみます。 スタックコンテキストとは ざっくり言うと、同じスタッ
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
ブログを書く時に問うべき40の問い - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ コンテンツマーケティングはブログだけじゃないと書いておきながら、やっぱり基本はブログということで、今回はそのブログをより有益な存在にするためのアドバイス記事をカリスマブロガーのニール・パテルに学びます。 — SEO Japan コンテンツマーケティングの長所は、多数のソーシャルシェア、新たなEメールの購読者、そして、コメントをもたらしてくれる点だ。ただし、前提として、コンテンツの質が高く、また、コンテンツマーケティングを適切に実施する必要がある。 しかし、コンテンツマーケティングのタスクはあまりにも多く、失念してしまうこともある。 そこで、この取り組みを成功に導くため、チェックリストを策定した。
Illustratorでお絵かきTIPSつめあわせ
Illustratorでお絵かきをするのは楽しい！(っ´ω`c)♡ 自分はこんな感じで使っていますというネタを放流してみました。 先日参加したグループ展「Vectorial Love」でのライブペイント、Illustratorユーザーイベント「dot-Ai」などでセッションさせていただいた時のネタを含みます。 みんなも楽しくべジェるといいですよ！
【Illustrator】編集可能な重なりあう図形をつくる（ライブペイント）
今回はライブペイント機能を使って、重なりあう図形を作ります。万能な方法ではありませんが、オブジェクト同士の位置決めや、単純な図形を重ねる時に便利なのでぜひお試しください！ そもそも編集する予定がない場合は【シェイプ形成ツール】が大変便利です。詳しくは神速Illustrator [グラフィックデザイン編] CC対応（Amazonリンク）のセクション11をご参照ください（ステマ）。この本には作業時間を短縮するノウハウがたくさん詰まっています（ステマ）。仕事でIllustratorを扱っている方に特にオススメの一冊です！（ステマ！） 完成予定図 使用ソフト AdobeIllustratorCC （CS2以降ならできると思います） Step1 とりあえず作ってみよう 重ねたいオブジェクトを準備し、パスが重なるように配置します。 重ねたいオブジェクトを全て選択した状態で、［オブジェクト＞ライブペイン
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 | BLOG ROOM9（ブログルームナイン）
そろそろ本気でWordPress！Web制作初心者が劇的に成長できるオススメ国内有名ブログ18選 2014 7/10 WordPressガッツリ使い倒すぞー！ PHP、HTML、CSS超勉強するぞー！ で、まず何したらいいの！？ なんて方はかなり多いかと思います。というか僕がそうでした。そんなワケで今回は Web制作ど素人だけどWordPressのサイト構築をバリバリできるようになりたい！ ブログ書くだけじゃなくテーマをゴリッとカスタマイズできるようになりたい！ こんな方々に超オススメの国内有名ブログを18個紹介させていただきます。Web制作のスキルというとデザインだったり、集客だったり色んな要素が考えられますが、今回は 構築、及びコーディング つまりサイトを”作る”という点で特に参考になるブログのまとめです。 構築・コーディングとは言ってもWeb制作の括りではかなり基礎的なレベルから勉強
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
