Chrome の loading="lazy" を試す | バシャログ。
どうもfujiharaです。梅雨の時期がやってきましたね。 皆さん梅雨の対策はしていますか？私はしていません。 本日は Chrome の img のプロパティ loading を試しましたので、 ご紹介します。 Loading Attribute 今まで画像の遅延読み込みする場合は img タグに クラスをつけて、 疑似画像を出しておき、スクロール範囲に入ったらローディングして表示などしていましたが、 これがあると自動で遅延読込してくれます。(Chrome) 既存のイメージと動画の遅延読み込み 確認 4月くらいでしたか、Chrome 75 からと言われていましたが、クロームのステータスを見ると 76になってますね。当初使えると思ってやってみたんですが、chrome:flags で Enable lazy image loading を Enabled にしてあげないと有効になりませんでした
なんとなく…改め、Vue.jsでCSSスタイルガイド作成に挑戦 | バシャログ。
一体型VRヘッドセット『Oculus Go』がそろそろ発売されるのではないかと、ドキドキしながら待っている kouraku です。おはこんばんちわ。199＄という低価格にも関わらず、スペックがそれなりにあるらしい・・・ので、ここから一気にVRユーザーが増えてくれるのではないか、と期待をしています。 さてさて、前回は Vue.js を使ってみたら、もしかしたらCSSのスタイルガイドが作れちゃうんじゃないの！？・・・ということで、marked.js と highlight.js を導入して見た目を整えたり、サンプルコードの下にサンプル表示を追加してみました。 なんとなく（今更ながら）Vue.jsを試してみた〜その２ これだけでもスタイルガイドの形に近づいて気がしますが、更にスタイルガイドとして機能させるために、色々と追加していこうと思います。 表示仕様を変更してみる 前回までの表示は、読み込ん
ワンポイントが楽しいサイトのまとめ | バシャログ。
間違いでもいいから３５０億送金されないかなぁ〜、gamiです。さて、今回は見つけると隣の同僚に教えたくなるようなワンポイントな仕掛けがあるサイトをピックアップしました。チェケラ！ みなとみらい21 横浜が誇る観光名所、みなとみらい21の公式サイトです。デザインも全体的にシンプルで爽やかな作りになっています。 左端にかもめのシルエットがありますが、スクロールすると羽ばたくんです！羽ばたかせたいが為にスクロールしてしまいます。スマホではないのが残念。 笹塚ボウル 笹塚にあるボウリング場のウェブサイト。ファミリー感のあるボウリング場をビビットな配色や大きめな見出しのレイアウトでおしゃれでクールな見せ方をしています。かっこいい。 トップへ戻るボタンがマウスオンでボウリング玉に変り、マウスオンするたび色が変わります。その他背景でボウリング玉が転がってたりピンが倒れたり。googlemapのピンもボウ
kouraku的、Macで仕事するときの３種の神器（アプリ）！ | バシャログ。
「シーブレインアドベントカレンダー2017」7日目担当するのは、kouraku です。おはこんばんちわ。 「これがないと仕事にならない！」というテーマの元、シーブレインスタッフが12月1日からクリスマスまで、毎営業日に記事を投稿しておりますが、前回はつぼログ。から fukazawa さんによる「ライムグリーンのぼよいやつ」でしたね。「ぼよいやつ」って何だろう？この不思議なタイトルだけで、ついついクリックしてしまいます（笑） ハイ、ということで、ワタクシ kouraku が思うところの「これがないと！」 MacとWindows、使用状況はハーフハーフ コーダーの仕事として、Windows歴が長い kouraku も、最近はMacで仕事を完結させることが多くなってきました。とはいえ、やはりWindowsでの表示・動作確認は行わないといけないし、案件によってはWindowsでしか開発ができなかっ
コーダー目線で始めるThree.js - その２ | バシャログ。
「DOCTOR AIR 3D SUPER BLADE」に乗り始めて約2週間が経ちました。毎日10分を2セット続けてきたところ、体重が1kg減りました！しかも、体脂肪率とか内臓脂肪率が緩やかな感じで下がり、骨格筋率もゆるやかに増加し始めています。このままガリガリに痩せてしまったらどうしよう、といらぬ心配をしている kouraku です。こんにちは。 前回の記事 さて、コーダー目線で始めるThree.jsということですが、前回は軽くWebGLについて触れ、WebGLを比較的容易に扱うためのライブラリ「Three.js」を使った最初の目標とするサンプルのご紹介まで書きました。 しかし、いきなり前回のサンプルを解説したところで「？」なことばかりだと思いますので、ここでは基本的な部分から学んでいきたいと思います。今回は主に概念的な部分を掴みたいと思いますので、kouraku なりに解釈したイラストを
Vagrant で手軽に CakePHP 開発環境が作れる Cakebox に WordPress を同居させる | バシャログ。
『仮面ライダードライブ』44話や45話みたいなお話にはめっぽう弱い kagata です。王道の展開だよなあと思いつつも、今月いっぱいは目が離せません。 さて、今回は開発環境構築のお話です。Vagrant を使って CakePHP の開発環境を立ち上げるのにたいへん便利な Cakebox というツールがあります。その環境に WordPress を同居させて動かしたいと思うことがあり、今回はその手順をまとめてみました。CakePHP と WordPress を連携させるシステムをつくりたい方、あるいは Cakebox のちょっと細かい Tips が知りたい方のお役に立てばさいわいです。 きっかけ Cakebox 上で WordPress を動かそうと思ったきっかけは次の記事です。 CakePHPとWordPressを連携するメリットとその方法 Vol.1 - KAI-YOU Lab CakeP
Google にクロールしてもらうように頼むツール、Fetch as Google | バシャログ。
この前の土曜日は、リーガ・エスパニョーラのバルサ vs レアルのいわゆる「クラシコ」をテレビ観戦したおかげで日曜が眠くて仕方なかった kimoto です。 ネイマールがすっかりフィットしてて驚きました。いやー、ジェフに来ないかなー。 さて本日は、世のウェブマスターの方々にはお馴染みだと思いますが、Fetch as Google をご紹介します。 Fetch as Google とは？ Fetch as Google とは、Google に対し、「クロールお願いします！」という申請をするツールです。 Google ウェブマスターツールを使っている人なら問題なく使えます。 どんな時に使うべきかと言うと、まずはやはり新規サイトを立ち上げた時。できてすぐだとなかなかクローラーが回ってきてくれないこともあります。まずはこれを使ってインデックスしてもらえるようにするといいでしょう。 また、既存のページ
HTML5広告を簡単に作成できる無料ツール Google Web Designer を試してみました | バシャログ。
こんばんは、Latinです。 最近話題の HTML5 広告デザインツール Google Web Designer を私も勉強がてら試してみました。 Google Web Designer をインストール Google公式サイトからダウンロードしてインストール。 https://www.google.com/webdesigner/ ↑画面真っ黒ですなぁ！ ↑「新しいファイル」から早速作ってみます。 ↑よくあるバナー規格サイズなんかをサポートしてくれています。 でも、正直よくわからん。 「場所」っていうのはパブリッシュする場所になるようです。 ↑今回は300×250pxのバナー作ってみます。 Flash のようなキャンバスが表示されました。 ↑とりあえずドラッグアンドドロップでアヒル君を設置。 ↑プロパティウィンドウからサイズ変更。 ↑こんな感じで。 ↑ツールバーの各アイコンの説明をまとめて
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
コーディングの効率化に効くと評判のツールを手軽に試せるサイト(+アドオン)4つ | バシャログ。
桜はまだか。hakoishiです。 さて、web制作界隈は次々に便利なツールが登場してきます。 「便利と評判のあのツール、使ってみたいけど導入が手間で…」 そんな時、web上で手軽に試せるツールがあったりすると嬉しいですね。 ってことで、今回はそういったツール達のご紹介です。 zen-codingを試す JavaScriptフレームワーク各種を試す LESSを試す vimを試す zen-codingを試す マークアップ効率化 - zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog) 「基本的な記法」まで移動して、各デモ欄の文末でtabを押してみてください。結構感動しますよね。 編集するとそれも反映されますので、いろいろ試してみてください！ 【参考】 物足りなくなったら、こちらも。 kzms2 zen-coding editor JavaScriptフ
【Dreamweaver】DreamweaverにExcelをプラスでちょっと省エネコーディング | バシャログ。
会社のPCの壁紙テーマを猫に変えたら、たまーに仕事中ニヤニヤするようになりました。hakoishiです。 怪しい者じゃないです。 さて、今回はExcelとDreamweaverの合わせ技でちょっと楽してコーディングする方法をまとめました。 Excelで整形してDreamweaverにコピペして調整、という流れです。 どういう時に便利？ 大きく分けて2つあります。 【パターン1】セル数が多いテーブルを大掛かりに改修する場合 ⇒例：製品のスペック表、スクールの講座一覧など 【パターン2】連番のリンク先や画像名を含み、繰り返しの多いソースの編集 ⇒例：一覧リストなど エクセルはテーブル（特に縦方向）や、連番の付与といった類の編集に強く、そして軽い。（Dreamweaverのテーブル編集、もたつきますよね。。） 全てをDreamweaverで完結させようとせず、Excelを経由する手もあると覚えて
Fireworks のリソースを公開している海外のサイトをピックアップ | バシャログ。
キノコのガチャポン、数回ガチャったけど、ベニテングダケとサンコタケしか出ない… シイタケが欲しいのに！ 今回は、前回に続き、Fireworks のリソースを公開している海外のサイトをピックアップしてご紹介します。 Fireworks Zone Fireworks のことならここだけ見ておけばオッケー、というほど Fireworks の情報が大量に集約されたサイトです。 チュートリアルもあるし、拡張機能もスタイルもライブラリもダウンロードできます。 Webdesign tuts+ Web デザイン系の話題を幅広く取り上げているサイトです。Fireworks の動画チュートリアルがあります。 Fireworks Lab Fireworks で制作されたデザインパーツが公開されています。ちょっと数は少なめかも。 ソースファイルをダウンロードすることができるので、勉強になります。 webporti
Fireworks のリソースを公開している国内のサイトをピックアップ | バシャログ。
CSS Nite im MIYZAKI, Vol.3 に出演してまいりました。宮崎、真剣に移住を検討するほどいいところでした。ご飯が美味しい！ さて、最近 Web クリエイターの方たちと話をしていると、今 Fireworks がきてるなーと思うことが多くなりました。 マクロメディア時代からの Fireworks ファンとしては、胸が熱いです。 今回は、Fireworks の便利なリソースを公開している国内のサイトをピックアップしてご紹介します。 Fireworks マニア Fireworks 関連のブログでは一番の注目度ではないでしょうか？ Fireworks を使って綺麗なデザインを作るテクニックがたくさん紹介されています。 「その機能をそんなところに使うの！？」といった、魔法のような Tips もたくさんあって凄いです。 Webデザインのタネ Fireworks 関連の Tips が公
ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
今日は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
サクッとFacebookページを作れるpagemode | バシャログ。
なぜか今マイダーツを買いました。minamiです。 facebookページ、やっぱり作るのめんどくさい！という方にちょっと便利なサービスをご紹介します。 http://www.pagemodo.com/ pagemodeは、facebookページを簡単な手順で作れてしまうサービスです。 まずはfacebookにログインした状態でサインインして、「+CREATE NEW PAGE」をクリックします。 自分のアカウントで管理しているFacebookページの一覧が表示されます。新たにタブを追加したいページを選択します。 いろいろなタイプのテンプレートからデザインを選べます！「Video」や「Coupon」のスタイルは無料版では使えないようです。 ページ色とレイアウトを選びます。下部のレイアウトパターンにマップが選べるのは便利ですね。 ページの各部分をポチポチクリックして編集できます。非常に簡単。
Web 製作者必携？iPhone からソースが確認できる「ScriptBrowser」 | バシャログ。
ペルー代表との試合を見ましたが、今のところ 3-4-3 はイマイチ機能してないですね。だんだんモノになっていくのか？ kimoto です。 この前、iPhone の Web ブラウザいろいろということでまとめの記事を書きましたが、今回もブラウザのご紹介をしようと思います。 html や js、css などを見ることのできる「ScriptBrowser」です。 まず普通にサイトを表示させたあと、「Source」をタップ。するとハイライトされた html のソースコードが表示されます。 「折り返されてないのが見づらいよ！」というあなたは右下のアイコンをタップすればちゃんと右端で折り返してくれます。 「いかんせん横が狭すぎだろ…」というあなたも、横画面にすればその悩みが解決します。さらにピンチアウト、ピンチインで拡大縮小もできます。 「html しか確認できないの？」js や css もちゃんと
Dreamweaverの全角・半角変換拡張機能 | バシャログ。
チャンピオンズリーグ決勝を見るために頑張って起きましたが、眠気のため後半途中で撃沈した sakai です。 お客様から原稿をもらったら、半角カナ、全角カナが入り混じり、数字も半角だったり全角だったり。機種依存文字も使われてたー！ なんてことがよくあるかと思います。 今回は Dreamweaver で全角・半角や機種依存文字を一括変換できる拡張機能をご紹介します。 こちら 全角・半角変換拡張機能 CS3 用とありますが、CS5.5 でも問題なく動作しました。 こんな感じでダイアログが出て、変換をすることができます。 これまでは秀丸のマクロを使って一括変換をして、それから Dreamweaver にコピーして… という手順を踏んでいましたが、この拡張機能さえあれば作業を Dreamweaver に一本化できるので、ありがたい！ 是非お試しください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【gulp】「gulp-」、「gulp.」で始まるプラグインをplugins.xxxxで利用する方法をメモメモ | バシャログ。
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。
【Sass】「ベースは既にできている。いざ初めてのSassで量産コーディング！」の時、まずはこれだけ覚えておきたい事 | バシャログ。