http://buchineko.website/chrome-devtools-cording/
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
【保存版】Google検索品質評価ガイドラインの完全日本語翻訳 SEO担当者必見(2015年11月版) | 大阪 バリューエージェント
2015年11月にGoogleが公開したGoogle General Guidelines（Google検索品質評価ガイドライン）をすべて日本語に翻訳したものを公開します。元のPDFファイル160ページをすべて翻訳しています。 SEOコンサルタント、Web担当者、Webコンサルティングをする方には必見の内容です。ぜひご覧ください。 翻訳文の中でリンクがたくさんありますが、アクセス出来ないリンク(www.raterhub.com など)があります。翻訳前のデータでもアクセスできない状態です。リンクがあるという認識を持って頂くためにあえてそのままにしております。ご了承ください。また、画像などは翻訳していません。Google検索品質評価ガイドラインの原盤をご覧頂きながら見ると理解を深めやすいと思います。翻訳はなるべく忠実に行っておるつもりですが誤訳などがありましたらご連絡頂くと幸いです。また、最
websec-room.com - websec room リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
FLAT ICON DESIGN -フラットアイコンデザイン-
サイトの概要 『FLAT ICON DESIGN-フラットアイコンデザイン-』は、昨今WEBデザインやスマートフォンのUIなどで注目されているフラットデザインのアイコン素材をストックしたサイトです。こちらのサイトに掲載しているフラットアイコン素材はどなたでも、使用条件に違反しない限りクレジット表記や許可なしで、自由にご利用いただけます。 『FLAT ICON DESIGN』には、すぐに利用できるJPG、PNG画像、adobeのillustratorやphotoshopなどで編集可能なベクターデータのAIデータ、EPSデータの他、スマートフォンやタブレットなどどんなデバイスでも劣化しない＆容量が軽いなどで注目させるSVG画像も用意いたしました。 フラットデザインの今後 「フラットデザイン」でちょっと調べてみますと、どうやら工業系のデザイン概念「製品は素材に忠実にあるべきだ」＝Material
WordPressでサーバ移行時にデータベース上のドメインを書き換える方法
WordPressでサーバを引っ越しする時や、開発環境から本番環境へ移行する際は、 データベース内の旧ドメインを新ドメインに書き換える必要があります。 その方法をまとめてみました。 UPDATE wp_options SET option_value=REPLACE(option_value,"旧ドメイン","新ドメイン"); UPDATE wp_posts SET post_content=REPLACE(post_content,"旧ドメイン","新ドメイン"); UPDATE wp_posts SET guid=REPLACE(guid,"旧ドメイン","新ドメイン"); UPDATE wp_postmeta SET meta_value=REPLACE(meta_value,"旧ドメイン","新ドメイン"); ところが、岡本さんのブログ「WordPress のDB上のサイトURLを
box-sizing は魔法のコトバ！もうpaddingやborderを含めた幅の計算はヤメヤメ | Cappee Design
あとで読みたい人は… CSS3 の box-sizing プロパティがかなり便利です。 あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。 CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。 「あれ、なんで崩れるんだろ？」 「padding と border 分マイナスするの忘れてた～」 ってのがよくありました。（今もたまに。。） それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。 これはものすごい効率化になりますね！ box-sizing の書き方 box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。 指定できるのはこちらの２種類です。 content-box … 【デフォルト値】padding と border を要素の幅と高さに含
軽量でシンプルなレスポンシブフレームワーク「Skeleton」 | バニデザノート
「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。 <!-- .container is main centered wrapper --> <div class="container"> <!-- columns should be the immediate child of a .row --> <div class="row"> <div class=
長いデザインを印刷する｜Print1
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツールです。※2015.11.10 分割表示されないエラーに対処しました 使い方 画面の赤い点線で囲われたエリア部分に画像ファイルをドラッグ＆ドロップすると、画像の長さを計算して自動的に折り返すように複製して配置されます。 スライダーまたは数値を入力して画像の幅を調整、また画像の位置を個別にドラッグで動かして調整してください。 画面左下の印刷ボタン、またはブラウザのメニューから印刷を行ってください。 画面左下の×ボタンはページをリロードして表示をクリアします。その際、画像幅の設定値は保存されます。 対象ブラウザ Google Chrome 最新版 対応画像形式 jpg,gif,png,svg 紹介記事 WebNAUT
.htaccess の書き方
.htaccess とは.htaccess のルールファイル名コメントアウト文字コードと改行httpd.conf転送と有効範囲正規表現Apache のモジュールと .htaccess で利用可能なディレクティブモジュールとディレクティブ一覧HTTP環境変数後方参照RewriteRuleの後方参照RewriteCondの後方参照まとめ.htaccess とは[1] Apache HTTP Server Webサーバソフトウェアが "Apache" である必要があります。 .htaccess とは、Webサーバの動作を制御するための設定ファイル [1] です。設定例としては、特定のファイルやディレクトリのアクセスを禁止したり、HTTP 404(Not Found：未検出)エラーページをカスタマイズすることもできます。.htaccess は設置しなくともWebサイトは問題なく動作しますが、セキュ
ランディングページの作り方、７つの超重要ポイント。
ランディングページ（ＬＰ）の作り方を、超重要ポイント７つに絞って説明します。対象読者は、これからＬＰを作成する方です。インハウスのご担当者だけでなく、制作会社さんが読んでも役立つでしょう。作り方だけでなく、コンバージョン率をアップさせる点も、詳しく解説したからです。１回読んで分からなければ、繰り返し読んでください。それだけ価値ある内容になっています。 ランディングページの構成。 まず最初に、ランディングページの構成について、左図を使って説明します。ランディングページの構成は、大きく７つのブロックに分かれます。 キャッチコピー。 お客さんの関心事を、ズバリ指摘します。関心事とは、対象ユーザーが抱える、悩みや課題です。このパートは、メインコピー（１行）とサブコピー（２行）、写真の３つの部分で構成されます。 共感部。 なぜ多くの人が関心を持つのか？ お客さんの気持ちに寄り添いながら、言葉で解きほ
「Web解析ツール」は死に、「Predictive First」へと移行する - 絶倫ファクトリー
新卒でWeb系企業に入ってから6年間、webサイト改善の仕事に携わってきたけれど、いわゆるこの業界で言われる一般的な「Web解析」のやり方というのは、もう時代遅れなのではないかとこの半年くらい考えている。正確に言えば、Adobe Analytics（以下AA）やGoogle Analytics（以下GA)といった「Web解析ツール」を使ってWebサイトの課題を見つけて改善点を洗い出し云々……と言ったやり方は古いものになりつつあるのではないか、という話だ。 点の改善 線の改善 AAやGAといった従来のWeb解析ツールの弱点は、サイト全体でユーザがどのように動いているのか、つまりサイト上でのカスタマージャーニーを把握できないことだ。直帰率の高い入口ページを見つけて改善する、CVしているユーザがよく見ているページを見る……これらは基本的に課題がある、またはCVに寄与していそうな「点」を見つけて、
Naming -名前付け- - Qiita
プログラミングで最も重要な技術の一つが、名前付けです。 且つ、センスが問われるものなので、上達は難しいものでもあります。 この記事では、様々な文献から抽出した名前付けに関する情報を雑多にまとめました。 -名前重要- ソフトウェアの設計のアプローチとして、『まず名前から入る』というのは、あまり語られていない秘訣としてもっと広く知られても良いように思います。 - まつもとゆきひろ 『プログラマが知るべき９７のこと』 コミュニケーションの基礎 名前は、コミュニケーションの基礎となるものです。 私にもあなたにも名前が無ければ、疎通することは困難になります。 名前をコミュニケーションの基礎と見た場合に重要なルールは以下の通りです。 発音可能であること 検索可能であること ※現実世界のみであれば検索可能じゃなくても良いかも知れません。 プログラミングは、チームや複数人で行うことのほうが多いと思います。
専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！ これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝
ウェブサイトやメルマガ用のテキスト作成に便利なウェブサービス5選
業務でウェブやメールマガジン、SNS向けの文章を作成する場合、一般的な業務で文章を書くのとはまた違った、さまざまなテクニックが要求される。今回はこうした用途に適した、文章作成時の補助ツールとして重宝するウェブサービスをまとめて紹介する。外部のサイトということで、利用にあたっては社内のセキュリティポリシーに違反しないよう、予め確認を取った上で、どしどし活用してほしい。 ◇ワンクリックでExcelをHTMLのテーブルに変換「TABLEIZER!」 「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツール。フォントサイズ、ヘッダ部分のカラーを指定できるほか、スタイルシートを使わないよう指定することもでき、手持ちの表を手軽にウェブに貼り付けたい場合に便利。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
編集記事一覧 2015年5月 | Web担当者Forum
Web制作 W3G
