知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
25. CSSアニメーションを使う 25 ‣ アニメーションにCSS Transitionを使う ‣ JavaScriptで直接やるよりはるかに速い ‣ setIntervalでアニメーションするのを置き換える 26. すぐわかるCSS Transition 26 .foobar { background-color: white; } .foobar:hover { -webkit-transition: background-color 1s linear; background-color: red; } .foobarクラスの要素 .foobarクラスの要素
Amazon EC2(Linux)システム管理で知らないとハマる5つの環境設定 | DevelopersIO
ども、大瀧です。みなさん、EC2をバリバリ使ってますか?使いたいときにすぐ使える仮想マシンとして、開発・検証から本番まで幅広く活用されていると思います。 日頃EC2を業務で運用する中で、EC2インスタンスをコピーすると意図しない環境設定に変わってしまうというトラブルが度々あり、cloud-initというツールに拠ることがわかってきました。 「EC2インスタンスのコピーなんて、一旦インスタンスを作成したあとはあまりやらないのでは?」と思われがちですが、EC2独特の制限などもあり、実際の運用では思ったよりも頻繁にインスタンスのコピーが必要になります。インスタンスのバックアップ&リストアなどはイメージしやすいと思いますが、それ以外にも意外なケースとして以下があります *1。インスタンスのコピーは、AMI(Amazon Machine Image:インスタンスのバックアップ)を取得し、新規インスタ
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
なめらかに動作するUITableViewのつくりかた
矢口裕也です。 Advent Calendar 10日目はiOSのUITableViewの話をします。 ぼやき iOSアプリを開発していると70%くらいの時間はUITableViewに費やしている気がしてきます。 UITableViewは非常にめんどうなものですが、パフォーマンスがシビアでかつユーザーの快適さに直結するものなので大いに手間をかける価値があります。 この記事ではガクガク処理落ちするUITableViewを例として改善していきながら快適なUITableViewのつくりかたを解説します。 目的 以下のケーススタディでは次の目的でコードを改善していきます なめらかに動くようにする ここでのポイントは実際速くなくてもユーザが快適に感じればOKである、ということです。処理速度が高速である必要はありません。 戦略 UITableViewでのパフォーマンス問題は次の2点であることが多いです
ショートカットを使って PuTTY で目的のサーバに一撃で接続する
cles::blog 平常心是道 blogs: cles::blog NP_cles() « GARNET CROW REQUEST BEST が届いた :: 最小インストールの CentOS にパッケージをまとめ... » 2013/10/08 ショートカットを使って PuTTY で目的のサーバに一撃で接続する PuTTY 468 0へぇ PuTTY を使っていて、いちいち Saved Sessions からサーバを選択するのが面倒なので、目的のサーバに一撃で接続するショートカットが作れないかと思って調べてみたら思いのほか簡単だったのでやり方をメモ。おそらく同じことを考えた人が昔から沢山いるのか、FAQにそのものズバリのやり方が書いてありました。 PuTTY FAQ A.6.4 How can I create a Windows shortcut to start a particu
レシートのverifyとSandbox – なんてこったい
StoreKitを使ってアプリ内でアイテムの購入が行われると、レシートが発行されます。Appleは不正防止のため、レシートの内容が正しいかどうかverifyする機構を用意していますが、この機構を使うには若干注意が必要です。 レシートの認証の基礎 まず、StoreKitを使ったアプリ内課金を実装する上で、レシートの認証はすべてのアプリで必須の要件というわけではありません。しかし、とくに購入内容がサーバーと連動するような場合において、レシートの認証は効果の高い不正対策方法の一つです。 ユーザがアプリ内で決済を行う(状態がSKPaymentTransactionStatePurchasedになる)と、そのtransactionのtransactionReceiptプロパティからレシートデータを取得できるようになります。ここで取得したレシートデータをAppleが用意している認証サーバー(buy.i
これは罠。PHPでiPhone端末にPUSH通知を送る際の落とし穴 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
段田です。 最近、PHPからiphone端末にPUSH通知を送る機能の開発に携わりました。PHPでプログラムを実装する場合、フルスクラッチとライブラリを使用するケースがあるのですが、各ケースでのポイントを忘れないよう書きたいと思います。 なおPUSH通知の概要、証明証の作成については省略します。概要などは下記の記事がわかりやすく、参考になりました。 Apple Push Notification サービス(APNs) の実装方法 iPhoneプッシュ通知まとめ フルスクラッチのケース フルスクラッチでやる場合、こちらのはてなの記事が参考になりました。 https://irss.hatenablog.com/entry/20111026/1319632548 しかし、試しに作成すると送信はできるのですが、下記の様な制約があることを知ります。 1つのメッセージで256バイトを超えてはいけない
RDS MySQL5.5.33 で『utf8mb4』(4バイト対応UTF-8文字コードセット)を試してみた | DevelopersIO
ちょっとした小ネタです。RDS(MySQL)に於いて、『utf8mb4』に対応した環境が作成出来るか／対応しているかという件で確認する機会がありましたので、当エントリに備忘録的として記しておきます。 目次 『utf8mb4』とは RDS(MySQL)環境の用意 『utf8mb4』に対応したパラメータグループを作成・適用 『utf8mb4』関連パラメータグループ適用後の内容確認 『utf8mb4』とは この『utf8mb4』というもの、文字コードの一種で、UTF8で4バイト文字を扱う事が出来るものらしいです。 MySQLで4バイトのUTF-8文字を扱ってみる - HHeLiBeXの日記 正道編 また、それぞれのバージョンで扱う事が出来るCharacter Setの一覧も以下にメモしておきます。 MySQL :: MySQL 5.1 Reference Manual :: 10.1.13 Ch
私が他人のシェルスクリプトから学んだこと | Yakst
私はシェルスクリプトの大ファンで、他人のスクリプトから面白い方法を学ぶのが大好きだ。最近、SSHサーバの2要素認証を簡単にするためのauthy-sshスクリプトに出会った。このスクリプト群を見まわしていて、みんなと共有したいたくさんのクールなことを見つけた。 出力に色付けする 出力文字列を、成功した時は緑に、失敗した時は赤に、警告は黄色に色づけしたいと思うことはたくさんあるだろう。 NORMAL=$(tput sgr0) GREEN=$(tput setaf 2; tput bold) YELLOW=$(tput setaf 3) RED=$(tput setaf 1) function red() { echo -e "$RED$*$NORMAL" } function green() { echo -e "$GREEN$*$NORMAL" } function yellow() { e
にひりずむ::しんぷる - ngrep 便利！
tcpdump で HTTP みてたら、まさかり族の長に 23:44 hirose31: ngrep -d any -W byline port 80 便利 っていわれてそういえば ngrep とかあったわーってことで大変便利でした。@hirose31++ ちなみに今回は request 側から特定のホストのみに限定してみたかったので $ sudo ngrep -W byline port 80 and host www.google.co.jp とかしたのでした。これで生の HTTP がらくらくみれて幸せ！ ちなみに tcpdump では $ sudo tcpdump -l -s 1600 -nxX -i en0 host www.google.co.jp とかやってました。オプションむずいよぉ。 https://twitter.com/muranet/status/3118546330
ゆーすけべー日記
今週末の金曜日、3月15日に「JAWS DAYS 2013」のパネルディスカッションのパネラーとして呼ばれておりましてー。 風呂グラマーのmasuidriveさんとTreasure Dataの太田さんとお話をするらしく多少ビビってる僕です。 プログラム・スピーカー紹介 | JAWS DAYS 2013 | 2013/3/15（金）～16日（土）東京ビッグサイトで開催！ 実はこのAmazon Web Serviceユーザーにおける祭典「JAWS DAYS」のイベントに呼ばれた前日。 ちょうどボケてを某さくらVPSからEC2含むAWSへせっせと移行していましてー。 ま、つまりは「AWSでこれからバリバリ運用始めるぜ！」ってタイミングでのお呼ばれでしたw イベント自体はおもろい事話せればいいなーとは思いつつ、AWSへ移行して、もしくはAWSへの準備の段階で得たTipsを箇条書きでまとめてみます。
Gmail設定方法
僕は18歳からGmailをメインのメールクライントとしてほぼ毎日使っている。今25歳なので7年間も使っていることになる。今回はこれまでに僕が学んだGmailの使い方の中でも、絶対におすすめしたい設定とテクニックを紹介したい。特にマルチ受信ボックス機能とフィルタを使い、受信ボックスをつねにゼロにする方法は、本当おすすめなのでぜひためしてほしい。 Google appsやGmailの受信ボックスのデザインはデフォルトだと以下になる。これから、このデザインの無駄をとりのぞいていく。無駄をとりのぞくことで重要なことに集中できるようになる。禅＝Zenの考え方だ。 まずは、「設定」メニューの「全般」タブを開き、いかのようにする。紹介することが多いので理由はあえて書かないが、質問があれば気軽にTwitter（@ryoma0421）かメール（ryomaアットzenstartup.jp）で聞いてほしい。 「
味のりとこんにゃくゼリーのエンジニアブログ: phpを高速化する60の方法
2012年3月15日木曜日 phpを高速化する60の方法 01. static にできるメソッドは static として宣言しよう。（4倍速い） 02. echo の方が print より速い。 03. echo ‘文’,'字’; （カンマ区切り）の方が、’文’.'字’ （ドット連結）より速い。 04. ループの最大値は、ループ「内」ではなく「前」にセットしておこう。 05. 大きい配列のような変数は unset() してメモリを解放しよう。 06. マジックメソッド（例： __get, __set, __autoload）は使用を避けよう。 07. require_once はハイコストなのです。 08. include や require でファイルはフルパスで指定しよう。 09. スクリプト開始時間は time() でなく $_SERVER['REQUEST_TIME
Android のプッシュ通知用コネクションに関するメモ（補記） : DSAS開発者の部屋
前回の記事では、Android のプッシュ通知機構 （GCM） が 「Google 所管のサーバと Android 端末との間の持続接続」 をどのように使用しているかを調べてみました。 この記事の文中に、上記の持続接続が「プッシュ通知以外の用途にも利用されている様子でありそちらもおって調査したい」 と注釈を添えています。今回はその内容と関連する話題を控えます。 まとめ 端末と mtalk.google.com:5228 との間の接続はプッシュ通知以外に次の用途で使用される Android 版 Google Talk クライアントのメッセージ送受信 （ボイスチャットを除く） Google Play アプリのウェブページから端末へのプッシュインストール指示 - 他にもあるかも？ - 非公開の内部仕様につき今後変更される可能性も Google Talk について Android 版 Google
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
はやわかりHTML5ハイブリッドアプリ開発事情
