CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
Rails Tutorial以前 - Web系エンジニア入門レベルを達成するには - - 国境の南
Webエンジニアになりたいと思って、まずはじめに取り組んだのはRails Tutorialだったのだけれど エンジニアを志して半年程経ったこのタイミングで色々と思う所があって、 同じ轍を踏む人が少しでも減ればと思い 初学者が効率的にWeb系エンジニアとしての入門レベルを終えるにはどうすればいいのかという形でまとめる そもそもRails Tutorialとは ちょっとしたサイトを作ったことがあって(=HTML, CSSを使える） 入力した数字の素数判定が出来る程度のプログラミング能力があれば*、 とりあえず解説を読み下して、TwitterモドキをRailsで作れる丁寧なチュートリアルサイトのこと railstutorial.jp *実際どうかしらん、Rails Tutorialに自分が初めて取り組んだ時のレベル感 Rails Tutorial いい点と悪い点 いい点 とにかく写経すれば、ログ
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
jQueryで文章を１文字ずつアニメーション表示（複数行対応） - jsdo.it - Share JavaScript, HTML5 and CSS
昨日作ったもの（jQueryでレトロゲームのプロローグ風～）を講師に見せたら、 「応用して1文字ずつ表示するのも作れるんじゃね？」 と振られたので、作ってみました。コードの行数が3倍になったけど、これは‥ 応用？(´･ω･`) .fadein 内にあるspanで囲ったテキストが1文字ずつ表示されます。 複数行にも対応 var DELAY_SPEED = 100;//文字が流れる速さ var FADE_SPEED = 500;//表示のアニメーション時間 var str = []; $(document).ready(function(){ $('.fadein > span').each(function(i){//セレクタで指定した要素すべて $(this).css('opacity','1');//行を不透明にする str[i] = $(this).text();//元のテキストをコピ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
