実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
Learn CSS Layout
This site teaches the CSS fundamentals that are used in any website's layout. I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, let's see if we can save you some fury on
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
CSSで半透明にできるOpacityプロパティとIEでの問題について
ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。 ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。 要素を透明化する CSS プロパティ CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。 opacity:0.7; 0 が透明で 1 が不透明、0～1 の値を指定する。 これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。 filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ IEの透明度は0～100の％で指定する。 この他、Firefox や
【お絵かき上達テクニック満載！】教えて！お絵かきの青ペン先生 - 萌えイラスト上達法！ お絵かき初心者の学習部屋
1：以下、名無しにかわりましてVIPがお送りします：2012/11/14(水) 14:06:24.51 ID:uW5jvQVE0 どうも、青ペン先生です。 優しく指導しますよ、。 5：以下、名無しにかわりましてVIPがお送りします：2012/11/14(水) 14:16:49.42 ID:abqYpft10 絵うｐ 6：以下、名無しにかわりましてVIPがお送りします：2012/11/14(水) 14:20:34.14 ID:s/yg+xfL0 教えてくれんの？ 8：以下、名無しにかわりましてVIPがお送りします：2012/11/14(水) 14:26:44.11 ID:uW5jvQVE0 >>5 2：すずり ◆juTc0OCY12 ：2012/11/14(水) 14:08:27.11 ID:QCOKQFZ20 上手くなりたいです 円柱描くの効果ありますか？ 3：以下、名無しにかわりましてV
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
「ノンプログラマのためのJavaScriptはじめの一歩」の1章が公開されました - Webtech Walker
11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています。次のようにボタンを押すと次の画像に行くというだけの、簡単なサンプルプログラムです。 {::nomarkdown} {:/nomarkdown} 技評のWebサイトからも実際に試すことができます。 JavaScriptのソースはこんなかんじです。全体で90行程度、コメントや空行を除くと40行程度です。 /** * 簡易スライドショー * * nextボタンを押したときに画像を切り替える簡単な *
Git - Book (日本語訳)
The entire Pro Git book, written by Scott Chacon and Ben Straub and published by Apress, is available here. All content is licensed under the Creative Commons Attribution Non Commercial Share Alike 3.0 license. Print versions of the book are available on Amazon.com. The version found here has been updated with corrections and additions from hundreds of contributors. If you see an error or have a s
Ruby on Rails Guides
Ruby on Rails Guides (v7.1.3.4) These are the new guides for Rails 7.1 based on v7.1.3.4. These guides are designed to make you immediately productive with Rails, and to help you understand how all of the pieces fit together. The guides for earlier releases: Rails 7.0, Rails 6.1, Rails 6.0, Rails 5.2, Rails 5.1, Rails 5.0, Rails 4.2, Rails 4.1, Rails 4.0, Rails 3.2, Rails 3.1, Rails 3.0, and Rails
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
これが開発者用Dropbox! Webアプリケーション向けリアルタイムストレージ Firebase - cakephperの日記(CakePHP, Laravel, PHP)
Firebaseというのが4/12にローンチされたようです。 http://www.firebase.com/ これは公開されているAPIとJavascriptライブラリを利用して、自分のサイトにリアルタイムストレージが手軽に組み込めるようになります。 自分のWeb画面に必要なJavascriptライブラリを組み込んで、データをset, getすると自動的にfirebaseサーバに同期され、同じ画面を見ている人にもデータが同期されます。 彼らのWebから言葉を引用すると、 「It's like Dropbox for your app's data.」 データの同期はもう裏で自動的にやっておくから、あなたは自分のアプリケーションロジックに集中できるよ！とのこと。 チュートリアルがあって、実際にWeb画面上で指示に従いながら進んでいくと、どんな風に開発するのかが分かるようになってます。このチ
iPhone開発が0から学べるiOS5対応チュートリアル動画 50個 | Last Day. jp
こんにちは、最近毎日Xcodeを触っています@sayobsです。ずっとXcodeを触ってなかったら色々進化していてびっくりしました。 僕はいつもYouTubeでチュートリアル動画を探して勉強します。YouTubeにとてもわかりやすいチュートリアル動画があったので紹介します。しかもiOS5対応です:) ※英語でのチュートリアルになります。 チュートリアル動画 50個 Cがわからない方向けのチュートリアル動画もあります! まずはここから。if,for loopなど基本的な事が学べます。 Cの理解が深まったらobjective-cのチュートリアル動画を観ましょう！0、1とあるんですが飛ばしても大丈夫です。実質2からがチュートリアルです。Class名の付け方とか基本的な事が学べます。 NSArrayやNSDictionaryについて。 実際にXcodeを使ってHello,Worldを表
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる - かちびと.net
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認 まず完成形を見て
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CODEPREP
http://www.xn--vps-073b3a72a.com/
新着記事
新着記事
新着記事
新着記事
[CSS]コンテンツの見せ方にも工夫が必要、CSS3を使ったかっこいいフィルタリングのチュートリアル