omachizura

仕事メモ、役に立ったスキルをまとめています。


役立つスキル、テクニック集 2ページ目


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • repeaterで出力したラジオボタンを1つのみ選択する方法

    1つだけ選択できるようにするには、サーバ処理で変更されてしまったNAME属性を同じにする必要があります。なのでクライアント側のロードイベントでラジオボタンのNAME属性を変更します。


  • 文字列をhtmlの要素(DOM element)に変換する

    例えばajaxなどでサーバから下記のような文字列のデータがレスポンスされたとします。div.innerHTML = html文字列とすれば、document.getElementById('...


  • 拡張メタ言語を使用して静的ホームページを簡単に作成する

    ちょっとしたホームページやブログを作成するとき、どのように作成しているでしょうか?phpなどを使いたいが、レンタルサーバー代を抑えたり、サーバーにはhtmlファイルだけおいて管理を簡単にしたい、という...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • canvasの基本的な使い方

    html5でアニメーションや図形などを作成するcanvas要素の基本的な使い方を学習します。canvasはjavascritpで描画するので、複雑なアニメーションを動的に描画する場合はhtmlの知識だ...


  • canvasで色の指定と四角形の描画

    今回から実際に図形を描画していく方法を紹介します。最初はおそらく一番シンプルな関数である四角形を描画する関数の使い方を紹介します。図形を描画する関数を呼ぶ前に、スタイルを指定することによって、色をつけ...