サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Androidの解像度の違いを考慮したデザイン基礎知識
多様にある Android 端末の画面サイズと解像度 Android 端末は様々なメーカから発売されており、多種多様な端末があります。スマートフォンとタブレットも合わせるとかなりの数になります。 そんな Android のアプリデザインを作っていく上で避けて通れないのは、多様にある端末環境のことを考慮したUIデザイン設計です。端末の種類が限られている Apple の iPhone とは異なった事情があります。 考慮してデザイン制作と実装を進めていかないと、せっかくデザイナーさんが頑張ってイケてるデザインを作ったのに実装後に残念な見栄えになってしまったりします。 プログラマとデザイナーは密にやり取りをすべき デザイナーが画像素材を用意してプログラマがそれを使って実装していくのが一般的ですが、出来ればどういう風に素材を用意して欲しいかお互い相談しながら制作を進めていくべきでしょう。 画像スライ
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法
mod_expiresを導入する理由 当サイトではWordPressの高速化を一手に担うプラグイン「W3 Total Cache」を導入しています。その設定に「Browser Cache」という項目があります。 てっきり項目の名前から画像をクライアント側でキャッシュする設定になっているものだと考えていました。 しかし設定された「.htaccess」をよく見てみると、mod_setenvifでhtmlやcssをgzip化して転送量を減らしているだけでした。 毎回画像をダウンロードしていては表示も遅く、サーバに余計な負荷がかかります。 そこでApacheで用意された「mod_expires」モジュールでキャッシュをコントロールすることにしました。共用サーバであっても、当サイトの利用しているロリポップ！やさくらなど有名どころは対応しているので、設定しておきます。 mod_expiresの書式 サ
Free Social Media Icon Sets for Your Website
If you’re looking for some free social media icon sets for your next web design or web app project, here are some of the best and most useful icon sets for you. These icon sets are very versatile and can be easily adapted to other types of projects, such as mobile app design or user interface design. The logos of social media websites such as Twitter, Facebook, or YouTube are among the most widely
（ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方
SyntaxHighlighter のオプションを使う ★特定の行をハイライトする ★タイトルをつける ★他言語のソースコードとHTMLを同時に HTML以外の言語を指定してから、半角スペースを空けて「html-script:true」と書けば、 両方とも色分けされます。（下記は、JavaScript と HTMLの例） ★開始行番号を変える ★ツールバーの表示・非表示 「toolbar」とは、<pre>の右上に出てくる小さな「？」マーク。これを非表示にできます。 ★ソース内のリンクをはずす ソース内にURLがあると、デフォルトでリンクを貼りますが、「auto-links:false」にすれば、ソース内のリンクをはずせます。 CSSを編集してオリジナルのスタイルに セレクタは「pre」でなく「.syntaxhighlighter」 <pre>要素に「class="brush:○○"」と指定
Androidでモバイルとタブレット（＋iPhone／iPad）を振り分ける方法｜BLACKFLAG
以前ここで「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 それぞれのデバイスごとに振り分ける方法を紹介しましたが Androidはモバイルとタブレットの振り分けはできていなかったのですが iPhoneとAndroidモバイル、iPadとAndroidタブレットのそれぞれを振り分ける状況が やはり増えてきそうなので追加版として紹介してみます。 サンプルとしては、AndroidタブレットとiPadは「/tb/」ディレクトリへ AndroidモバイルとiPhoneは「/sp/」ディレクトリへ、リダイレクト処理をする構成にしてみます。 ◆SCRIPT <script type="text/javascript"> var userAgent = window.navigator.userAgent.to
phpのserializeを使うより高速でサイズもコンパクトに仕上げる「MessagePack」とPHP拡張:phpspot開発日誌
phpのserializeを使うより高速でサイズもコンパクトに仕上げる「MessagePack」とPHP拡張 2010年12月15日- The MessagePack Project phpのserializeを使うより高速でサイズもコンパクトに仕上げる「MessagePack」とPHP拡張。 結構前のエントリのご紹介なので知っている人も多いと思うのですがご紹介。 phpには serialize という関数があって、配列等の複雑なデータも文字列にして、ファイル等に保存し、後ほど unserialize 等で変数に戻せて便利なのですが、MessagePackとそのPHP拡張を使えば、より高速で、serialize後のデータも小さくできます。 MessagePack自体はkumofsの内部で使われていて、PHP以外にもc++, erlang, haskell, java, perl, pyth
日本語・英語に対応したサイトを作るときの URL 設計メモ : 管理人@Yoski
日本語・英語に対応したサイトを構築するとき、ドメインや URL の設計をどのようにするのが良いのか、振り返ってみるといろいろ実験してたのでメモ(まとめ)として残します。 これまで、以下のようなパターンを試してみました。 A.完全にドメインを分ける atode.cc と toread.cc B.サブドメインで切り分ける en.abc-yoga.biz と he.abc-yoga.biz C.ディレクトリを分ける www.freshreader.com/ver2/ja と www.freshreader.com/ver2/en D.ファイル名だけで区別する http://reviewposter.com/index.php と http://reviewposter.com/en_index.php E.クッキーや Accept-Language で表示ページを振り分ける http://sid
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
多地域、多言語のサイトの管理 - Search Console ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 多地域、多言語のサイトの管理 言語、国、地域によって異なるコンテンツをユーザーに提供しているサイトの場合、Google 検索結果を最適化できます。 多言語と多地域の違い 多言語のウェブサイトとは、複数の言語でコンテンツを提供しているウェブサイトです。たとえば、カナダの企業のサイトに、英語版とフランス語版を設ける場合です。 Google 検索は、検索ユーザーの言語と一致するページを探します。 多地域のウェブサイトとは、異なる複数の国のユーザーを明示的にターゲットにしているウェブサイトです。たとえば、カナダと米国の両方に製品を発送するメーカーの場合です。 Google 検索は、検索ユーザーにとって適切な地域のページを探します。 サイトの中には、多地域でかつ多言語のサイトもあります（たとえば、
Ajaxコンテンツを検索エンジン(Google)にクロール・インデックスさせる方法
[対象: 上級] Ajax利用したコンテンツをGoogleにクロール可能・インデックス可能にさせるための設定方法を今日は取り上げます。 すでにAjaxを理解している人向けなのと自分へのメモを兼ねているのでAjaxに対する細かな説明や用語解説は省きます。 「#」（ハッシュ）がURLに含まれている場合、#以下のURLをGoogleを含む検索エンジンはインデックスしません。 A. http://www.suzukikenichi.com/ajax.html#abc B. http://www.suzukikenichi.com/ajax.html#xyz 上のAとBはどちらも、http://www.suzukikenichi.com/ajax.html というURLをクロールしてインデックスするだけです。 #付きのURLをインデックスすることはありません（終わりに補足説明あり）。 Ajaxでは、
クロスブラウザな CSS box-shadow - Opera Developer Community
IE9 に関する情報は IE9 Developer Preview 3 を元にしています。 IE フィルター 私は最近 IE の CSS フィルタについて多くのことを学びました。まず最初に、 blur フィルター が IE で要素をぼやかすのにつかえます。 簡単な <div> 要素を使った例を見てみましょう: <div style="background:blue;height:100px;width:100px;"></div> これは 図1 のようになります。 図1: 固定領域を持つ簡単な <div> 要素 次のフィルターを使って、 IE で半径 5 ピクセルをぼやかすことができます: <div style='background:blue;height:100px;width:100px; filter:progid:DXImageTransform.Microsoft.Blur(p
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
BRnet Web Paradise - DTPデザイナーのためのWebデザイン講座
Vol.2 文字のサイズを決める Webではあまり小さい文字は使えない DTPデザインとWebデザインでは勝手が違うもののひとつとして、文字のサイズが挙げられる。ごくおおざっぱに言ってしまうと、DTP系のデザイナーがWebページをデザインすると文字が小さくなりがちという傾向があるのだ。 これはひとつには、モニタの実解像度と論理解像度の違いに起因する。つまり、モニタで見ている時より印刷された時の方が文字の大きさは大きいということだ。もうひとつは、印刷物の解像度との圧倒的な差。印刷物では虫眼鏡で見るような小さな文字も印刷可能だが、モニタ上では1ピクセルより小さな単位は表現することができない。そうしたことから、DTPデザインの感覚で文字のサイズを決めてしまうと、小さい文字を画像扱いでレイアウトするケースでは文字がつぶれて読みにくくなってしまったり、テキストとしてレイアウトするケースでは、デザイナ
古参ウェブ屋が最新のサイト立ち上げ運用マニュアルを本気になって作ってみた
HOME / ウェブサイトのコツ / いまさら聞けない！ホームページの立ち上げから運用体制構築 Date: 2011/11/25 | | Tags: ホームページ, 立ち上げ, 運用体制, 構築 いまさら聞けない！ホームページの立ち上げから運用体制構築 自社ウェブの立ち上げから運用体制の構築まで、ウェブ担当者は何を考えないとならないのか？ 本日、静岡商工会議所主催の静岡清水産業情報プラザ創立10周年記念セミナーでお話しした内容です。 いまさら聞けない！ホームページの立ち上げから運用体制構築">いまさら聞けない！ホームページの立ち上げから運用体制構築 小規模ウェブから大規模ウェブまで通用する、「担当者が何を考えるべきか？」という切り口の資料になっています。ウェブ担当者はなにも技術のことを勉強するのではなく、誰かを使って、場合によっては外注して、やらなくてはならないことを実現すればいいわけです
Facebook・Twitterなどソーシャルボタン設置方法まとめ │ Design Spice
twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。 このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。 備忘録エントリー。 twitter ツイートボタン facebook いいねボタン google+1ボタン evernote サイトメモリーボタン tumblr 共有ボタン はてなブックマーク mixiチェックボタン twitter ツイートボタン 1.コード取得 下記リンク先でツイートボタンのソースコードが取得できます。 Twitter / ツイートボタン ボタン ボタンの種類を選びます。 ツイート内テキスト ツイートに含まれるテキストを選択します。 ボタンが表示されるペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://pointcard.me/japanese-free-web-fonts/