はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します

Transcript 30代から始めるwebフロントエンド入門 コネヒトマルシェ #2〜webフロントエンド市〜 @itosho 1 ▪ 自己紹介 ・伊藤 翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。 ・最近のオススメ：sora tob sakana 先日メジャーデビュー ▪ 自己紹介 ・伊藤 翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。 ・最近のオススメ：sora tob sakana 先日メジャーデビュー ・主にサーバーサイドエンジニアをやっています。 　・よく書く言語：PHP / Ruby / Golang ＿人人人人人人人人人人人人人人＿ ＞　サーバーサイドエンジニア　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 4 ▪ 今日話すこと

teratailには、プログラミングに関する質問と回答を通して引き出される価値ある知識が集まっています。 もっと詳しく

どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header

ブログにGoogleマップを埋め込みたい時ってありますよね？ 場所を紹介したい時とか。 任意の場所にピンを立てて、ブログに埋め込む方法は別のページで紹介していますが、今回は、埋め込んだGoogleマップのスクロールを止める（動かなくする）方法を紹介します。 グーグルマップで任意の場所にピンを立てて埋め込む方法 今から少し能書きを垂れますので、「そんなのどうでもいいから早くやり方教えろよ」という方は下の目次から、飛んでください。 なぜ止める必要があるのかどうしてスクロールを止める必要があるのかと言いますと、パソコンでブログを読んでいる場合、だいたいマウスのクイックホイールで下にスクロールしますよね？マウスに付いてるクルクルするヤツです。 それでスクロールしている時に丁度マウスポインターがGoogleマップに差し掛かると、ページのスクロールが止まってグーグルマップの方が拡大されたり縮小されたり

Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat

Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item

縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ

Result jQuery//全部非表示にする $('.someList li').hide(); // リストをシャッフルする var items = $('.someList li').get().sort(function() { return Math.round(Math.random()) - 0.5; }).slice(0, 3); // ランダムで3つだけ抽出して表示 $(items).show();​html<ul class="someList"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul>​viaShow a Random Numbe

こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし

Hatena ID is an account used for various Hatena services.