Hiromuブログ

どこにでもいるただのホロレンジャーです

HTML/CSS

Apple Keyboard風のショートカットの表記

こちらの記事で紹介されているショートカットの表記はきれいでいいですね。 WordPressの今のテーマで無理やりstyleタグをエントリー中に埋めたら以下のようになりました。 予想外にちゃんと表示されましたw body { padding:20px; height:100%; font: 20px h…

ソーシャルボタンの設置方法(補足)

前回のエントリーの少し補足の記事です。 Twitter Twitterボタンは公式サイトだと以下の種類しかありません。 でも↓のような上に数字、下にボタンのスタイルもよく見かけますよね。 これを実現するには以下のように生成されたコードのaタグの中に「data-coun…

ソーシャルボタンの設置方法

最近静的なWebページに自力でソーシャルボタンを張ったりしていたのでリンク先をまとめておきます。(自分のために) Twitter https://twitter.com/about/resources/buttons#tweet Facebook https://developers.facebook.com/docs/reference/plugins/like…

Labsページを公開!

いろいろ作ったものを公開する実験的なLabsページを作成しました。 とりあえず、最近つくった3Dプリンターとギターのページがお勧め! まだ今は暫定的な感じですが、今後も作ったものはどんどんこちらで公開していきたいと思います。

ギターのコード・スケール表示プログラム

ギターのまとめサイト完成しました。 こちらで公開しています。 作曲とかでギターのフレーズを考える場合に使えるのではないかと思います。 ギターに興味のある方はぜひご覧ください。 背景にうっすら写っているのはマイギターです(^^)

ギターのまとめサイト作成中

この前作った3つのサイト(以下)ですが一度に全部表示できたほうが便利なので、がっちゃんこしたひとつのサイトを作成中。 HTML5のCanvasを利用してギターのスケールを表示 ギターの指板上の音名表示プログラム ギターのコード(和音)表示プログラム 豪快…

CSSを覚えたのでテンプレみたいなものを作ってみた

せっかくCSSを覚えたので忘れないうちに自分なりのテンプレを作ってみました。 こちらで公開していますので気になる方はご覧ください。 こんな感じのWebサイトです。少しフラットデザインっぽいかもw せっかくなのでソースも貼り付けておきます。 HTMLファ…

CSSのメモ

このページを結構苦労しながら手探りで作っていましたが、 やはり効率が悪すぎるので今更ながらまじめにCSSを覚えました。 今回はこの本をけっこうじっくりと読みました。実践的なサイト作りについて丁寧に解説されており大変参考になりました。 HTML&CSS標…

3DプリントのWebサイトを作ってみた

久しぶりに静的なWebサイトを作りました。こんなにまじめに作ったのは初めてかも。 3Dプリントしてみよう! CSSにあまりなれていないのでレイアウトがかなり大変でした。あとWordPressだとプラグインですぐできるソーシャル系のボタンの追加を自前でしたりと…

ギターのコード(和音)表示プログラム(HTML5 Canvas)

スケールを表示するプログラムを少し改造して作りました。 以下は、Cメジャーコードのポジション例です。 プログラムは以下に置いています。 http://hi-rom.com/labs/guitar/chord/chord.html 好きなルート音を選んであとは、それに重ねる音(3rdや5thなど)…

ギターの指板上の音名表示プログラム(HTML5 Canvas)

HTML5のCanvasを使って昨日作成したこれを少し改造して作りました。 ■ギターの指板上の音名 http://hi-rom.com/labs/guitar/notes/notes.html ちょっと見にくいけど1フレット内にフォントを収めようとするとこのサイズになってしまいました。 あとは、コー…

HTML5のCanvasを利用してギターのスケールを表示(完成)

こちらで少し書いたギターのスケールポジションを表示するやつ完成しました。 イメージ図。 実際使えるやつは以下に置いています。(少しWebのディレクトリを整理しなければ。。) http://hi-rom.com/labs/guitar/scale_disp/scale.html 今回は一応HTML5縛り…

HTML5のCanvasを利用してギターのスケールを表示

ギターのスケールポジションをキーに合わせてさっと表示してくれるものがあると、作曲したりフレーズを考えたりする場合に便利かなと思い、半分思い付きでつくることにしました。 まずはイメージをさっとメモ。 概要は キーとスケールを選択するとそのスケー…