JavaScript書けない人間が1年間でフロントエンドエンジニアになった話 - DMM.comラボ デザイナーズブログ
こんにちは、デザイン部所属の石橋です。 今はデザイナーをやりつつフロントエンドエンジニアをさせてもらってます。 そんな自分は2014年の5月にDMM.comラボへ来たんですが、入社時のスペックを以下に記します。 入社時のぼく HTML出来ます！（ただし<section>の使い方はぼんやり） CSS出来ます！（ただしスタイリングだけで設計は出来ない） jQuery出来ます！（ただし既存プラグイン実装に限る） おや…？ 「（フロントエンドってなんだろう…）」 「（JavaScriptとjQueryって何が違うんだろう…）」 やばい。 当時はいわゆる「コーディングがちょっとだけ得意なWebデザイナー」でした。 シンデレラストーリー プロローグ 弊社では一部のデザイナーも結構ガリガリとコーディングをするのですが、 入社時にまわりの能力の高さにちょっと本気で「ヤベェ所に来てしまった…」感がありました
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
jQuery の animate の縦方向の出現や隠す動作
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
スムーススクロールを実装する方法(ページ内をゆっくり移動)
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト | Web Mugen
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。 シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。） 表示コンテンツの切り替えができること。コレが本命。とっても
bl6.jp
買いもの 2024.08.2 ミックスベリー 最近発売されたのかわからないけどセブンの冷凍シリーズにミックスベリーという商品を発見し、おもわず購入する。ストロベリー、ブルーベリー、ラズベリーの3種がミックスされていてとっても彩り豊かです。ただブルーベリーは毎朝（こちらもセブンの冷凍シリーズ）食べているから個人的にはべつの果物におきかえてほしかった。でもミックスベリーというベリー縛りをしているからほかの選択肢はあまりなさそう… 雑記 2024.07.28 モーゴットを倒して巨人たちの山嶺へ ほぼ毎日（といっても一日あたりの時間は少なめ）エルデンリングを遊んでいるが、いまだに終わりが見えないくらいのボリューム感ですごい。ボス一体を倒すのに5、6時間な…
多彩なCSSアニメーションを実現できる「Choreographer-js」 – bl6.jp
Choreographer-jsは、多彩なCSSアニメーションを実現させてくれるシンプルなライブラリです。マウスを動かすことで背景カラーを変化させたり、スクロールすることでアニメーションさせたりと、さまざまな設定が可能です。CSSによるアニメーションを手軽に取り入れたいときに活用してみたいですね。 Choreographer-jsの実際のデモページは以下からチェックできます。 デモ 下へスクロールしていくと、「CHOREOGRAPHER-JS」と書かれたテキストがアニメーションされます。カラーが変化したり、文字が回転したり、位置が変わったりといろんな変化を楽しむことができます。 ただスクロールしていくだけではなく、アニメーションをつけることでユーザーの注目度も高まりそうですね。また、スクロールでのアニメーションのほかに、マウス動作でのアニメーションのデモも用意されています↓ デモ こちらは
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
基礎から抑える！初心者のためのJavaScript入門
更新日: 2017年6月12日公開日: 2015年10月14日基礎から抑える！初心者のためのJavaScript入門 WEBページ制作を行う上で欠かせないのが、JavaScriptの存在。初心者の方にとっては「少し敷居が高い」というイメージがあるかもしれません」。 しかし、ご心配なく！実はJavaScriptはシンプルで、基礎は他のプログラミング言語とあまり変わりません。今回はそんなJavaScriptを概要からおすすめ書籍、学習サイトまでを解説していきます。 JavaScriptとはJavaScriptの特徴 JavaScriptは200種類以上あるプログラミング言語の一種で、Webページに様々な機能を付加する事ができます。例えば[ボタンクリック][マウスオーバー]のようなユーザの動きに応じたWebページ機能を作れるのは、JavaScriptならではでしょう。 しかしその反面、セキュリテ
進捗率を計算してスクロールアニメーションを制御する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は進捗率を計算して、スクロールアニメーションを実装する方法について書きたいと思います。 進捗率とは 進捗率とは、作業がどのくらい進んでいるかをパーセンテージ（0％から100％）で表したものになります。 スクロールアニメーションで進捗率を使うポイント スクロールアニメーションで進捗率を利用する場合は、スクロール開始地点（始点）からスクロール終了地点（終点）までの進捗率を、0から1で求めるように計算するとより使い勝手がよくなります。 どうして進捗率を0から1で取得するの？ なぜ使い勝手がよくなるかというと、理由は0から1という値にあります。 CSSのプロパティには、各々のプロパティで個別の最小値・最大値あるいは任意の値をいれることができます。 例えば、透明度を扱うopacityは最小値が0で最大値が1ですが、要素の回転を扱うrotationは最小値0で最大値
phiary
Code html .wrap 要素を作って, その中にスクロールさせるための詰め物 .pad 要素を作っています. <body> <h1>スクロールしてね♪</h1> <div class='wrap'> <div class='pad'></div> </div> </body> css .wrap を画面中央, いっぱいに表示して, .pad の height の値を大きくすることでスクロールできるようにしています. .wrap { position: absolute; height: auto; top: 0; bottom: 0; width: auto; left: 0; right: 0; overflow: auto; } .pad { height: 2000px; } javascript スクロールイベントを登録後, スクロール値に応じて背景色を変更しています. w
【JavaScript】デジタル時計を表示する方法。
JavaScriptを使ってウェブサイトにデジタル時計を表示する方法を紹介します。 まずはhtmlの<head>〜</head>内に以下のスクリプトを記述します。 <script> function clock() { var myDay = new Array("日","月","火","水","木","金","土"); var now = new Date(); var year = now.getFullYear(); // 年 var month = now.getMonth()+1; // 月 var date = now.getDate(); // 日 var day = now.getDay(); var hour = now.getHours(); // 時 var min = now.getMinutes(); // 分 var sec = now.getSeconds()
jquery.cookieを使って初回だけメッセージを表示する - CodingMania
jquery.cookie.jsを使って初回アクセス時のみメッセージを表示します。「閉じる」ボタンでメッセージを消せます。 jquery.cookie.jsのダウンロードは、carhartl/jquery-cookie 参考にしたページは、jquery.cookie.jsの使用方法メモ デモページの「Cookieを削除する」ボタンでキャッシュを削除することができます。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script
JavaScript class取得 getElementByClassNameとquerySelector
最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか？ え？取得しない？ そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はgetElementByClassNameとquerySelectorです。 var element = document.getElementById("hoge"); element.getAttribute("class"); とか、 var element = document.getElementById('hoge'); element.className = "hogege"; とかで取得や変更を行ってきましたが、HTML5の仕様により、 getElementByIdの様に getElementsByClassNameで取得出来ます。 もちろん古いブラウザ
| サイドメニューが下まで行ったらそこで固定するJS（jQuery）神戸ホームページ制作センター
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
カスタマイズも自由にできるjQuery「bxSlider」の使い方 – bl6.jp
個人的にかなりよさげなjQueryスライダーを使ってみました。その名もbxSlider。もしかして結構有名なのかもしれませんが… 色々とオプションもありカスタマイズもしやすかったので今後の為にもメモしときます。 [ads_center] bxSliderの使い方 基本的にはよくあるjQueryプラグインと同じです。まずはこちらからファイルをダウンロードします。 bxSlider ダウンロードしたZIPファイルを解凍するとjquery.bxSlider.min.jsというファイルが入っているのでこれをhead内に読み込みます。ちなみにjquery.easing.1.3.jsというファイルもありますがこちらはスライドのモーションなどを変えたい時に使用するのでデフォルトでもいい場合は特に必要ありません。 <script type="text/javascript" src="http://aja
プログラミング初心者でも安心！無料プログラミング学習サイト10選
プログラミング初心者がプログラミングをいざ勉強しようと思っても、どうやってはじめていいのかわからないという方は多いのではないでしょうか。 また、ITスクールなどで勉強しようと思うと、数十万円の費用がかかることが一般的で、なかなか手が出しにくいということも多いと思います。 そんな高額のスクールではなく、無料でプログラミングを学べるサイトがアメリカを中心にして増えてきています。中でも実際にコードをブラウザ上で入力したり、詳しい動画を見ることができるサイトが人気を集めています。 今回はそんなプログラミングを学べる10サイトをご紹介します。 日本語対応しているサイトも少しずつ増えているので、ぜひこの記事を参考にプログラミングの独学に活用してみてください！ 1.ドットインストール ドットインストールもはや説明の必要のないくらい有名なサイトですね。 「3分間でマスターする初心者向けプログラミング学習サ
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
