サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック | コリス

2020/04/12 14 users ツリービュー コリス ul要素 DOM構造 CSS

サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際... 続きを読む

RubyVM::ASTさわってみた

2018/06/05 18 users AST RubyVM experimental node 取得

RubyVM::AST [Experimental] Ruby 2.6では RubyVM::AST モジュールが導入されました。 このモジュールには、文字列をパースしてAST(抽象構文木)のNodeを返すparseメソッド、ファイルをパースするparse_fileメソッドが実装されています。 RubyVM::AST::Node も導入されました。このクラスのインスタンスから位置情報や子ノードを取得... 続きを読む

Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック | コリス

2015/09/24 623 users コリス デベロッパーツール Chrome テクニック HTML

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展... 続きを読む

いつでも使えるWebベースのマインドマップ「MindMup」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/02/07 24 users MindMup エンター TAB ノート 大勢

MindMupはWebベースのマインドマップソフトウェアです。マインドマップで情報を整理したり体系化したりしている人は大勢います。Webベースで見た目が良いマインドマップをお探しであればMindMupを使ってみると良さそうです。 メイン画面です。 ノードを追加しました。Tabで子ノード、エンターで兄弟ノードを追加できます。 日本語も使えます。 拡大表示もできます。操作性はとてもよく、キーボードだけ... 続きを読む