自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

要素内のtextをタグで囲むスクリプト jQuery

タイトルではちょっとわかりづらいかな・・・。 例えば <h1>見出し</h1> というHTMLがあったときに、jQueryで <h1><div>見出し</div></h1> というふうに内側のテキストなどをタグで囲める。 通常なら普通にタグを記述すればいい話なのだが、 サイトを立ち上げてからかなり時間がたち全ての…

Atom URL編集時に10秒ほどフリーズする問題の原因

予想される発生条件 「autocomplete-paths ver 1.0.2」が有効 HTMLモードになっている(Plain Textモードでは発生しませんでした。) 上記の条件下でURLを編集した際に発生しました。 「autocomplete-paths ver 1.0.2」を無効化した状態ではフリーズせず。 …

同一ウィンドウ内にhtmlとCSSとJavaScriptを書いてリアルタイムプレビューできるなんて・・・

しかもブラウザ上で動作するなんて・・・ CodePenがこんなに便利なんて知りませんでした(´ェ`) 今までWEBプログラミング系のブログで何度か埋め込みを見たことはありましたが、実際に使ってみると使いやすいのなんのって! しかもemmetが使える 半信半疑で ! …

ページ内リンクをすべて滑らかにスクロールさせるjQuery

ページ内でのリンクを貼る場合 <a href="#pagetop">ページトップへ戻る</a> などと書きますよね。Q&Aのページなどの場合大変便利。 でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない! ちょっとこだわったサイトだとすーーっとスクロ…

【CSSで3等分】要素をきっちり三分割するスタイルシートの書き方

CSS

今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか? この書き方を知るまで僕は .col3 li { width : 33.33333% ; } のような書き方をしていました。 実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題も…

Android標準ブラウザでbackground-size: autoが機能しない

CSS

見出しの背景画像として、幅1pxの画像をリピート表示させようとしたところAndroid標準ブラウザでのみ機能しなかったお話。 Android標準ブラウザで背景画像が表示されない ChromeやSafariでは正常に表示されたがAndroid標準ブラウザのみ背景が表示されなかっ…

楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた

CSS

楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた 商品ページ共通説明文の画像に対して厄介なCSSが記述されていました。 gista516c703c5d264491359 共通説明文内の画像すべてにblock表示横幅最大100%余白0が、!importantで強制的に適用される…

あなたのブログ最適化出来てますか? PageSpeed Insightsチェックすべし。

Google Developers「PageSpeed Insights」を使えば自分のサイトの出来栄えというか改善すべき点をすべて洗い出してくれます。 100点満点中・・・61点! のように直感的にスコアが表示されるので分かりやすい! ちなみにこのブログCODE-LIFEはスコア61でした…

【jQuery】ホームページ読み込み時にローディング画面を表示させる

仕事でWEB制作している時に使ったもののメモ書きです。 年々回線速度はアップしているが、画像が多いページの場合は完全にページを表示するまでに時間がかかってしまうもの。 読み込んでいる間に右画像のようなローディング画面を表示する方法のうちなるべく…

<base target="_self">が効かない場合はJavaScriptで対応

インラインフレームを使用する場合はフレーム内のリンクにtargetをつけなければ、フレーム内部でページが開かれてしまう。 これを回避するために使われるのが 上記を<head>内に記述すればリンクのtargetが全て親ウィンドウで開かれるようになる。 しかし、この<base>タグ</base></head>…

WEB製作情報ブログ「CODE-LIFE」始動。

今年の4月からWEB製作の仕事を始めたが、やはり初めてやる仕事でつまずくことが多々ある。 もともと趣味でWEBサイトの運営をいくつかやっていたことが強みと自負していたが、あらためて仕事としてやっていくうちにCSS・JavaScriptなどのコーディングの奥深さ…