HTML/CSSで絵を描く猛者が作品を公開中
表計算ソフトのExcelでお絵描きする「Excelのミケランジェロ」のように、ソフトウェアの可能性を最大限に広げるアーティストが存在します。元Kickstarterの最高技術責任者アンディ・バイオ氏が、HTML/CSSの手書きコードだけで美しい絵を作り出す職人の作品をTwitterで紹介しています。 Diana Smith | Software Engineer | cyanharlow @ GitHub http://diana-adrianne.com/ バイオ氏がCSSで作られたというイラストをTwitterで紹介しました。 This stunning illustration by @cyanharlow is pure HTML/CSS. Every element was typed by hand, drawing with only a text editor and Ch
Chrome で cursor: pointer を !important しても効かない問題。原因は Photoshop にあり
Chrome で cursor: pointer を !important しても効かない問題。原因は Photoshop にあり ブログのリンク（aタグ）にマウスカーソルをホバーするとデフォルトの矢印のアイコンになっているのに気づきました。通常であれば、指アイコンになりますよね。（まぁスマホはアレですが。） 何かスタイルを弄った時におかしくなったのか、はたまたプラグインのアップデートなどでおかしくなったのか、いずれにせよサクッと修正する予定が全然カーソルが指アイコンにならず。 最終的にcursor: pointer !important;としても変わらないので、調べてみたところ、Photoshop を立ち上げていると、ブラウザのカーソルがデフォルトから変わらないバグがあるらしいことがわかりました。 cursor が変わらないバグが発生した私の環境 macOS Sierra 10.12.3
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
Sublime Text 3 で CSScomb JS が動かない。設定の node.js のパスを書き換える。
Sublime Text 3 で CSScomb JS が動かない。設定の node.js のパスを書き換える。 題名の通りなんですけど、CSScomb JS をインストールしただけでは Shift + control + c しても CSS が整形されませんでした。 Node.jsが必要なSublimeTextのプラグインで、Node.jsのパスが変わってしまったときの対処法 – Qiitaを見て基本は解決するんだと思うんですけども、私は一瞬躓いたのでメモ。 ※ Build 3126 Nodo.js がインストールされてるか確認とパスの書き換え $ which node とすると /Users/yuichon/.nvm/versions/node/v6.5.0/bin/node ってなったので Preferences > Package Settings > CSScomb > Sett
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
CSSの読み込みを遅延させるJavaScriptコード
JavaScriptで外部ファイルの読み込みを遅延させる PageSpeed Insightsでサイトの速度チェックをすると、次のような提案が出てくることがあります。 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する これは、headで読み込んだJavaScriptやCSSのファイルがコンテンツの表示を遅らせているためです。 ファーストビューに影響が出ないCSSは、コンテンツの描画後に読み込ませた方が良いでしょう。 ということで、外部CSSを読み込むタイミングを遅らせて、コンテンツの表示を速くしました。 当サイトではメインのCSSをインライン化しているのですが、外部ファイルも読み込んでいます。 使っているのは、Google FontsとFont AwesomeのCSSです。 導入方法 あらかじめGoogle FontsとFont A
Animsition
Overlay Mode InstallationStep 1: Link required files<!-- animsition.css --> <link rel="stylesheet" href="../dist/css/animsition.min.css"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- animsition.js --> <script src="../dist/js/animsition.min.js"></script> Step 2: HTML markup<body> <div class="animsition"> <a href="./page1" class="anim
Creative Button Styles
Note that on mobile devices the effects might not all work as intended. Button Button Button Button Button Button Button Button Button Button Button Button Button Button Yes No Add to cart Bookmark Favorite Settings Send data Continue Return Continue Return Add to cart Delete Settings Add to cart Delete Settings Button Button Button Button Button Button Button Button Button Button Button Button Cl
Animated Books with CSS 3D Transforms - Demo 1
Download CSS Ninja By Marco Barría for Codrops Tomatillo water chestnut mustard cabbage yarrow sierra leone bologi. Watercress green bean groundnut earthnut pea dandelion radicchio. Download Storm JS By Marco Barría for Codrops Leek winter purslane sierra leone bologi caulie tomatillo soko turnip greens bunya nuts silver beet melon green bean celery. Gram kakadu plum wakame. Download Zen HTML5 By
様々なハンバーガーメニューのCSSアニメーションが実装可能な『Hamburgers』 | バンクーバーのうぇぶ屋
様々な議論がされているハンバーガーメニューですが、ハンバーガーメニューを実装しているサービスやアプリはまだまだ多いので、自分も使ってみようというデザイナーさんもまだまだ多いことかと思います。 そこで、今日は様々なハンバーガーメニューのCSSアニメーションが実装可能な『Hamburgers』をご紹介。アニメーションの勉強的に見てみるのも良いかと思いますので、是非ご覧くださいー。 Hamburgers by Jonathan Suh ページ無いのUsageより使い方は説明されてありますが、Scssファイルも用意されているのが嬉しいですね。モジュールとして必要な物をチョイスして実装することも可能でしょうし、細かなカスタマイズも用意に行えそうです。 対応ブラウザとしては、IE9以前と、Opera Mini系はサポートされていませんが、CSS3 3D Transformsが実装されているブラウザだと
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirect
https://mizchi-sandbox.github.io/grid-generator/
CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ
モダン日本語フォント指定