Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
【Webサイト制作】独学素人がjQueryで、ドラクエ画面を作ってみた
こんなサイトを作ってみました オッス、オラ日曜ネット大工。 １年に１回くらい趣味でwebサイトを作ったりする独学素人ノンプログラマーです。 仕事はＩＴ系にかすりもしないけど、たまにサイトが作りたくなるんです。 htmlもCSSも知識不足ですが、作成ソフトに頼ればなんとかなります。 そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。 で、たまに「簡単にわかるJavaScript入門」なんてサイトや記事がありますよね。 ああいうのを書いてくださる人に、ちょっと言いたい。 あの、独学素人ノンプログラマーの俺をなめてませんか？ あなた方の想像を絶するほどに、俺のＩＴ系理解能力はゴミクズですよ！ 「簡単に分かる入門」にさえ入門できません助けて先生！ と、鼻水をたらしながら泣き出すような底辺レベルのスキルしかないザコであります自分は。 ですが、jQueryと出会い、
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」
軽量なjavascriptライブラリjQuery、かなり高機能で、様々な表現ができますが、今回紹介するのはjQueryを利用して、ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」です。 上記のようにメインコンテンツエリアを、ヨコにスライドして、サブページが表示されます。 詳しくは以下 印象的な見せ方なので、ユーザーに特に残るような見せ方をしたいときに有効だと思います。使いどころは難しいかもしれませんが、はまったときには非常に有効的な見せ方だと思います。 実装方法は非常に簡単で、JQueryを読み込んで、簡単なコードを追加するだけです。出現するページのワイド幅はjavascript上で変更する事ができます。対応しているブラウザはIE7, FireFox 2, Safari 2以上という事で、IE6などの旧世代のブラウザは非対応とのことです。 詳しい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Editr - HTML, CSS, JavaScript playground
moto-mono.net
今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI 〜 世界のアイデアを日替わりで