jQueryを使わずにスライドメニューを実装しよう
jQueryを使わずにスライドメニューを実装しようスマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成まずは HTML と CSS で「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定などで、特に変わったことはしていません。 H
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
サイトの表示高速化につながる18のこと｜ベイジの図書館
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方
独学でWebデザインやコーディングなどのWeb制作スキルを身に付けたい方向けのノウハウを紹介します。 Web制作のテクニックを学ぶ方法は、 研修やセミナーで学ぶ方法 スクールに通って学ぶ方法 お金をかけずWebサイトや本を参考に学ぶ方法 の3つに大別できます。 しかし、研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。 そこでおすすめしたいのが自宅で学ぶ独学です。 筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。 独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。 そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。 リアルなお話をしますが、独学ではじ
WebページのタイトルとURLをワンクリックでコピーするBookmarklet - Qiita
やりたいこと タイトル+URLをリンクの形式でコピーしたい。 各サービスでフォーマットがバラバラなのでいちいち覚えたくない。 あと、Ctrl+Cもめんどくさいので、bookmarkletを押すだけでClipboardにコピーしたい。 ※2017-09-01: 実装、タイトル、説明内容を見直して修正しました。 ※2021-03-27: 実装修正しました ※2022-02-21: Twitterのページで動作しない問題に対応しました ※2023-06-12: execCommandが非推奨なため、Clipboard APIで実装しなおしました 参考にさせてもらったページ JavaScript で指定したテキストをクリップボードへコピーする方法 javascript - Replace multiple characters in one replace call - Stack Overflo
タイトルとURLを色々なフォーマットでコピーできるブックマークレット
タイトルとURLを色々なフォーマットでコピーできるブックマークレット 2016.02.18 （最終更新：2024.02.11） ブログ Markdown ChatWork Textile JavaScript HTML ドキュメンテーション 約1500字 普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。Wiki・チャット・チケット・資料の作成が捗ります! ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。 参考: 知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］
タイトル・URL・選択テキストをコピーする Bookmarklet - white croquis
Twitter やブログなどで Web で見つけた記事を紹介したいときなど、WebページのタイトルとURLを簡単にコピーできると便利です。個人的に以前から使っていた方法ですが、Safari, Chrome, Firefox, IE など、ブラウザを問わず Bookmarklet を使ってこれを行う方法を少しまとめてみました。 今回は開いてるWebページから次の6パターンで文字列を取得する Bookmarklet を紹介します。 タイトル + URL タイトル + URL + 選択テキストを引用 選択テキストを引用 + タイトル + URL Markdown 記法のリンク はてな記法のリンク HTML 形式のリンク Firefox の "Make Link" Add-on は便利だけど… 現在、Mac と Windows を両方かつ複数バージョン使っていて、ブラウザも Safari, Fir
frontend-history
株式会社エフコード様でお話させていただいた内容です https://medium.com/@terrierscript/nostalgic-frontend-8a502220ce48
フロントエンドの勉強としてGitHub PagesでダメWebサイトを公開してみました - こまぶろ
はじめに 記念すべき最初の「実装してみた」記事です。 GitHub & フロントエンド初心者がこんなもの↓を作りました、という話です。 こまど GitHub Pages 目次 はじめに 目次 はじめての「実装してみた」 技術の勉強が捗らない！ フロントエンドの勉強をしよう はじめてのGitHub Pages 「GitHub Pagesがあるじゃん」と思った GitHub Pagesに公開してみた はじめてじゃないJavaScriptとHTML & CSS JavaScriptを書いてみた HTML & CSSも（久しぶりに）書いてみた はじめてのJSフレームワーク Vue.jsをやってみることにした Vue.jsを使ってみた はじめてのGitHub Issue 写経したはずなのにバグが出た Issueを書いてみた おわりに はじめての「実装してみた」 技術の勉強が捗らない！ 技術ブログのつ
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
Front-End Developer Handbook 2018 - Learn the entire JavaScript, CSS and HTML development practice!
AVAILABLE NOW: Front-End Developer Handbook 2019 Front-End Developer Handbook 2018 Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and wha
何者にもなれなかった
フロントエンドエンジニアにもデザイナーにもなれなかった。 HTML/CSSはリファレンスなしで書けるし、WAI-ARIAを用いたアクセシブルなコーディングもできる。 CSS設計を意識して保守性を大切にしたコードを書いているし、CSSアニメーションでインタラクションも操作できる。 SVGを一から書く方法やいくつものブレイクポイントを持ったページのコーディングスキルも身につけた。 Gitでバージョン管理をしたり、モジュールバンドラーやタスクランナーでscssのコンパイルやリントを通したりする能力も得た。 インプットが大好きで、毎日毎日様々なWebに関する知識を頭に詰め込んだ。 だけどJavaScriptは書けない。 JQueryをコピペして簡単なDOM操作を行うのが限界だった。 然しながら、昨今のフロントエンドエンジニアはJavaScriptが書けて当たり前だし、 各種JSフレームワークやWe
株式会社ミクシィを退職しました - 若くない何かの悩み
表題のとおり、株式会社ミクシィを退職しました。私は2014年の新卒入社なので、4年弱お世話になったことになります。たいへんお世話になりました。 さて、とりあえず在職中に印象に残っていることをまとめてみました。 印象に残っていること 新人賞 2015年に新人賞をもらいました。受賞者の発表は全社総会でやっていたらしいのですが、私は発表のタイミングに別室で休んでいたために何も知りませんでした。そのため残念なことに表彰時不在となりました。なお、その後に表彰時にもらえるはずの賞状が行方不明になるなど紆余曲折ありましたが、受賞を光栄に思います。 学生向け競技イベント「git challenge」 2015~2018年にかけては、壊れたgitリポジトリからの復旧などを問題とした学生向けイベント「git challenge」をやっていました。このイベントでミクシィを知ってくれた学生は、結構な確率でミクシィ
JavaScript in 14 minutes
Since you've already learned Web design in 4 minutes, it's time to dive into the Web's main programming language: JavaScript. It looks like you're on a mobile device tablet! 😱 But fear not! 😊 While this tutorial is not optimized for this platform, I still made it readable enough for you to enjoy. You should however revisit it on a desktop later if you can, to experience all the features! Anyway,
Vue Fes Japan 2025
2025 年 8 月 1 日（金）12:00 から Vue Fes Japan 2025 のチケットを発売開始します。一般チケットはアフターパーティーあり/なしの 2 種類です。オプションとしてハンズオン、個人スポンサーのチケットもご用意しております。 8 月 31 日（日）23:59 までにご購入いただくと、オトクなお値段になる早割もありますので、お買い求めはお早めに！
Vue.js の基礎を学ぶために LearnCode.academy の学習動画を活用したら最高だった - kakakakakku blog
LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．「Vue.js は気になるけどまだ試したことがない」という人にオススメ！ Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event
最新のウェブフロントエンド技術を無理してキャッチアップする必要はない - id:anatooのブログ
ウェブフロントエンド技術は変化が激しいと言われるけれども、多くの人にとって最新のウェブフロントエンド技術を無理してキャッチアップする必要は無い。以下理由。 ここでいう最新のウェブフロントエンド技術とは、新しいブラウザのAPIや新しいJavaScriptの文法や新しいフレームワーク・ツールなどを指す 今のHTML5はドキュメントを表現するプラットフォームだけではなくアプリケーションプラットフォームとしても機能するように進化をしている最中 だからアプリケーションプラットフォームとしての進化を支える新技術がたくさん出てきている 逆に言うと、アプリケーション(SPAとか)を書かない人にとってはキャッチアップする必要の無い場合がたくさんある また、それらのウェブフロントエンドの新技術を全てキャッチアップするのは基本的に不可能だと思う 自分はウェブフロントエンドやそれのパフォーマンスを専門の一つにして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js の基本の「き」を自分なりにまとめてみた
https://creative-tweet.net/blog/2018/04/beginning-vuejs.html
2018年のフロントエンドエンジニアを取り巻く課題とチャレンジ
