フロントエンドエンジニア
macOS Monterey 12.5くらいにupdateしてから、なぜかVisual Studio Codeが起動しないっていうか一瞬起動して落ちるようになった。 macOSのupdateは関係ないかもしれないけど原因を追求してみた。 ターミナルで、 /Applications/Visual\ Studio\ Code.app/Con…
jQueryを使わない案件、もしくは途中から入ってjQueryのエイリアスがぐちゃぐちゃになっててjQuery使いたいとき、 // ページトップ var pagetop_elements = document.getElementById('pagetop'); pagetop_elements.addEventListener('click', scroll_to_top)…
M1 Pro の MacBookPro2021を購入した。 せっかくだからクリーンな状態から新たに環境を作っていたのだが、Gulp環境で3時間ほどつまづいた。 インストールは、普通にやった。 こんな感じ。 【mac版】gulpのインストールから使い方までを解説【Web制作初心者…
レスポンシブと言っても色々ある。 PCでもスマートフォンでも同じように、コンテンツをモーダルウィンドウに表示する場合 高さ、幅の最大値を指定してあげることで、スマートフォンでもモーダルウィンドウがはみ出すことなく表示できる jQueryプラグイン「Co…
久々にjQueryのモーダル系プラグインColorboxを使う場面があった。 今回のリクエストは、外部htmlをモーダルで表示して、さらに画像のようにグループ化してギャラリー表示するというもの。公式サイト http://www.jacklmoore.com/colorbox/jQuery Colorboxを…
前回は、「MacのローカルフォルダをWebサーバーにする」でした。 charlie.hateblo.jp 今回は、「iPhoneやAndroidからアクセスしてみる」です。 iPhoneやAndroidからアクセスしてみる MacのIPアドレスを固定にする まず、MacのIPアドレスを固定にします。 シ…
前回は、Macをwifiアクセスポイントにするところまででした。 charlie.hateblo.jp今回は、「MacのローカルフォルダをWebサーバーにする」です。 MacのローカルフォルダをWebサーバーにする Macには、ApatchというWebサーバー機能がある。 これを利用する方法…
スマートフォンサイトを作っていると、chromeのスマホプレビュー機能がとっても便利。これがないと仕事ができないと言ってもいい。 参考: wayohoo.com chromeのスマホプレビュー機能を使いどんどん制作をすすめていく。 やったーできた!! さてさて、テス…
SublimeTextで垂直に揃えるインデント:ElasticTabstopsパッケージ最近こんな記事を読みました。【翻訳】私がコーディングで垂直方向にそろえるインデントをとる理由 【翻訳】私がコーディングで垂直方向にそろえるインデントをとる理由 【翻訳】私がコーデ…
わお! コードを印刷するとき、コードカラーリングした状態で印刷するとすげー見やすい! 普段コードを印刷なんてしないぜ! ま、だいたいそうなんですけどね。寝転んで眺めたいなとか、 何か書き込みながらデバックしたいなとか、たまーにたまーに、だけど…
sublime text3 emmet というキーワードで検索されている事が多いようなので、じっくり解説です。 画面はmacのものですが、windowsでも同じような操作でインストールできます。 SublimeTextは、パッケージで機能追加 SublimeTextは、2も3も、パッケージと呼…
使っていないCSS記述をピックアップし削除もできる Dust-Me Selectors サイトの一部のページのみ切り出して使う 拡張を重ねたサイト プチリニューアルした後 そんなとき、CSSファイルには、要らない記述がいっぱい。そんな不使用のCSS記述を見つけてくれる、…
この記事は、おれのさぶらいむてきすと Advent Calendar 2013の19日目です。昨日は@jugyoさん、だったのですが、すごいことになっています。。さて、 Sublime Textは、マルチカーソルが便利ですよね。 そんなマルチカーソルで便利な、InputSequenceプラグイ…
Photoshop CC 14.1 の新機能「Generator」いいなうらやましいな。「Generator(生成)」について – Photoshopの使い方 | Adobe Photoshop Magazine - 書き出したいレイヤーの名前の最後に、「.png」をタグ付けします。タグは、レイヤーグループにも付けるこ…
Sublime Text便利ですよね。マークアップ作業中に、 *Sublime Textで書き換え+保存 *ブラウザをアクティブにして、更新 って、何度やっているでしょう。。ということで、、 Sublime Textの上書き保存とChromeの更新をワンタッチで行う方法 Browser Refles…
IE11のテストをしなくては、 ってことで、Windows8.1のテスト環境を構築した。基本的には、act2さんのブログのお世話になりつつ構築したが、その通りではない部分もあり、メモとしてシェアしておきます。お世話になった、act2さん ブログ。[http://act2blog.…
前の記事で、Sublime Text3はまだまだな感じと書いたけど、いろんなパッケージが対応してきたので改めて記事にします。まずは、 Package Controlの導入。https://sublime.wbond.net/installation に書いてある Sublime Text3用の文字列をコピーします。Subli…
グローバルナビにDreamweaverのライブラリを使用したいが、class="active" を付けなきゃいけないからなー メニューが一つ増えたり、ナビの内容が変わるたびに、全ページにナビ部分のソースをコピーして、該当するページのところに、class="active"を付けてい…
2011年4月からの東北通い。 2年間ずっと考えていたこと。。 自分の得意な分野で貢献できることが1番いいな。 そして、東北の復興、経済に少しだけでも仕事で貢献できたらな。 7月1日、岩手県立大船渡市の県立高校で、HTML5の授業を行うことができました。…
最近は、HTML5でのコーディングが増えてきました。 と言っても、案件によっては重要なターゲットブラウザとして、IE8とかIE7とかが入っている場合は、HTML5に拘りすぎないという考え方もあると思います。ところで、一般的にHTML5でコーディングする場合、IE8…
その1 a をクリックすると、メッセージを出す html インラインで書いてみる <html lang="ja"> <head> <meta charset="UTF-8"> <title>javaScript</title> </head> <body> <a href="#" onclick="alert('No.0が押されました');">No.0</a><br> <a href="#" onclick="alert('No.1が押されました');">No.1</a><br> </body></html>
最近特に注目を浴びてる、Webフォント、Webアイコンです。 Webフォントはファイルサイズの問題とかあって、日本語ではロゴやタイトルだけ使うといった用途に限られちゃったりしているけど、アイコンとして使うのは非常に有効です。 とくに、Retina対応とか、…
久しぶりにSublime Text 3の新しいバージョンを入れてみた。 っていってもまだ、ベータ版だけど。。それでも、各種パッケージも対応してきたし、そろそろ乗り換えてもいいかな。久々にいじってみたら、 htmlを書いているときの閉じタグ、Dreamweaberだと、<…
最近特に注目を浴びてる、Webフォント、Webアイコンです。 Webフォントはファイルサイズの問題とかあって、日本語ではロゴやタイトルだけ使うといった用途に限られちゃったりしているけど、アイコンとして使うのは非常に有効です。 とくに、Retina対応とか、…
1.ダウンロードhttp://www.sublimetext.com/2公式サイトから、Windows 64 bit (PC環境に合わせて選択して下さい)をクリックし、ダウンロード 2.インストール ダウンロードした 「Sublime Text 2.0.1 x64 Setup.exe」 を実行する 3.パッケージコントロ…
Emmetのカスタマイズ シリーズ1 1で終わるかも。。(笑)前回、「Sublime Text2用ZenCodingで閉じタグの後ろにコメントを加える方法」という記事を書きましたが、ZenCodingの新しいバージョン、Emmetを使っている人も多いと思います。 そこで、今回は、Emm…
Fireworksなんかで、書き出したSVGを、いい感じにアニメーションにしてくれる Lazy Line PainterLAZY LINE PAINTER http://lazylinepainter.info/ ここにSVGファイルをドラッグすると、、、 こんな風にプレビューがでてきて、色味なんか調整できる。 そして…
前の記事(http://charlie.hateblo.jp/entry/2013/02/02/153002)で、Sublime Text 3 ベータに、Package Controlをインストールする方法(Windows)を書いたが、Emmetは、Package Controlだと、Sublime Text 2用がインストールされてしまいます。 そこで、Subl…
Sublime Text 2 での作業楽しいですね。 そんな作業をもっと楽しくするプラグインの紹介。 今回は、Color Picker。 CSSやSCSSを書いているとき、簡易にカラーコードを入力するのにとても便利! これ、とりあえずPackageインストールしている人多いと思います…
※2013.8.23追記:Subime Text 3のバージョンがあがり、もっと簡単にインストールできるようになりました。→ Sublime Text 3 に Package Control をInstallするのが簡単になったよ 昨日(2013.2.2)、Sublime text 3 ベータ版、build 3009 がリリースされた。…