コピペで使える！公式SNSシェアボタンを横に並べて揃えるCSS@2016 – LIQUID BLOG
SNSシェアボタンやソーシャルブックマークボタンはサイトの必需品ですが、 公式サイトからコードを取得して色々設置すると、ガタガタとズレてきれいに並びません。 今回は、公式コードのままできれいに揃える、コピペで使えるCSSを紹介します。 （2016年最新版） 公式シェアボタン取得 Twitter https://about.twitter.com/ja/resources/buttons#tweet Facebook https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP はてなブックマーク http://b.hatena.ne.jp/guide/bbutton Google+ https://developers.google.com/+/web/+1button/ Pocket https://getpo
難しいことを簡単に学ぶ方法 ― 強力なスキルを新たに身に着けるための3つのステップ | POSTD
ここ数年、私はWeb開発と機械学習の自習に多くの時間を割いてきました。 学習のテーマは、Javascript、Node、ReactからPython、scikit-learn、ニューラルネットワークに至るまで多岐にわたりましたが、全てに対して私は一貫したアプローチで取り組みました。 そのアプローチとは、単純な（陳腐と言ってもいい）3ステップで進める、という手法です。しかし、 Web開発のシロウトだった私が5カ月で、プロだと自覚できるほどになった のはひとえに、このアプローチで臨んだ自習の成果だと思っています。 そこで私は、この自習法がほかの誰かのお役に立てるかもしれないと思い、少し記事を書いてみることにしました。 この記事は、何も分からないままやみくもに挑戦を始めた、2012年当時の自分自身に教えるつもりで書いています。 ステップ1：習うより慣れろ 新しいテクノロジを学ぶためにまず実行する最
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
Hugo + GitHub Pagesでブログを作る#1 | TANKSUZUKI.COM
このブログは当初Wordpressで作っていたのですが(と言っても記事は少ないけど)、静的サイトジェネレータのHugoに乗り換えました。 本記事ではHugoでブログを作る方法と、気持よく運用していくためのTipsを書いています。 公式サイト：Hugo :: A fast and modern static website engine 今、とても幸せです。 操作がローカルのCLIで完結するので、もっさりしたWeb管理画面から解放された。 データベースやPHP不要。サーバはHTMLが置ければOK。 記事がテキストファイル(Markdown)なので、バージョン管理やバックアップが楽。 公開するのは静的なHTMLだけなので、セキュリティを神経質に考える必要がなくなった。 要は、運用が圧倒的に楽になりました。 この記事では2部構成で、Hugoの基本操作、GitHub Pagesでの公開、独自ドメイ
背景が繰り返し画像で、角丸の場合 │ これからゆっくり考L +α
使用した画像 ・角丸の上枠（bg_top.png） ・角丸の下枠（bg_bottom.png） ・背景画像（bg.gif） 後、透過png画像をIE6でも表示させるために、 「アルファ画像を扱うalphafilter.jsライブラリ」 を利用します。 ソース css#kadomaru { background:url(images/bg.gif); width:201px; } #kadomaruContents { border-left:5px solid #07b6ff; border-right:5px solid #07b6ff; } ul { color:#ffffff; padding:0 0 0 15px; } html<div id="kadomaru"> <div><img src="images/bg_top.png" width="201" height="16"
ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js)
ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js) はいこんにちは！今回はこことかここみたいなサイトのページ表示エフェクトを簡単に実現するプラグインをつくってみたのでそのご紹介です！ Internet Explorer 6+, Safari 5, Google Chrome 8, Firefox 3.6, Opera 11 で動作確認済み。不具合や動作報告などありましたらコメント欄でご連絡ドーゾ。 動作デモ 画像ではお伝えしにくいので、映像で。最初の 20 秒までがプラグインのデモになります。 実際のデモサイトはこちら 特徴 簡単な記述でリッチなページ表示演出ができます。また、カスタムデータ属性を使って要素ごとにアニメーションを変えたりインターバル・ディレイを指定して表示のタイミングを制御することも可能
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
How to Create Infographics in Adobe Illustrator
Step 1 The work with infographics always involves information search and data processing in the first phase of your project. I use the internet statistics in this tutorial. The first graph, which we create, will show a number of internet users, social networks, mobile subscribers and total population (source: slideshare.net). All that I listed above is called categories, and numbers which correspo
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
Mountain Lion 以前を搭載する別の Mac にデータを移動する方法
重要：この記事の手順は、OS X Lion または Mountain Lion に移行する場合に適用されます。それより新しいバージョンの OS X に移行する場合は、こちらの記事を参照してください。Windows 搭載パソコンから Mac に移行する場合は、Windows 移行アシスタントを使います。 この記事の手順は移行アシスタントについて説明していますが、この手順は設定アシスタントを使って移行する場合にも適用できます。新しい Mac をはじめて起動すると、設定アシスタントが開きます。設定アシスタントの手順に従えば、簡単にネットワーク情報を入力したり、ユーザアカウント設定したりできます。新しい Mac をはじめて起動した際に設定アシスタントを使って情報を転送しない場合は、この記事の手順に従って、後で移行アシスタントを使って転送することもできます。 Mac ノートブックをお使いの場合は、電
Snow Leopard(MacBook Pro)からLion(MacBook Air)へ移行の手順メモ
新しく買ったMacBook Air Mid2011 への移行手順。総所要時間：4時間くらい ・Snow Leopard(MacBook Pro)側： 1・Lion移行アシスタントを入れる 2・外付けHDDのTime Machine（Time Capsule）に最新バックアップを作成する。Time Machine使ってなければ現状Macから移行でも可。 ・Lion(MacBook Air)側： 1・ひとまずAir起動させてセットアップウィザードの流れに沿っていろいろ入力。 アカウント名は現状使ってるMacBook Proと同一のもの。移行アシスタントはあとで実行するを選択。 2・りんごマークからLionのソフトウェアアップデート開始。 アップデート適用で再起動。回線速度にもよるんだろうけど２時間くらいかかった。 3・システム環境設定 → アカウントを起動 変更するにはカギをクリックのカギアイ
Welcome to Multimedia Presentation
ホームページ作成アプリとして、BiNDが追加されました Welcome to Multimedia Presentation
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作が爆速化！Photoshopのおすすめプラグイン16選
最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ
cmmntr.com
How to Create a Promotional Website Infographic in Adobe Illustrator | Envato Tuts+
How to Create Subtle Patterns for Web Projects in Illustrator CS6 | Envato Tuts+
Quick Tip: How to Create Glowing Progress Bars | Envato Tuts+
Sebastian Schwartz - Composer