最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ
ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるので、今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 ウェブデザインを魅力的に仕上げる、HTML/CSSホバーエフェクトまとめ HTML/CSS/JS をクリックすると、各コードやスタイリングを確認でき、Result で実際のエフェクトを試すことができます。Return をクリックすると、読み込みを再度行います。 マウスホバーで、タイトルをモザイク状に表示。 See the
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
THE ORTHODOX WORKS | Graphic and Web Designer NAGANO JAPAN
2017.06.05 Mon SVGでハンドライティングアニメーションを実装する 文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe… 2017.04.04 Tue CSSアニメーション(transition)で起こるバブリングの原因と対策 正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C… 2017.03.15 Wed WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano 2017年3
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
『PostCSSを使ったモダンCSS開発環境』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2015年度新卒入社の森下(@morishitter)です。 今は755のフルリニューアルに向けて、Webフロントエンドの開発を担当しています。 その傍らでOSS活動も行っており、本エントリーで紹介するPostCSSは、GitHub上で僕がメンバーの1人でもあるプロジェクトです。 PostCSSとは PostCSSはNode.js製のCSSのパーサーで、そのAST(パース結果のJSオブジェクト)を操作するための便利なAPIを提供しています。PostCSS自体が提供する機能はたったこれだけで、非常に小さいライブラリです。 ASTを操作し、
brにdisplay:none;を指定する
タイトルの通りですが、brタグにdisplay:none;を指定するという発想が無かったのでメモ。 レスポンシブサイトで改行を消したりしたいときに便利そうです。 サンプルコード HTML <p>ここも今もっともその発展ようというのの日がするありた。<br /> 何とも今に沙汰ようはやはりその相当なんまでに来らていですがは唱道云えでるから、一応にはなりですですだだ。<br /> 陰よりありなけれ事はしかるに十月がすでにたでう。</p> CSS @media screen and (max-width: 640px) { br { display: none; } } brにdisplay:none;を指定するデモページ 【参考サイト】 検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 – KAYAC Front Engineer Bl
CSSをシンプルに書くことができるLESS使ってみた
Posted: 2011.12.13 / Category: HTML&CSS / Tag: LESS CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a:hove
Stylus を使ってみる - アカベコマイリ
素の CSS を書くのが辛くなってきた。例えばスコープ制御のために子孫セレクタを利用すると以下のように冗長な記述が必要となり視認性が大幅に低下する。 .l-content .explorer .folder-tree ul { margin: .5em; padding: 0 0 0 2em; list-style: none; } .l-content .explorer .folder-tree li { padding: .2em 0; white-space: nowrap; } 変数や演算も扱いにくい。CSS Variables や calc という手段もあるけど記法が直感的ではないと感じる。 こうした問題を解決するため Less や Sass (SCSS)、Stylus といった CSS プリプロセッサが登場してそれなりに普及しているようだ。いままで存在は知っていたけれどコンパ
CSSだけでシンプルなデザインのパンくずリストのコード | Glow-Factory
今回は、CSSだけで作るシンプルなデザインのパンくずリストのコードのご紹介です。 意外とパンくずリストのデザインってどうなんにしようかなーって迷ういながらもシンプルなデザインに落ち着いてしまう僕ですwww パンくずリストって何?って言う方にざっくりと説明すると、ご自身のウェブサイトで現在見ているページの位置を示すナビゲーションのようなものです。 基本的にユーザーが、現在位置を見失わないようにユーザービリティの向上を目的としますし。 よくネットショップなんかを利用されている方は、見かけるのではないでしょうか？ また、名前の【パンくずリスト】という名前の由来なのですが、僕も最初はなんで、【パンくず?】と思っていましたが、下記のような由来があるようです。 「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソー
box-sizing は魔法のコトバ！もうpaddingやborderを含めた幅の計算はヤメヤメ | Cappee Design
あとで読みたい人は… CSS3 の box-sizing プロパティがかなり便利です。 あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。 CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。 「あれ、なんで崩れるんだろ？」 「padding と border 分マイナスするの忘れてた～」 ってのがよくありました。（今もたまに。。） それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。 これはものすごい効率化になりますね！ box-sizing の書き方 box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。 指定できるのはこちらの２種類です。 content-box … 【デフォルト値】padding と border を要素の幅と高さに含
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
CSSがサイトの読込速度の遅延原因かも？見直すところは大きく3つ！ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
CSSがサイトの読込速度の遅延原因かも？見直すところは大きく3つ！ 2015.01.23 2020.12.17 技術 CSSもページ表示速度を落とす要因になります 「なんだか自分のサイトのページの表示速度が遅いなあ…」そうしたお悩みをお持ちの方は多いのではないでしょうか。 もしかしたら、CSSが原因の1つになっているのかも？CSSを見直す良い機会かもしれません。 ブラウザはページ内容を表示する時レンダリングを行っています。 レンダリングとは、データ（今回の場合だとHTML）に書かれている情報を解析し、その通りにディスプレイに表示させることを指します。 外部CSSはこのレンダリングをブロックしてしまうリソースの1つで、運用方法によっては、これが原因でページ内容を表示するのが遅くなることがあり得ます。 どこを、どうやって改善するといい？ CSSをインライン化する セレクタを見直す HTTPリク
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
http://all-web.org/ala/dao/
WP-D Fes #1 Megane Fes in GMO
font-awesome-animation
CODEPREP
