HTML/CSS/JavaScript初歩の初歩
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい！ プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
JavaScriptやCSSを圧縮／軽量化できるサービス「Minifier」 | ライフハッカー・ジャパン
「Minifier」はJavaScriptやCSSを圧縮・軽量化できるサービスです。圧縮したいコードをコピペしてワンクリックで圧縮・軽量化できますよ。 以下に使ってみた様子を載せておきます。まず、Minifierへアクセスしましょう。圧縮するファイルの形式（JavaScriptやCSS）を選択します。その後、圧縮したいコードを貼り付けて「Compress」します。 このように圧縮・軽量化されたコードが生成されました。また、このように難読化されたコードをデコードすることもできます。JavaScriptやCSSを書く方は要チェックですね。ぜひご活用ください。 Minifier （カメきち）
WOW.js - JavaScript/CSS3でスクロール連動型アニメーション MOONGIFT
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。 何はともあれ動画を見てもらうのが良いと思います。 犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。 実用的にどうなの、と思ったのですが以下のサイト（利用例）を見るとかなりいけてることが分かります。 さりげないアニメーションで表示されます。 1640 iOS7 Icons for designers & Developers | St
[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET
[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 こんにちは、@yoheiMuneです。 フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。 最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います！ 「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。 コーディングをスピードアップする６つ＋αのポイント 自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。 めんどくさいと感じること、そして改善に動くこと 幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動！？」「マウ
![[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d5148c26b0ae2a3585b08c6cf755d68966d223de/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F225.jpg)
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ
モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。 そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。 そんなありがたーいライブラリを集めました。
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
HTML/CSS/JavaScriptを編集してその場で結果確認·Editr MOONGIFT
EditrはWeb上でHTML/CSS/JavaScriptを編集して結果を確認できるサービスです。 最近、Jsdo.itのようにWeb上でコードを書いてその結果を確認できるサービスの人気があります。そのオープンソース版とでも言うべきなのがEditrです。 結果ページ。 JavaScriptの編集を行えます。 こちらはスタイルシート。 HTML。この3つを組み合わせて結果ページになります。 複数のHTMLを切り替えられます。 EditrはHTML/CSS/JavaScriptをWeb上で記述して、その結果もオンラインで確認ができます。ちょっとしたコードを試したり、一部の機能だけを取り出して遊んでみると言った時に使えそうです。 EditrはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る プレイグラウンド的なサービスは特にWeb
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション
昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <div class="loader"> <span></span> <span></span> <span></span> </div> CSS Webkit用とFirefox用の2種類が記述されているので長くみえますが、スタイルシートは非常にシンプルです。 .loader { text-align: center; } .loader span { display: inline-block; v
各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 ブラウザ名で検索も出来る様になっています。IE、Firefox、Chrome、Safari、OperaなどのCSSハックやJavaScriptによるハック方法が掲載されています。 試してないけどMedia QueriesでIEのCSSハックという方法は思いつかなかったです。 デモページもあるのでハックが効いてるか確認する事
[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext
CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、 Kontext -GitHub Kontextのデモ Kontextの使い方 Kontextのデモ デモでは3枚のパネルをダイナミックなアニメーションで切り替えます。 操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。 Kontext -デモページ Kontextの使い方 スクリプトは単体で動作するので、jQueryなどは必要はありません。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。 <head> <link rel="stylesheet" href="css/kontext.css"> <link rel="stylesheet" href="
[CSS]ソーシャルボタンのリストが蛇腹状に折り畳まれるスタイルシート
ソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。 デモページ：開いた状態 実装 外部ファイル jQueryとModernizrを</body>の上に外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> HTML 一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。 <h2 class="connect">Connect with me:</h2> <ul class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryとCSS3を使った円形の画像がフリップするスライドショー – creamu
オンラインでCSSやJavaScriptを圧縮・「Online YUI Compressor」 - かちびと.net