Webページのグリッドを決める時、全体の幅、カラムの数、溝のサイズ、両端のスペースを元に、グリッドのパターンを提示してくれるオンラインサービスを紹介します。 1px端数がでてしまうといった面倒な計算とは、これでさようならです。
![Webページのグリッドを計算する時に便利!全体幅・カラム数・溝の組み合わせのパターンを提示してくれる -Grid.Guide](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a49207e4b4f1624d517ffe9908f179376f21627/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016092001-01.png)
「Radiobox.css」と「Checkbox.css」は、それぞれラジオボタンとチェックボックスの選択時にアニメーションを加えることができるスタイルシートです。 全体的にこれどんな場面で使うのっていう感じのエフェクトが多いので案件などではあまり使われなそうですが、ちょっと遊び心いれたいとか変わったアニメーションを付けたい時には便利かもしれません。 Radiobox.css 「Radiobox.css」はラジオボタン選択時にアニメーションを付けることができるCSSで、小刻みに動くTremolo、跳ねるBoing、回転するWheelなど全12種類のアニメーションがあります。 アニメーションの適用は簡単で、該当のCSS(radiobox.min.css)を読み込み、あとは<input type="radio" />に特定のクラスを記述するだけです。 例えば、Boingエフェクトはクラスが.r
AutoprefixerはCan I Use のブラウザ・サポート情報とStatCounterの全世界のブラウザ利用状況データを参照してBrowserslistの記述に当てはまるブラウザを抽出します。 対象ブラウザ一覧を簡単に確認する方法 Browserslistの記述を入力すると対象となるブラウザ一覧を表示してくれるBrowserl.ist という便利なサイトがあって、2016年9月7日現在、デフォルトの記述で対象になるブラウザは以下になります。 Mobile Browsers Chrome for Android 51 UC Browser for Android 9.9 Android Browser 4.4, 4.4.3-4.4.4 IE Mobile 11, 10 iOS Safari 9.3, 9.0-9.2 Opera Mini all Samsung Internet 4
カラーピッカーはいろいろありますが、これは決定版では? というくらい便利なOS X用の無料ツールを紹介します。 カラーピッカーとしてはもちろん、カラーの管理、カラーパレットの作成、画像からカラーの抽出、グラデーションの作成・コード生成など、PhotoshopやSketchをはじめとする他のアプリで作業する時に役立つ強力なカラーツールです。
先日コンピュータ将棋選手権で脚光を浴びた将棋ソフト、技巧のソース・バイナリがgithubにて公開されました。 将棋ソフト「技巧」 githubサイト 技巧は動作環境の条件も緩く、Max OS X環境でも容易に実行可能とのことなので早速使用してみました。 その時のtipsを以下にまとめておきます。 本記事で用いたMac環境 MacBook Air(Mid 2012:Intel Core i5 1.8GHz、DDR3 4GB) Mac OS X 10.11.5(El Capitan) gcc 4.9.3 Homebrew 0.9.9 Git 2.8.0 Java for Mac OS X !!!注意!!! 本記事ではターミナル上(MacOSに標準インストールされているターミナル.appなど)にて Unixコマンドを使用します。予めご了承ください。 HomebrewとGitのインストール //
イントロ 最近、職場の後輩に将棋で負けたことをきっかけに、将棋がマイブーム。 apery って? 将棋プログラムの一種。2014 年の世界大会で優勝したとかなんとか。 一部界隈では、あの ponanza 先生をも凌ぐとかなんとか言われている?らしく、とにかくすごく強いソフト。 Apery - Wikipedia で、そんな世界大会で優勝した将棋エンジンが github 公開されているのを知ったので、compile してみました。 HiraokaTakuya/apery そのままやると... すさまじい警告が出て、失敗する $ make 24 warnings generated. g++ -std=c++11 -fno-exceptions -fno-rtti -Wextra -Ofast -MMD -MP -fopenmp -march=native -o ../obj/common.o
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量(1.9kb gzip)のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張(Pesticide for Chrome) スタイルシートファイル(外部CSS・CDNで利用可) 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
Flexboxを使っていて「なんでこの幅になるんだろう?」と疑問に思ったことはありませんか? 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜! まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow(またはf
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ(正常化)するノーマライズCSS。 定番のスタイルシートから、最近リリースされたものまで、リセットCSSとノーマライズCSSを紹介します。 イラスト: Girls Design Materials 定番も最近のWeb制作にあうようバージョンアップされており、Web制作者は要チェックです! 下2つは通常のリセットとは異なるアプローチのスタイルシートです。 ress Normalize.css sanitize.css Marx Reset CSS minireset.css css-wipe Cleanslate Unreset CSS ress -GitHub normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、ブラウザごとに異なるH
ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。 今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。 紹介の前に フォント選びの基準とコツ ロゴ用と文章用の区別 Googleフォントは重い? 万能フォント 技術系 ロゴ用 文章用 美容・ファッション系 ロゴ用 文章用 飲食・料理系 ロゴ用 文章用 スポーツ系 ロゴ用 学問系 ロゴ用 文章用 生活系 ロゴ用 文章用 Googleフォントの導入方法解説 Googleフォントにアクセス 使用したいフォントをコレクションに追加する 選んだフォントの詳細情報を指定 WebページにGoogleフォントを導入 CSSファイルにコピペし、Googleフォントを実装! 紹介の前に フォント選びの基準
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
正規表現を書く際、どのようなパターンにマッチさせるか、どこをキャプチャするかという視点で記述することはあっても、パフォーマンスを考えて記述するというのはある程度知っている人でなければ忘れがちな視点です。 このエントリでは、バックトラックをメインに正規表現がパフォーマンスに及ぼす挙動について見ていきます。 対象の正規表現エンジン ここでは、従来型 NFA を対象としています。具体的には、PHP の preg_ 関数で利用している PCRE や mb_ereg 関数が利用している鬼車です。Perl や Ruby、Python、Java、.NET でも従来型 NFA を採用しているので、似た挙動となるでしょう。 「従来型 NFA」や「バックトラック」などの用語については、「詳説 正規表現 第3版」のものを用いています。 バックトラックによるマッチ探査 正規表現エンジンでは、指定された文字列が、パ
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 (追記) ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
注)本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題(Safari) Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定(デフォ値なので、指定がなければそのままでOK) Safari10にて修正済み(つまり、SierraとiOS 10以降では対応不要) 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
日本語の記事コンテンツの読みやすさ、SEOの内部対策、Microdata構造化マークアップ、Web集客に必要な機能を誰でも簡単にカスマイズできるよう作成されたWordPressの日本製無料テーマを紹介します。 WordPress 無料テーマ Emanon Free Emanon Freeの特徴 Emanon Freeのダウンロードとインストール Emanon Freeの特徴 Emanonは日本人の制作者が作成した日本のコンテンツのためのWordPressのテーマファイルで、集客に特化された特徴を備えています。 モバイルフレンドリーテスト(Google)に合格 SEO内部対策ずみhtml構造 Microdata構造化マークアップに対応 スマホ、タブレットに対応したレスポンシブデザイン サイト訪問者のコンタクト情報を収集するCTA、ランディングページ機能付き ※ランディングページ機能は有料版の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く