console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

Nexus 7 の Chrome でインターネットしてると、サイトによっては欧文フォントが等幅になっていることに気づいた。例えばこのようなサイト（とスクリーンショット）。 [](http://ascii.jp/) あとこれとか。 [](http://www.forest.impress.co.jp/docs/review/20140410_643367.html) ※ 適当にブラウジングしてた

Jqueryを使ってHTML5ドラッグ＆ドロップファイルアップロード ホームJavaScriptJqueryを使ってHTML5ドラッグ＆ドロップファイルアップロード 今のプロジェクトでドラッグ＆ドロップでブラウザファイルアップロードの機能がいる。 検索してみたらたくさん方法が出てきます。その中一番いいと思うのはJqueryを使ってファイルアップロード。 とても勉強になりました、英語のページを翻訳して、ここに転載します。 原文はこちら これに対してサーバー側のファイル保存について、下記リンクを参照してください。 phpサーバーアップロードファイル保存 *****以下は翻訳内容です***** jQueryドラッグ＆ドロップファイルアップロードの例で、HTML5およびjQuery AJAX APIを使用して、ドラッグ・アンド・ドロップ・ファイル・アップロードを実現する方法について説明しました。

主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの

Htmlでサイズ可変で縦横比固定のブロック要素を実現する方法を模索していたところ、 ちょっと独特な方法ですが可能なようです。 こちらのページに書かれていました。 日本語訳がちょっとおかしなことになっているので転載。 以下は幅によって高さが決まるタイプのコード。 html <div class="aspectwrapper"> <div class="content"> 内容… </div> </div> css .aspectwrapper{ position: relative; } .aspectwrapper:after{//beforeでもよい padding-top: 75%;//幅に対する高さの割合 display: block; content: ""; } .aspectwrapper > .content{ position: absolute; top: 0px; le

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

名前:nyamnyam 職業:WEB系雑用係 福岡のWEB制作会社で働いている制作見習い、日々勉強中です 自分がこんななので、初心者にも分かりやすく」をモットーに、役に立つ情報をUPしていきます @nyamx2 (03/29)qTranslateからqTranslate-Xへの移行方法 (04/27)Tumblr初心者が知っておきたい基本的な機能 (04/08)サーバー超初心者がAWSでRedmineを運用する方法（3） (04/08)サーバー超初心者がAWSでRedmineを運用する方法（2） (04/07)ソーシャルボタンをこれ以上ないくらい簡単にブログに設置する方法 (04/06)ログインID・パスワードが分からなくなった時調べる方法 (04/05)サーバー超初心者がAWSでRedmineを運用する方法（1） (04/03)seesaaブログでプロフィールにできる余白を詰める方法 (

Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's

CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ