Googleスプレッドシートで作成したファイルリストをVue.jsで表示する：IE11対応編 | バシャログ。
まさかの２週連続台風により週末が終わってしまいそうで、ちょっと悲しい kouraku です。おはこんばんちわ。予定は何も入れていなかったので、それだけが救いですね。。。 さて、前回『Googleスプレッドシートで作成したファイルリストをVue.jsで表示する』というお題にチャレンジしましたが、実は１つだけ問題がありました。それは・・・ IE11だと表示されないよ！！！！ ・・・はい、分かっていたのですが、コーディング中にIEを使うこともあまりないだろう・・・と思い放って置いたんです。 でも、仕事を進め行く内に、「IEでもちゃんとファイルリストが見られないと面倒！！」という場面にチョイチョイ出くわしたので、やっぱり直すことにします。 ということで今回は、このファイルリストをIE11でも表示できるように修正をしたいと思います。 まずはIE11のコンソールでどのようなエラーが起きているかチェック
順番を指定するCSSを使い倒す！-ほにゃらら-childとほにゃらら-of-typeの違いとその辺の便利な使い方- | バシャログ。
調べてみたところこれだけの種類があります。 全部は覚えられないよ！と思うかもしれませんが、実は10個全て覚える必要はありません。 種類＆ほにゃらら-childとほにゃらら-of-typeの違いがわかれば、組あわせでわかっちゃうんです。 ほにゃらら-childとほにゃらら-of-typeの違いは何？ :first-childと:first-of-typeで違いを見てみたいと思います。 //HTML <dl> <dt>dt</dt> <dd>１番目のdd</dd> <dd>２番目のdd</dd> <dd>３番目のdd</dd> </dl> １番目のddを指定する場合、dd:first-childを使うことはできません。 使うのはdd:first-of-typeです。 ほにゃらら-childは要素すべての順番を指定するもので、例のHTMLの場合は最初の子要素はdtなので指定できないわけです。 そ
JSテンプレートエンジン「Nunjucks」とgulpで快適HTMLコーディング
もうすぐハロウィン。アラフォーにもなって今週末にはじめて仮装してみることにしました ishida です。 はじめてのことで、何に仮装すれば迷いまくっています。 さて、今回は、テンプレートエンジン「Nunjucks」についてご紹介です。 Nunjucks とは FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。 Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。 githubでのstar数は、4660（2017/10/26現在）です。 Nunjucks 特徴 node.js で動作 マクロ定義 オートエスケープ リッチブロックの継承 extends によるテンプレート継承 block によるエリアの継承 include による外部ファイル読み込み などです。 記述サンプル 以下が、Nunjucksのコードサンプルです
便利なモーダルプラグイン MODAAL | バシャログ。
どうもfujiharaです。今年度も残す所あと1ヶ月になりましたね。 今回は今年知った便利なモーダルプラグインであるMODAALを紹介します。 何が便利？？ このプラグインを紹介したいと思った一番の理由はモーダルを表示したときに 背景がスクロールしないところです。 モーダルを導入するときに背景を固める処理を毎回入れなくてすみます。これがそれが大きい！ 基本的な使い方 使い方は一般的なモーダルプラグインと似ています。 モーダルを開くリンクタグを作成してモーダルの設定を入れて呼ぶだけです。 header <link rel="stylesheet" href="//cdn.jsdelivr.net/modaal/0.3.1/css/modaal.min.css"> <script src="//cdn.jsdelivr.net/modaal/0.3.1/dist/js/modaal.min.j
【jQuery】IE8以下で透過PNGのopacityアニメーションが黒く汚れるのを回避する | バシャログ。
そうめんと水出しのお茶があれば生きていける気がしてきたhakoishiです。 さて、今回はjQueryで透過PNGのopacityアニメーションがバグるのを回避する方法です。 透過画像をアニメーションさせた時、IE8以下でフチが黒くなって困った経験をお持ちの方、いらっしゃるのではないでしょうか？ 発現条件 発現する条件は、この4点です。 画像は透過png。 画像自体にopacityアニメーションを設定している。 画像にフィルター（AlphaImageLoader）をかけている。 ブラウザはIE8以下。 回避するためのポイント 回避するためのポイントはこの2点。 画像にフィルター(AlphaImageLoader)をかける。 アニメーションの対象を、その画像を包括する要素にする。 移動やサイズ変更もしたい場合、包括要素も画像と同じサイズにしておくと扱い易いと思います。 サンプルを作りましたの
【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ | バシャログ。
こんにちは、ishida です。 先週金曜日、横浜スタジアムでノーヒットノーランをこの目で見ました。 やっぱり野球はスタジアム観戦がいいですな。 さてさて、以前こちらのブログで 【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ という記事を書きましたが、今回はこちらの続編でcheckboxカスタマイズをご紹介します。 ソースコード コードはこちらです。 あっ、それと バシャログ。で js.do.it アカウントを作成しましたので、 よろしければフォローしていただると幸いです。 ポイント checkbox本体を、appearanceプロパティをbuttonにしています。 checkboxがチェックされた場合に、:checked疑似クラスをつかいます。 :checked疑似クラス ＋ before疑似要素 ＋ after疑似要素を組み合わせて、チェックされた時のデザインを作
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
【CSS】リンク関連擬似クラス（テキストリンク）は複数設定可能なので訪問済み＋マウスオーバーも設定できる | バシャログ。
今週末は地域の餅つき大会、つくことより食べることに専念しようと思っているishida です。やっぱ、つきたての餅はあんこにかぎるよねっ！ とある案件にて、ほぇー。知らなかったわーとなったのでメモメモ。 :link 、:visited、:hover、:activeとテキストリンクに関連する疑似クラスがありますね。 この擬似クラス、複数設定することも可能でしたので簡単にご紹介。 まずはおさらいってことで、上のようなテキストリンクがあるとします。 CSSを記述すると以下のようになります。 a:link { /* 通常テキストリンク */ color: #0066FF; text-decoration: underline; } a:visited { /* 訪問済みテキストリンク */ color: #800080; text-decoration: underline; } a:hover {
Fireworks のリソースを公開している国内のサイトをピックアップ | バシャログ。
CSS Nite im MIYZAKI, Vol.3 に出演してまいりました。宮崎、真剣に移住を検討するほどいいところでした。ご飯が美味しい！ さて、最近 Web クリエイターの方たちと話をしていると、今 Fireworks がきてるなーと思うことが多くなりました。 マクロメディア時代からの Fireworks ファンとしては、胸が熱いです。 今回は、Fireworks の便利なリソースを公開している国内のサイトをピックアップしてご紹介します。 Fireworks マニア Fireworks 関連のブログでは一番の注目度ではないでしょうか？ Fireworks を使って綺麗なデザインを作るテクニックがたくさん紹介されています。 「その機能をそんなところに使うの！？」といった、魔法のような Tips もたくさんあって凄いです。 Webデザインのタネ Fireworks 関連の Tips が公
地味に便利なコーダーさん向けのジェネレーターまとめサイト「Web制作小物ツール」 | バシャログ。
ボジョレー・ヌーボー解禁日、今日は買って帰るけどワインはあまり飲めないishidaです。 Web制作に関連するジェネレーターサイトはいろいろありますが、個人的によく使っているサイトをご紹介します。特にコーダーさん向け。 http://webtools.dounokouno.com/ サイト名からあまり想像できないですが、地味に便利なジェネレーターが６個あります。 ダミーテキストジェネレータ システムなどで文字数制限する際のサンプルやデザインやワイヤーフレームなどに使えます。文章のパターンも、坊ちゃん・徒然草・英語など７種類から選択できます。 パスワードジェネレータ 4〜20桁のパスワードをランダムに生成。一度に20個まとめて作れます。 Basic認証コードジェネレータ 名前の通り。.htaccessと.htpasswdが作成できます。 HTMLエンティティ化 HTML内に掲載するメールアド
ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった！後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book
Webデザインのツール、FireworksとPhotoshopは何が違うの？を考えてみた | バシャログ。
はじめましてバシャログメンバーにデザイナーとして 10月末から加わりましたkojimaです。 わたくし、こちらに所属して先日初めてFireworksCS5触りました！ CS3をちょいちょいお直しレベルでしか触ったことなかったので 新鮮！！を通り越してさっぱりわからん！ というわけでFireworksとPhotoshopどこがどう違うの？から考えてみました。 PhotoshopでWebデザイン もともとPhotoshopは名前の通り写真屋さん、写真/画像編集ツール。 その繊細な描画力が仇となり、Webのデザインをしようと思うと シェイプが滲みが気になったり、レイヤーが200枚を越えたり。 でもやっぱ絶妙な質感再現しちゃう画像処理すんばらしい！ FireworksでWebデザイン もともとMacromediaがWebデザインツールとして開発。 共通パーツ作る時に大助かりなシンボル化機能 1ファ
[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
ここ最近はピンク・フロイドを BGM に就寝している sakai です。どんどん陰気になってきている気がします。 11/12（土）に開催される「CSS Nite in MIYAZAKI Vol.3」に出演させていただくことになりました。 近隣の方、ご都合の合う方いらっしゃいましたら是非。Fireworks や Dreamweaver を使って効率よく Web 制作をするノウハウをご紹介する予定です！（詳細は近日公開します） さて、今回は先日リリースされた「Adobe Fireworks CSS3 Mobile Pack」のご紹介です。これはなかなかイイモノですよ！ インストール 拡張機能のダウンロードはこちらから。 Adobe Fireworks CSS3 Mobile Pack Download のリンクをクリックすると、Adobe Extension Manager が立ち上がって、自
【Fireworks】iPhone 画面パーツ集 | バシャログ。
iPhone 4 が発表されて、いつになったらそのスマートじゃないフォンやめるんだよ、ということを聞かれます toyama です。 スマートになりたいですね！身も携帯も！ というわけで、巷でもシーブレインでも iPhone 関連の制作が増えそうな気配です。 画面のサンプルを作って見せてくれ、なんてことを急に言われる可能性もありそうです。 サイトデザイン用の準備はあっても iPhone 用の画面デザインの準備は整ってない！ そんな私にぴったりのパーツを配布してくれているサイトをご紹介します。 Blog*spark Blog*spark Fireworks toolkit for creating iPhone UI mockups iPhone 3GS のあらゆるパーツがベクトルデータでみっちり集められています。 素材としても大変きれいで、作り方など見ても大変勉強になりますね。 一部 Pho
【Fireworks】144種類のテクスチャがセットになった拡張機能 「Texture Collection」 | バシャログ。
こんばんは、最近「ももいろクローバーZ」にハマってしまいましたishidaです。 先月発売された1stアルバムを買うか否か迷ってます。 今週末土曜日に、読売ランドでライブもあるんだよなぁ～。 さてさて、今回はちょろっとFireworksの拡張機能のご紹介です。 拡張機能にもいろいろありますが、 汎用的に使えそうな144種類がセットになった拡張機能です。 mxp形式で配布されているので、 インストールするとFireworksプロパティパネルの［テクスチャ］にドーンと表示されるようになり簡単に使えます。 テクスチャ画像を配布しているサイトはよくありますが、拡張機能として配布しているのは珍しいですね。 配布元サイト Texture Collection 144 - Fireworks Zone
【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。
こんにちは、シーブレインの toyama です。梅雨入りです。 サムネイル用の画像など、一定の大きさにそろえた画像を大量に書き出さないといけないときが、長い人生に一度や二度はあると思います。 私にも以前そんな瞬間があったのですが、その頃にこの技知ってればー！という技を今更知ったのでここに記しておくことにします。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで、適当に（いい意味で）画像を配置します。 3.「コマンド」→「ドキュメント」→「レイヤーに配分」。すると、適当に読み込んだ画像が一枚づつレイヤーに格納されます。 4.画像を書き出すための「最適化」を設定したあと、「書き出し」ます。 5.書き出しのダイヤログが出てきます。「書き出し」のプルダウンメニューから「レイヤーをファイルに変換」を選択します。3.で画像をレイヤーに分
[使える CSS テクニック] CSS で DL を float して表組みのように表現する | バシャログ。
使える CSS テクニック第 5 回、「CSS で DL を float して表組みのように表現する」です。 何かと便利な定義リストですが、今回は dt と dd を並列に並べて、テーブルのように表示する方法をご紹介します。 よく使われる定番の方法で、難しいものではないですが、少しだけクセがあります。 ベーシックなテーブル まずは下のような、会社紹介などに使われる汎用的なテーブルです。 基本的に dt に float を設定して、dd は dt に乗っかる形になります。 [サンプル] 会社名 株式会社シーブレイン 住所 横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F 電話番号 045-650-6210 [HTML] <dl> <dt>会社名</dt> <dd>株式会社シーブレイン</dd> <dt>住所</dt> <dd>横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F<
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた | バシャログ。![[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2a2c11b17693e3812ca5043c1de13f337332706/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_dreamweaver.png)
CSS3のbox-shadowプロパティではなくCSS2で実装するbox-shadowみたいなやつ | バシャログ。