Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
はてなブログのスマホ版でヘッダー・フッターを消すCSS(Proのみ) - littlewing
はてなブログはPRO版にすれば、PC版ははてなのヘッダーやフッターが非表示にできるのですが、 スマートフォン版はなぜか、設定の操作ではヘッダー・フッターを消すことができません。 それを消すにはCSSで以下のように書きます。 「ブログ開設」やら、「週刊はてなブログ」などの、余計(?)なリンクも結構多くて邪魔です。 管理画面を開いて * デザイン ＞ スマホアイコン ＞ ヘッダ ＞ タイトル下 に以下のHTMLを貼り付けます。 <style> /* ヘッダー表示有無 */ #globalheader-container { display:none; } /* フッター表示有無 */ #footer-menu { display:none; } /* 余白調整 */ #container { padding-top:0px; } /* プロフィールやはてな関連リンクを消す*/ .footer-
CSSのみでフルスクリーンの動画背景を実装する方法 - NxWorld
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。 古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 <body> <video autoplay loop poster="img.jpg"> <source src="movie.mp4" type="video/mp4"> </video> </body> body { margin: 0; padding: 0; background: url(img.jpg) center center fixed no-repeat; } video { position: fixed; top: 0; left: 0; min-width:
はてなのシンタックスハイライトに行番号をつける - 7cc@はてなブログ
追記: 2015/06/18 gistには行番号を追加しないようにした。 2014/07/03 1行のみかつシンタックスハイライト無しのpreでエラーがあった。 スーパーpre, markdownで表示したソースに行番号を表示する。 というかpreタグに行番号を表示させるだけなのでどこでも使えます。 olリストを追加するだけです。liの中にpreのそれぞれの行の内容を入れたほうが良いのかもしれませんが、DOM改変が多くなるのでしていません。 設置 管理 - デザイン - カスタマイズから 「フッタ」にJSを追加 「デザインCSS」にCSS追加 CSSは適当にいじってください。背景色つけるとgist貼り付けっぽくなります JS <scirpt defer> ;(function(document){ var pres = document.getElementsByTagName("pre"
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
サイトの CSS を自由に改造できるアドオン
Stylish（作者：Jason Barnabe様） - Firefox用アドオン こんにちは、さち です。 今回は、サイトの CSS を自由に改造することができる 便利な Firefox 用アドオン「Stylish」について まとめていきたいと思います。 サイトのCSSを変更できる サイトの見た目や使い勝手を簡単に変更できます。 サイトのデザインを変更するための記述方法は サイト作成時に使う CSS（スタイルシート） と同じなので CSS の経験がある人には分かりやすく使いやすいはず。 簡単に実際の使い方を追ってみましょう。 ニコアニのメニューのフォントサイズを変更してみます。 ニコアニのページを開いた状態で アドオンバーの「Stylishアイコン」→「新しいスタイルを書く」と進みます。 最後に CSS の適用範囲を選びます（今回は「このURL専用」を選択）。 調査（Ctrl + Shi
閲覧中のWebサイトのスタイルをサクサク変更して、表示をその場で確認出来るChromeエクステンション・Stylebot
DOM要素を選択してそこに当てられているスタイルを変更するだけなので、CSSを書く必要がありません。細かいことは出来ませんが、楽でいいのでは。 このように、サイドにセッティングボックスが出るのでマウスで要素を選択して変更するだけ。 要素を選択するには上記のアイコンをクリックすれば要素を選べるようになります。 なかなかに便利です。ご利用は以下よりどうぞ。 Stylebot
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
Case Study - Page Flip Effect from 20thingsilearned.com | web.dev
Case Study - Page Flip Effect from 20thingsilearned.com Stay organized with collections Save and categorize content based on your preferences. Introduction In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com). One of the key ideas behind this project was that it would best be
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please!
設定はすぐに反映され、左のパネルにスタイルシートが表示されます。 [ad#ad-2] HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: no
JavascriptとCSSを使った画像の回転（IEとChrome） - akitohの日記
chromeはHTML5のrotateを使って。 ieはfilterを使って。 CSSを切り替えるのだけれど、rotateは回転軸の座標がieとは違うので （ieがおかしい？）回転するときに、画像の位置を変更する必要がある。 ieとchrome以外も下のほうに書いたスタイルを適用すればできる。 ぐぐって見つけたサイトのjavascriptをほとんど使わせてもらっている。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> var width; var height; var
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
スマートフォンのtable要素をレスポンシブにできない問題 | 高橋文樹.com
この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。 ワンソースで済む Googleが推奨してる 駄目だなーと思うところはこんなです。 PHPのように動的なサイトの場合、非表示の要素でも演算対象になる 古いAndroidブラウザが怖い まあ、Webプログラミングの場合は携帯サイトを作っていたわけで、スマートフォンだからどうこうということでもないかなと思います。 ちなみにこのサイトは一応スマートフォンとPCで表示が変わりますが、CSSのメディアクエリはほとんど使ってなくて、bodyタグにデバイス種別のクラスをつけることで対処してます。Nginxのプロキシキャッシュはデバイスで分けてます。 さて、レ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap3日本語リファレンス
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
ブートストラップスターターテンプレート
Ultimate CSS Gradient Generator from ColorZilla