localhost をスマホ実機で確認する方法 - Qiita
前置き ローカルで WEB の開発中に実機確認したいことってあるじゃないですか。 サーバーにアップすればもちろん見られるんですが、めんどくさいときもある。 そんなときに、localhost で起動中のページに直接アクセスするには以下の手順を踏むことで確認ができます。 localhost をスマホで確認する方法 同じ Wi-Fi に PC / スマホで接続する PC のIPアドレスを確認する（Mac の場合は システム環境設定 => ネットワーク など） localhost を PC で起動 スマホで IP:ポート番号 にアクセス（192.168.1.1:8080 など） 見られる！ 開発者ツールの使い方 端末の種類などによっては多少手順が変わったりするかもしれないのであしからず iPhone Safali のWebインスペクタを使う iPhone - Mac だと、Safali の Web
【５分でなんとなく理解！】Babel入門
5分でなんとなく理解するシリーズ、前回のWebpack入門に続き、第２回はBabel入門です！ はじめに この記事は、理科大AdventCalendar23日目の予定だったものです！ このAdvent Calendarの作成者にも関わらず、間に合わなくてすみません！ 僕は、この理科大AdventCalendarで先に投稿していただいたkatsuyukiさんとgangunさんがおっしゃっていた今はなきi科のあと誕生したI科こと情報工学科の一期生で２年生です！ 理科大生を中心とした学生団体Unitusで活動したり、ベンチャーでインターンをさせていただいたり、Nihonbashi.jsという勉強会を第２回から企画・運営をさせていただいてます。 AdventCalendarということで自分しか書けない記事を書きたいと思っていたのですが、４ヶ月以上７割完成のまま放置されていた記事があったのでとりあえ
Sublime Text 3：新しい PC に設定を移行する方法
使用中の設定を保存する 使用中の Sublime Text の設定をバックアップ（保存）します。 エクスプローラーのアドレスバーに 「%AppData%\Sublime Text 3\Packages\User」と入力し「Enter」キーを押します。 通常は、下記フォルダが開きます。 「Default (Windows).sublime-keymap」「Package Control.sublime-settings」 「Preferences.sublime-settings」、3つのファイルをバックアップ（コピー）します。 （特定のファイルが存在しない場合もあります ※後述） これでバックアップは完了です。 これら3つのファイルは 「Default (Windows).sublime-keymap」が、キーバインド 「Package Control.sublime-settings」が
ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた
各項目の解説と設定例 twitter:cardは、「Summaryカード」ならsummary、「大きな画像付きのSummaryカード」ならsummary_large_imageと指定します。 <!-- 記述例：Summaryカード --> <meta name="twitter:card" content="summary"> <!-- 記述例：大きな画像付きのSummaryカード --> <meta name="twitter:card" content="summary_large_image"> twitter:site/twitter:creatorは、該当するアカウントを持っている場合のみでOK。 <!-- 記述例：WebサイトのTwitterID --> <meta name="twitter:site" content="@granfairs"> <!-- 記述例：コンテンツ
WordPressのローカル環境のためのGUIツール”Local by Flywheel”が便利 – Capital P – WordPressメディア
便利すぎて、正直びっくりした。 Local by Flywheel のウェブサイト WordCamp US へ参加した際にブースを出していたのを見かけていたのが “Local by Flywheel” というローカル環境を構築するためのツール（https://local.getflywheel.com/）。 MAMP (Pro) の UI が綺麗で速くて各サイトが分離されていて、機能がとても多い版というと分かりやすいでしょうか。また、WordPress の環境に特化しており、ワンクリックインストールやマルチサイト、SSL、Apache/Nginx の選択や切り替え、メールのデバッグツールや開発中のサイトの一時的な公開など、WordPressを使ってウェブサイトを作りましょう、となった場合に必要になりそうな機能を備えています。 で、無料です。 トップページに書かれているその機能は以下のように
【第2回】ネットワーク広告担当者が語るGoogle Adsenseでネットメディアの収益を最大化するポイント : LINE Corporation ディレクターブログ
(photo: Google Logo in Building43 by Robert Scoble) こんにちは、広告事業部でネットワーク広告の運用を担当している木原です。 今回は4月に掲載した記事の続きとして「【第2回】ネットワーク広告担当者が語るGoogle Adsenseでネットメディアの収益を最大化するポイント」をお送りします。 ※前回に引き続き内容は初級者～中級者向けにしています。 広告配信の仕組みを知る さて、皆さんが日々運用しているGoogle Adsenseですが、誰がどのような方法で広告を出稿/管理し、どのようなロジックで広告が表示されているのかご存知でしょうか。広告収益を最大化する上で、広告配信の仕組みを知ることは非常に重要なポイントになります。 広告主・代理店が広告を出稿し、実際にあなたの運用する媒体に広告が掲載されるまでには大きく2つのステップがあります。ざっくり
YouTubeを効果的に見せるための12の隠しパラメータ
YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されている訳ではありませんが）をつけることで見栄えや動作を変更することができます。 以下の動画はパラメータを付与してみたものです。テーマおよびプログレスバーの色の変更して、セピアカラーの動画にマッチしたデザインにしています。再生後の関連動画の非表示や再生開始位置の変更なども行っています。 ということで以下、隠しパラメータの紹介です。すべてのパラメータは、次の設定例のように、src属性に設定したURLの末
viewportの書き方でピンチによる拡大・縮小ができるのがいいのかできないのがいいのか - ディレイマニア
サイトを作る際、スマホでの表示を最適化するためにmeta name="viewport"を使ってコントロールします。 だいたい定番の書き方があってコピペで使いまわせるんですが、ピンチインアウトで拡大縮小できるようにするかしないか、どちらを選ぶのが良いか判断に迷うところです。 この2種のソースと、拡大縮小をできるようにするかしないか、僕なりの見解を書き留めておきます。
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 - OPTPiX Labs Blog
こんにちは、ウェブ担当の嶋です。 Twitterと並んでSNSの代表格となったFacebook。ウェブテクノロジでは公式ページとともに「OPTPiX SpriteStudio ユーザー助け合い所」というグループも開設し、ユーザー様と情報を相互にやりとりしています。 Facebookは、URLを含む投稿やシェアをすると、自動的にそのURLからタイトルや概要、画像などを取得して表示してくれます。リンクをクリックする前にどんなサイトなのかなんとなくわかるのは非常に便利なのですが、こういう形でシェアされているのをよく見かけませんか？ ページのタイトルや見出しは適切なのですが、サムネイル画像として表示されている画像の左右が切れてしまっています。また、表示されている画像もサイトのトップページを紹介する画像としては適切ではありません。 これはOGP(Open Graph Protocol)の設定が行われ
IEでネガティブマージンを適用すると、はみ出した部分が消える問題 | 名古屋のホームページ制作なら株式会社SPOT
HTMLで画像等を配置する際に、レイアウトを微調整するためにネガティブマージン（マイナス方向へのマージン）を設定することがよくあります。 ですが、ネガティブマージンを使用した場合、IEだと上図のように、はみ出した部分が消えてしまうことがよくあります。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
Google Chromeで画像が表示されなくなったりデザインが崩れた場合の解決方法 | ひとぅブログ
Google Chromeの障害状況 ページ中の一部の画像が表示されない ページのデザインがくずれる（CSSが読み込まれていない感じ？） ページが途中までしか読み込まれない ページを再読み込みすると、正常に表示されるが、しばらくすると同じ現象になる 発生した環境 Mac OS X 10.7.2 Google Chrome MacBook Air 2010 メモリ2GB それでは治す方法をご紹介します。結論から言うと、Google ChromeのキャッシュをクリアすればOKです。操作方法をご紹介しますね。 「環境設定」画面を開きます。（Command＋,キーでもOK） 「高度な設定」→「閲覧履歴を消去…」をクリックします。 「キャッシュ」のチェックボックスを入れて、「閲覧履歴の消去」をクリックすれば完了。ちなみに消去の際の確認画面は表示されませんのでご注意ください。 ＊ ＊
WordPressをインストールしたら最初にやってることまとめ
仕事でも、プライベートでも本当にかかすことのできない存在になっているWordPress。 今回は、そんなWordPressを設置したとき毎回やっているカスタマイズに入る前の下準備についてまとめてみました。 毎回やっているのにうっかり忘れたりしてしまうので自分のメモもかねて…！ 初期設定 プラグインを入れる テーマを準備する functions.phpの設定をする 1.初期設定 1.1 パーマリンクの設定をする デフォルト設定のままだと http://blog.v-colors.com/?p=123 とかでちょっとかっこわるいので パーマリンクの設定を変更します。 管理画面メニュー 設定->パーマリンクの設定からお好みの設定に。 いろんな設定ができます。どんな設定ができるかは公式サイトのパーマリンク設定についてにまとめられています。 1.2 メディアの設定をする 管理画面メニューの 設定->
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
