CSSだけで作るシンプルなニュースティッカー
Result メディアサイト等でまだ見かけるやつ。 :hoverで一時停止するようにしています。 css@keyframes ticker {/*アニメーション設定。右から左に流す、を繰り返す*/ 0% { transform: translate(0, 0); visibility: visible; } 100% { transform: translate(-100%, 0); } } .ticker-wrap {/*ティッカーを包括している親要素*/ position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 2rem; background-color: rgba(0, 0, 0, 0.9); padding-left: 100%; box-sizing: content-box; } .ticker-wr
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
leanModal
Strengths perfect for hidden page content uber light at just over 1kb (minified) flexible width & height image free multiple instances on one page great for login, sign up & alert panels, etc. How To Use Step 1: together with JQuery, include jquery.leanModal.min.js in your page, thusly: <script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script> Step 2: rather than call another
[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。 Split Screen Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。 Pure CSS Masonry Layout Masonryは、カードやパネルをレンガ状に敷き詰めて
![[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/34869b288b480daff8b08b01332b82fbf33502fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017070301.png)
Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works
Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。 How Flexbox works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの基本「display: flex;」 flexコンテナの主軸の方向「flex-direction」 flexコンテナの主軸に沿って配置「justify-content」 flexコンテナの交差軸に沿って配置「align-items」 flexアイテムの整列「align-self」 最後に Flexboxの基本「display: flex;」 まずは、div要素を配置した例を見てください。 「displa
[CSS]レスポンシブ対応、高さ可変のアコーディオンをピュアCSSで実装するテクニック | コリス
* { box-sizing: border-box; } .block > div{ margin: 0; padding: 0; } .block { max-width: 400px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: white; overflow: hidden; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px; border-bottom: 1px solid white; background-color:
![[CSS]レスポンシブ対応、高さ可変のアコーディオンをピュアCSSで実装するテクニック | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed40b33996ad99527e2885410af7d472ef9e6b3b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016110708.png)
Budou - 機械学習を用いた日本語改行問題へのソリューション - ウェブ雑記
こんにちは！ 日本語のウェブサイトを作っていると、日本語特有の問題にぶちあたることがありますよね。 その中でも今回着目したいのは、日本語改行問題。最近、この問題を解決するためのライブラリを公開したので、紹介します。 github.com そもそも日本語改行問題とは何か ウェブブラウザで日本語で書かれたウェブサイトを見ていると、ときどき文章が変なところで改行されているのを目にすることがありますよね。 たとえば、こんなかんじ。 「ソリューション」が「ソリューショ」と「ン」に分かれてしまっています。読みにくいですね。 英語では単語がスペースによって区切られますが、日本語や中国語などのアジア圏の言語では単語がスペースで区切られないことが多いです。 そのため、英語では単語の途中で改行されることは通常ありませんが、日本語では単語の途中で改行されることがよくあります。 本文ならともかく、見出しやキャッチ
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
Go言語と暗号技術（AESからTLS）
最近マスタリングTCP/IP SSL/TLS編や暗号技術入門を読んでいた．理解を深めるためにGo言語で標準のcryptoパッケージを触り/実装を読みながら読んだ． cryptoパッケージは他の標準パッケージと同様に素晴らしい．Go言語にはどのような暗号化手法が実装されているのか実例を含めてざっとまとめる．なお本文に書ききれなかったものを含め全ての実装例はtcnksm/go-cryptoにある． 共通鍵暗号 まずは共通鍵暗号をみる．共通鍵暗号は暗号化と復号化に同じ鍵を用いる暗号化方式である．共通鍵暗号はブロック暗号とストリーム暗号の2種類に分けることができる．ブロック暗号は特定の長さ単位で暗号化を行う方式であり，ストリーム暗号はデータの流れを順次処理していく方式である． Go言語にはブロック暗号としてDES（Data Encryption Standard），DESを繰り返すtriple-D
これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block
PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。 外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。 HTML Block HTML Blockの特徴 HTML Blockのダウンロードとインストール HTML Blockの使い方 HTML Blockの特徴 HTML Blockは、Photoshop CC2015 for OS Xのみ対応で、Webkitエンジンを利用してHTMLとCSSのコードでエレメントを作成できます。 ↓左パネルがエディタに見えるかもしれませんが、Photoshop上でのHTML Blockです。
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
HTTP2 時代のサーバサイドアーキテクチャ考察 - Block Rockin’ Codes
update 色々と twitter で議論が起こったのでまとめて貼っておきます。 togetter.com みなさんありがとうございました。 intro HTTP2 の RFC 化も目前ということで、そろそろ実際に HTTP2 を導入していくにあたってサーバサイドの構成についても、具体的にどう変わっていくかという点を考え始めていく必要があります。 そんな話を @koichik さんとしていたら、色々と考えが膨らんだのでメモしておきます。 前提 今回は、中規模のサービスを想定し、特に HTTP2 のサーバプッシュを踏まえた上でのコンテンツ配信などに、どういう構成が考えられるかを考えていきます。 また、本エントリ内では独自に以下の表記を採用します。 HTTP/1.1 = HTTP/1.1 (平文) HTTP/2 = HTTP/2 (平文) HTTPS/1.1 = HTTP/1.1 over
Creating Intrinsic Ratios for Video
Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block. With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See exa
IO負荷の高いプロセスを特定する方法 - weblog of key_amb
カーネルの I/O Accounting 機能を利用する Linuxでカーネルのバージョンが 2.6.20 以降であれば、IO Accounting機能を使うとよい。 これが有効になっていれば、プロセス毎のI/O統計情報が /proc/${pid}/io に出力される。 …が、全プロセスについて、これを自前で分析するのは疲れるので、pidstat や dstat のようなツールを使うのが楽。 参考 IO Accounting 機能で I/O 負荷の高いプロセスを特定 :: drk7jp dstatの万能感がハンパない - (ひ)メモ iodump 2.6.19 以前のカーネルではどうすればいいか。 例えば、iodump というツールがある。 これは以前 Maatkit に含まれていた Perl スクリプトである。 使い方としては、以下の通り。 # download iodump wget
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
