【無料】画像の文字をテキストに書き起こす魔法の機能が、簡単に使える!!

こんにちは!bibiです。

クライアントから画像をもらって中身を文字起こしする・・・
無駄な作業TOP10に入るこの業務、人類ならば一度は経験していますよね!?

そんなあなた(僕)に朗報が!!!

なんと、画像をアップロードしてちょいちょいするだけで、
無料で文字お越ししてくれる機能があるのです!!!

手順としては、超簡単!
グーグルドライブを使います!

1.PCで文字起こしをしたい画像をグーグルドライブにアップロード
2.その画像を右クリック。「アプリで開く」から「Google ドキュメント」を選択

これだけ。

別ウィンドウが開き、ドキュメントシートの下に、起こされた文字がテキストで入っております!

これ、かなり精度が高い!
注意点としては、
・ファイルサイズを2MB以下
・テキストの高さを10px以上
・画像の向きをそろえる

コントラストがはっきりした画像だと、より正確になります。

僕の脳内もこんなばっちり書き写されちゃいました!///

それじゃあ!快適なWEBライフを☆彡

ちょっぴり差をつけよう!斜め背景のデザイン

こんにちは!bibiです。風邪が流行ってますねー
自分もその流行に乗りいまだに喉がつらいのと鼻が利かない後遺症に悩まされております。

鼻が利かないと味がよくわからないんですよね!
食事が美味しく摂れないことが風邪ひいたことより凹んでおります。。
まあ風邪には恨みはありませんよ!!むしろ少し休めてよかっ(略)

皆さんも風邪、気を付けてくださいねー! 風邪にはビタミンCと、身体を温かくして
さっさと寝ちまうのが一番ですよ★ミ

それじゃあ!快適なWEBライフを☆彡

 

 

 

 

 

 

 

 

おっと忘れてた・・・

 

 

 

 

 

 

 

 

記事ですよ記事!

誰も書かないなんて言ってないじゃないですか!!(逆ギレ)

 

 

 

 

えーと・・・

 

 

今回は・・・

 

 

誰にでも簡単にできます!背景を斜めにするデザインです!

 

htmlはまずこちら。

おっと心の声がだだ洩れ。。まあ事実ですからねしょうがないね。

 

CSSは以下を書いてください。背景の色は僕の怒りを表しています。

これで準備完了!カンタンでしょ。。

 

 

ポイントは、背景に色を付けて、

 

ここで角度をつける。

 

斜めデザインだと初見で「おおっ!」って思われること請け合いです!

CSSのみで意外と簡単にできるので、皆さまお試しあれ!光あれ!

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

こんにちは!bibiです。

今回は、テキスト選択時のハイライトのカラーを変更する小技をこっそりお教えします!

工程は超カンタン!

cssにこちらを記述します。今回はハイライトに鮮やかな赤色を指定。

これでOK!どうでしょう!この1ステップのみのお手軽さ!!!

ここに例えば、文字色自体をこのように変えたり

P要素のみに限定してハイライトをつけたり

意外と自由度高く行うことができます!

これであなたもハイライト・マスター!!!!

初心者でも安心!マウスホバーエフェクトが100種類も!?超絶使えるhover.cssのご紹介!

こんにちは!bibiです。

今回は、ホバーするだけでいろいろと動きを出し、
リニューアルなどに超絶使えるhover.cssの使い方です。
今回は、ボタンを作って、動かしてみましょう。

行程はわずかにこの4つだけ。

1.をダウンロードして所定の場所に設置
こちらのサイトで、一括ダウンロードから直接ダウンロードします。
使用するのはhover.cssだけで大丈夫です。
ダウンロードしたら、cssフォルダに置けばOK!

2.hover.cssのリンクをhtmlに記述
続いてこの記述を、htmlの所定の位置に記述します。簡単ですね!

3.hover.css用のタグを設置
次に、ボタンを作るコードを、所定のcssに記述します。

4.htmlに、ボタンを設置する
最後に、このコードをボタンに記述します。

これで準備はOK!あとはclassの部分に動きのクラスを付与するだけで、簡単に動かすことができます。

hover時に”震える”ボタン

hover時に”左から右に色がつく”ボタン

このクラスは複数記述することもできます。ちなみに最後のコードは、ボタンではなくてもimgやh1、pタグなどにもつけることはできるので、簡単に動きを出すことができます!

こんな感じですね。

いかがでしょうか?JavaScriptを使わないので、シンプルにできますよ。
動的なWeb作成ライフを満喫しましょう!

これは使える!無料【 Chrome拡張機能】

こんにちは!bibiです。
今回はweb関係者にオススメ!
使って便利!なGoogle Chromeの拡張機能を紹介します!

 

Altチェッカー【Popup Image Alt Attribute】

「あれ、あの画像のaltって何書いたっけ・・・?」
「大量にコピペでhtmlタグを量産したけど、alt変えたっけ・・?」
そんなあなたに朗報!この拡張機能をインストールすれば、
なんとhoverするだけでaltが表示されます!
いちいち検証やソース見に行ったり検索したりせずに楽々便利♪
Popup Image Alt Attribute

 

キャッシュクリア【Clear Cache】

「再読み込みするだけじゃ、変更が表示されない・・・」
皆様、経験ありますよね!?
「設定からキャッシュクリアを・・・あれ、履歴からだっけ・・・?」
あるある!こういうので意外と時間かかっちゃったりしますよね!
この機能は、1クリックでキャッシュをクリアしてくれる優れものです!

なお、オプションからReloadにチェックを入れると、1クリックで
再読み込みとキャッシュクリアを同時に行うことができます!
納期の差し迫った時期に1秒でも節約したい、そんなあなたにオススメです!

Clear Cache

 

fontチェッカー【What Font】

気になるあのサイトのあのフォントが、1クリックで簡単に確認できます!

What Font

 

タグエラーチェッカー【HTMLエラーチェッカー】

表示ページを自動で検証してくれて、抜けタグなどタグエラーがあれば教えてくれます!我が社は大丈夫なようですね、(´▽`) ホッ

HTMLエラーチェッカー

 

クロームユーザーならひとつ1分程度で瞬速追加可能です。
どの機能も、あるとちょこっと便利になったり、作業時間を節約できる優れモノです!
是非是非、日々の社畜workライフに利用してみてください♪