Next.js 2.0リリースMark Fussell氏とYaron Schneider氏とDaprを知ろう 本日のエピソードでは、Thomas Betts氏がMark Fussell氏とYaron Schneider氏に、分散アプリケーション・ランタイム（Dapr）について話を聞いた。最新のInfoQ Architecture and Design Trends Reportでは、Daprはポータビリティとクラウドアプリケーションのための設計というアーリーアダプターのアイデアの一部となっている。
CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で
第18回 飛び出す数字のアニメーション：CSS3アニメーションでつくるインターフェイス表現｜gihyo.jp … 技術評論社
今回のお題は、メニュー項目にポインタを重ねると数字が飛び出してくるバーだ（サンプル1）。「Hop Over Notification Badge」のデザインとアニメーションにもとづいて、コードはわかりやすく組み立て直した。ちょっとした動きとはいえ、アニメーションを魅力的に見せる工夫がある。あまり手が混みすぎていないところも好ましい。 サンプル1 CSS3: Hop over notification badge メニューバーのインタラクション <body>要素に加えるメニューバーは、つぎのようにul要素（class属性"menu"）のリストで組み立てる。<li>要素に含めた<a>要素には、data-グローバル属性（data-bubble）で表示する数字が定めてある。<a>要素にひとつだけclass属性が与えてあるのは、あとで数字の背景色を変えるためだ。なおいつもどおり、-prefix
第17回 立体的なナビゲーションバーのアニメーション | gihyo.jp
今回のお題は、ボタンが立体的に並んだナビゲーションバーだ（サンプル1）。マウスポインタを重ねると、ボタンが飛び出す。「Navigation Bar by Jan Kaděra」のデザインとアニメーションをもとに、わかりやすく組み立て直した。3次元の動きで、ボタンの数も多い。少しやっかいそうに感じたかもしれない。ところが、思いのほかコードはたやすい。 サンプル1 CSS3: 3D style navigation bar 平面的なナビゲーションバー まずは<head>要素にいくつか仕込みをしておこう。ボタンのアイコンにはFont Awesomeを使うので、つぎのようにCDNを読み込む（第15回の「アイコンWebフォントを使う」参照）。おなじみの-prefix-freeも加える。そして、今回はリセットCSSを用いた。ブラウザによって異なるデフォルトをリセットすることで、表現が揃えられ
第16回 並んで弾けるアニメーション | gihyo.jp
今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加える（サンプル1）。「Smooth Pulse」のデザインとアニメーションをもとに、わかりやすく組み立て直した。アニメーションの工夫があるものの、技術的にはむずかしくない。ただ、要素の数だけアニメーションのコードが増える。jsdo.itのスペースも考え合わせて、要素の数は4つに減らした。 サンプル1 CSS3: Smooth Pulse 水平に並べた要素に静的なスタイルを割り当てる アニメーションを加える前の、4つの要素の組み立てと静的なスタイルは、後に掲げるコード1のとおりだ。border-radiusプロパティの値を50%にして、要素は円形にした。そして、色は緑系（#33ffff）から青系（#3399ff）まで、段階的に変えている（図1）。アニメーションは、円形の<a>要素（class属性"circl
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
ボタン画像を使わずにCSS3でふんわり光るロールオーバーを作ってみる | Webデザインモア(Web Design More)
しばらく更新が滞っておりましたが、久々に更新再開致します。さて、各ブラウザも HTML5 や CSS3 に対する対応が進んできていて、大手企業のウェブサイトなどでも積極的にこれらを取り入れる傾向が強まりつつあります。そんな中、CSS3 を敬遠してきた方々が気軽に入っていけるコンテンツを書けたらと以前から思っており、今回はその初回としてロールオーバーを題材にして CSS3 に軽く触れてみたいと思っております。 CSS でふんわり光るロールオーバーを作る まずは、ボタンを div 要素で普通にコーディングしてみる CSS でボタンをコーディングしてみる CSS3 を使って、まずは輪郭を角丸にしてみる ボタンに影をつけてみる 文字に影をつけてみる リンクのテキストの前に ≫（矢印）をつけてみる マウス hover 時にボタンの光を強めてみる マウス hover 時に文字の光を強めてみる マウス
第8回 マウスポインタを重ねたテキストのアニメーション（1） | gihyo.jp
今回はお題として、マウスポインタを重ねたときのテキストのアニメーションを取り上げたい。「Inspiration for Text Styles and Hover Effects」を参考に、3つほどつくってみた（サンプル1）。もちろん、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んである。ただ、3つすべてを解説しようとすると長くなりそうだ。そこで、サンプル1の2つ目については次回に送り、今回はひとつ目と3つ目を説明しよう。 サンプル1 CSS3: Text styles and hover effects 2つの項目の静的なデザイン <body>要素には、2つの項目をつぎのようなコードで構成した。項目ごとの<div>要素（class属性"item"）にリンクのための<a>要素（class属性"link"）を含め、テキストは<span>要素で加えている。アニメーションは、項
マイクロソフト、オープンソースの「Visual Studio Code」最新版1.2リリース。自動トリム、CSS変数対応、エディタ機能“Monaco”をVS Codeから独立
マイクロソフト、オープンソースの「Visual Studio Code」最新版1.2リリース。自動トリム、CSS変数対応、エディタ機能“Monaco”をVS Codeから独立 マイクロソフトはコードを書くことに特化したオープンソースの開発ツール「Visual Studio Code」の最新版となるバージョン1.2のリリースを発表しました。 Visual Studio Codeはコードエディタ機能に加え、プログラミング言語の構文や変数などを判別しつつ補完を行ってくれるIntelliSenseやコードの整形、文法チェック（Lint）、ブレークポイントの設定やステップ実行、そして拡張機能などを備えています。 バージョン1.2では、空白の自動トリム、サーチ文字列の同時選択と修正、タブのサポートに向けたコードの改善、キー割当ての改善、エディタ部分の独立性の向上などを行っています。 自動トリム、検索文
第7回 追加情報をアニメーションで表示するボタン | gihyo.jp
今回のお題は、アニメーションするボタンだ。マウスポインタを重ねると追加情報が現れる（サンプル1）。「Animated Buttons」の表現を参考にした。例によって、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んである。 サンプル1 CSS3: Animatied buttons ボタンの静的なデザイン <body>要素に書くコードは以下のように構成した。各ボタンを<a>要素（class属性"btn"）として<div>要素（class属性"container"）の中に納めた。ボタンの<a>要素は、それぞれ3つの<span>要素（class属性"btn-text"と"btn-slide-text"および"btn-icon"）をパーツとして含んでいる（図1）。3つめの<span>要素の中には、さらに空の<span>要素が加えてあり、CSSで矢印を背景画像として与える。 図
第5回 画像にポインタを重ねるとキャプションが現れる | gihyo.jp
今回のお題は、画像にキャプションを示すアニメーションだ。マウスポインタを画像に重ねると説明書きが現れる（サンプル1）。画像にもちょっとしたアニメーションが加えてある。用いる設定は、さほど目新しいものではない。組み合わせや細かな調整を加えてつくり上げた表現だ。 サンプル1 CSS3: Hover effect of an image and a caption キャプションを加えた画像の静的スタイル <body>要素に書くコードはつぎのように構成した。画像の<img>要素に続けて<div>要素（class属性"mask"）を置き、<div>要素の中に、タイトルの<h3>要素（class属性"figure-title"）と説明書きの<div>要素（class属性"figure-caption"）を加えた。それらを<div>要素（class属性"figure"）でひとつにまとめ、さらに<di
第4回 3次元で垂直に回る立方体のメニュー | gihyo.jp
今回のお題も、前回と同じく項目を並べたメニューだ（サンプル1）。ただし、今度は3次元のアニメーションにした。マウスポインタをメニュー項目に重ねると、立方体のように垂直に回る。CSS3を使えば、このような3次元の表現もできてしまう。CodePenに公開された「CSS Cube Flip」を参考に、HTMLとCSSのコードの構成を改め、簡潔にした。 サンプル1 CSS3: Cube Flip メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。メニューは、つぎのように<ul>要素でリストとして組み立てる。メニュー項目を<li>要素（class属性"component"）とし、その中の<a>要素（class属性"face"）にテキストを加えた。そして、メニューの<ul>要素全体を、<div>要素（class属性"container"）で包んでいる。 <div cla
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
ちゃんとした C# プログラムを書けるようになる実践的な方法～ Visual Studio を使った 高品質・低コスト・保守性の高い開発慎一 古賀
cssnextを使って最新のcss syntaxで開発するのが良さそう
ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の
JavaFX CSS Reference Guide
Contents Introduction CSS and the JavaFX Scene Graph Scene, Parent and SubScene Stylesheets Naming Conventions CSS Public API Inheritance @ Rules Examples Understanding Parser Warnings Limitations Types inherit <boolean> <string> <number> & <integer> <size> <length> <percentage> <angle> <duration> <point> <color-stop> <uri> <effect> <font> <paint> <color> Stage javafx.stage PopupWindow Nodes javaf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
cow2design.com
http://codecrawl.com/javafx-designing-a-button-using-css/