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

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

同一ウィンドウ内に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などのコーディングの奥深さ…