CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
SEO業界の専門用語 - 知っておかないと会話できない基本編 | Web担当者Forum
今日は、SEO業界に特有な用語をさらっと解説します。SEO業界以外では使わないものや、ほかで使われているのと意味が違うものなど、知っておかないと、その筋の人と会話しづらくなるものに限定して紹介しましょう。 検索エンジンの仕組み関連オーガニック検索（オーガニックサーチ、自然検索）ユニバーサル検索（ブレンド検索）SERP（サープ）インデックスアルゴリズムQDFリンク関連リンクグラフ被リンク（バックリンク、インリンク、インバウンドリンク）リンクジュースリンクポピュラリティ（リンク人気）アンカーテキスト（リンクテキスト）有料リンクオーガニックリンク（ナチュラルリンク）nofollow（ノーフォロー）リンクビルディング（リンク構築）オーソリティ（オーソリティ性）その他SEO関連ブラックハット、ホワイトハット、グレーハットペイレベルドメイン名ワードサラダリダイレクトウェブマスターツール、サイトエクスプ
Private Presentation
Private content!This content has been marked as private by the uploader.
Google Analyticsで、実際に役に立ったページ４選＆使い方 - ミニマリストは世界を救う！
2015-05-09 Google Analyticsで、実際に役に立ったページ４選＆使い方 ブログ運営 アクセス解析ソフトの、Google Analytics。 皆さん、使っていますか？ Google アナリティクス公式サイト - ウェブ解析とレポート機能 – Google アナリティクス私は使い始めて5か月くらい経ちました。 まだまだ使いこなせてはいませんが、アナリティクス初心者の方に 私が実際に役に立ったページをご紹介します。 １ ユーザーサマリー画面の「ブラウザ」 ブログに訪れた人が、どのブラウザで見ているのかがわかります。 下記画面を見てください。 左側のメニューの中から、「ユーザー」を開き 「サマリー」を選択し、「ブラウザ」をクリック。 すると、セッション数の多いブラウザから1位から順に見られます。 私のサイトでは 1位 safari 27％ 2位 chrome 23％ 3位
WEB界隈で働く人が重宝しそうな「WEBマーケティング」と「SEO」のチートシート6+2個まとめ。 - おしブロ from STONEWEB
WEB界隈でよく聞く言葉に「チートシート」というものがあるのですが、これは「cheat（チート） = 騙す、ズルする」という言葉から「ズルするシート」要するに「カンニングペーパー」のことを意味していて、これが転じてWEB界隈ではプログラミング言語やコマンドやショートカットなどを見やすく一覧にまとめてある表のことを指します。 ちなみにこの記事では少し趣向を変えて、WEB界隈で働く人が「これは便利かも」と重宝しそうな「マーケティング」と「SEO」に関するチートシートを集めてみました。 WEBマーケティング関連のチートシート3+2個 大きな意味での「WEBマーケティング」全般に重宝しそうなチートシートを集めてみました。 www.seojapan.com リスティング広告運用チートシート LPO改善チェックリスト チートシートではないけど「これはWEBマーケティングに重宝するかもなー」というチェッ
Private Presentation
Private content!This content has been marked as private by the uploader.
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
少し玄人ぶって、Googleアナリティクスのイベントトラッキングをサイト改善に使ってみよう！
3. 次は、トラッキング トラッキングは本来「計測する」の意味を持つ言葉です。それを、Googleアナリティクス的に言えば「計測し、その結果を記録する」という意味になります。 4. つまり、イベントトラッキングとは？ イベント＝サイト訪問者の行動 トラッキング＝計測し、データを記録すること イベント＋トラッキング＝サイト訪問者の行動を計測し、記録する となるわけです。 イベントトラッキングを利用して計測した訪問者の行動を、あとでGoogleアナリティクスのレポート画面で振り返ることができます。そこにはサイトの改善につながるヒントがたくさん！ その具体例をひとつ紹介しましょう。 5. イベントトラッキングの利用例 たとえば、お問い合わせのページへつながるリンク。「テキストリンク」か「ボタン」のどちらにするかは大きな運命の分かれ道。なぜなら訪問者の反応が大きく変わってくるからです。 では、どっ
まずはココだけおさえる！ Googleアナリティクスの見方5選 | LISKUL
Googleアナリティクスで自社のアクセス解析をしようと思い、データをとりあえず眺めて、 訪問数が伸びた、減った。 直帰率が高い、低い。 で終わっていませんか？ これだけでは、Googleアナリティクスを見ても何が原因で上がったのか下がったのかが分からず、次の施策を打つことができません。 Googleアナリティクスはただ眺めているだけでは何の価値ももたらさないのです。 でも安心してください。 Googleアナリティクスで何が見られるかを知れば、今日からあなたもバリバリ使いこなすことができます！ 今回はGoogleアナリティクスのデータから、施策を打つまでの導き方をご紹介します。自社サイトのアクセス状況を確認して、今後のサイト改善に役立ててみては如何でしょうか。 分析に自信がない、時間が割けない方は無料診断を利用するのもオススメです。 ※本記事は株式会社WACUL提供によるスポンサード・コン
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
必ず設定したい！Googleアナリティクスを導入したら最初に行うべき基本設定
Googleアナリティクスは、Googleが無料で提供しているウェブサイト分析ツールであり、多くの企業や個人が導入しています。 しかし、Googleアナリティクスは、簡単に導入できるということもあり、最初にトラッキングコードだけ設置して設定などは特にしていない、となっているサイトも多いのではないでしょか。 Googleアナリティクスをうまく活用すれば、他の有料の分析ツールに負けないくらいの機能を利用することができます。 今回は、トラッキングコードを設置した後、一番最初に設定しておくべき4つの基本設定をご紹介します。 Googleウェブマスターツールと連携する サイトに関する様々な情報を知ることができるGoogleウェブマスターツールですが、Googleアナリティクスと連携すると非常に便利です。 【Googleウェブマスターツールについては下記参照】 【保存版】Googleウェブマスターツー
登録数2倍にしてと言われた時の正しい対処法
コミュニティマネジメントとは何か、なぜ今重要か / これから始めるコミュニティマネジメント入門 (1)Takaaki Umada
「サーバーってなに？」～初心者でもよくわかる！VPSによるWebサーバー構築講座(1) | さくらのナレッジ
サーバーの扱いに慣れていない初心者の方を対象に、VPS(Virtual Private Server)を使ってWebサーバーを構築し、WordPressサイトを運用できるようになるまでの連載を始めます。 サーバーの構築方法については、中・上級者向けの情報は多く見つかりますが、 「初めてVPSに触れる方が、Webサイトを構築して運用できるようになるまでのノウハウ」 を体系的に解説しているサイトはあまり多くありません。 ネット上に存在している情報では断片的だったり、分からない専門用語が出てきたりして、途中であきらめてしまった方も多いのではないでしょうか？ 本連載では、初心者の方でも「これさえ読めばVPSを構築できる！」ように、初歩から丁寧に解説します。 「今までレンタルサーバーを使っていたけど、一歩進んでVPSに挑戦してみたい」という方のお役に立てれば幸いです。 本連載は以下の構成で5回に分け
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
