CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ details と summary タグの基本的な使い方details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotosh

IT業界の知識共有サイトQiitaで起こった論争 システムエンジニアならだれでも知っているサイト、Qiita（キータ）。 2011年に京都大学の大学生であった海野弘成氏が立ち上げたサービスです。トップページには、以下の文言が掲載されています。 Hello hackers ! Qiitaは、エンジニアリングに関する知識を記録・共有するためのサービスです。コードを書いていて気づいたことや、自分がハマったあの仕様について、他のエンジニアと知見を共有しましょう ;) 上記は「エンジニアリング」とあり広い定義を行っているのですが、そもそもは「プログラマー」のためのコミュニティーでした。 qiita.com Qiitaは、プログラミングに関する知識を記録・共有するためのサービスです。 初めはプログラミングに限定していたものの、幅広いユーザーが集まったことから制限をかけずにユーザー側にある程度判断を任せ

Webサイトをどうやって作っているか？を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧したとき、Wappalyzerのアイコンをクリックすると、そのWebサイトで使われているソフトやサービスなどが表示されます。 （例）はてなブックマークを見たときは、以下のような内容が表示されました。 Webサーバーソフトは「Nginx」、キャッシュソフトには「Varnish」を使っていることなどが分かります。 これでいろんなWebサービスを調査してみれば、Webサイト制作の参考になりそうですね！ Wappalyzerの参考情報 forest.watch.impress.co.jp www.leon-

概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6