Team TomoriNaoのサイトの秘密
こちらは友利奈緒 Advent Calendar 2016 - Adventar 17日目の記事です。 TomoriNao 昨年のこの時期、ふとした思いつきからTeam TomoriNaoというホワイトハッカー（死語？）チームが生まれました。 皆さんもご覧に入れたことがあると思いますが、トップの画像のようなチームロゴを掲げています。 このトップの画像はロゴとして用意した公式のものではなく、Team TomoriNaoのWebサイトのスクリーンキャプチャです。 Team TomoriNao Team TomoriNaoのWebサイトは、JavaScript を使用せずにいろいろなアニメーションやアクションを実装しているのをご存知ですか？ このちょっとした仕掛けを今回は紹介していきたいと思います。 目次 Open 目次 まとめ まとめ 悪意のある広告にJavaScriptが利用されていたり、J
HTMLで日本語を書きたいプログラマーの永遠の悩みを解決するCSS3のSegment Break Transformation Rules - pixiv inside [archive]
この記事はピクシブ株式会社 Advent Calendar 2015 の9日目の記事です。 qiita.com こんにちは。アルバイトのhakatashiです。以前の小説縦書き機能についてのpostではたくさんの拡散を頂きありがとうございました。おかげで褒賞のAmazonギフト券3000円を入手できました。ウハウハ。そして拡散に協力してくれた後輩へのおごり代に消えました。どうやら世の中は上手くできているようです。 今回は、pixivにはあまり関係ないですが、普段携わっている小説関係の業務にかこつけて、CSS3のあまり知られていない新機能、Segment Break Transformation Rules と、それを今すぐ使うための自作ライブラリを紹介します。前回と違ってがっつりエンジニア向けの内容となっているので、まったりと書いていきます。 HTMLで日本語を書きたい人間の一般的ストーリ
![HTMLで日本語を書きたいプログラマーの永遠の悩みを解決するCSS3のSegment Break Transformation Rules - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/af1701e49a411daf951694ae6b92419042ce094f/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhakatashi%2F20151207%2F20151207023544.png)
flatuicolorpicker : Best Flat Colors UI Design
Flatuicolorpicker gives you the perfect colors for Flat Design
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
CSSをPHPで効率良く書く方法 - kojika17
とあるIEのバグを調べていたら、Lessに近い形でCSSをPHPで書けることを知ったのでメモ。 まずHTMLのlink要素のファイル名を修正することから始めます。ここでのCSSファイル名は仮にdummy.phpとします。 <link rel="stylesheet" type="text/css" href="dummy.php" /> 外部PHPを外部CSSとして認識させる。 拡張子がPHPの場合、UAに対しContent-Typeのメディアタイプにtext/htmlとして返してしまいます。 これを正常にメディアタイプをtext/cssとして返してやれば、拡張子がPHPでもCSSとして認識してくれます。 <?php header('Content-Type: text/css; charset=utf-8'); ?> @charset "UTF-8"; この記述のみでCSS設定完了です。
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
指定したサイトのCSSを徹底的に解析してくれるサイト「CSS Stats」 | ライフハッカー・ジャパン
PayPayカードのメリット・デメリット|怖いと言われる理由と評判レビュー。ゴールドと一般どっちがおすすめ?
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
とほほのスタイルシート入門
CSSリファレンス トップ > CSSリファレンス [ABC順] 概要 CSS入門 リンク サンプル 表記について CSS3関連規約 セレクタ * { ... } E { ... } ns|E { ... } E, F { ... } E.class E#id E F { ... } E > F { ... } E + F { ... } E ~ F { ... } E || F { ... } [attr] [ns|attr] [attr="val"] [attr~="val"] [attr|="val"] [attr^="val"] [attr$="val"] [attr*="val"] :any-link :link :visited :local-link :target :target-within :scope :hover :active :focus :focus-visi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
Ultimate CSS Gradient Generator from ColorZilla
Framework7 - Full Featured HTML Framework For Building iOS7 Apps
html5-memo.com