HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

ExcelVBAでセルの文字列の折り返しを解除する方法.WrapText = False

この記事でできるようになること セル内改行を含むエクセルのシートをVBAで折り返し解除する セル内改行があると勝手にセルの文字列が折り返される VBAで商品ページデータなどを処理することが最近多いんですが、このようなHTMLを含むセルはCSVを読み込んだ…

【脱jQuery?】jQueryみたいなセレクタが使えるdocument.querySelectorが便利

この記事でできるようになること jQueryを使わずに#myID .myClassみたいなセレクタが使えるようになる ちょっとしたjavascriptを書くだけなのにCSSっぽいセレクタを使って楽したいがためにjQueryライブラリを読ませるのは面倒。 document.getElementById('aa…

HTML要素を超簡単に横並びにできるCSSの書き方 Flexbox

この記事でできるようになること divやliの表示をキレイに簡単に横並びにできる 去年(2016年)くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout(フレキシブルボックスレイアウト)。通称flexbox。 そろそろ使っても良いんじゃ…

【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ

CSS

clearfixが適用されていない状態 See the Pen flow-root by maru (@maru0014) on CodePen. float:left;でdiv要素を横並びにしましたが、clearfixを行っていないため外枠の.rowが上の方でちっちゃくなってしまいました。 現状で最もスマートな、短いclearfix…

jQueryを使わないjavascriptでの要素取得方法とテキストの書き換え

今までなんとなーくで書いて、動くからまぁいいか。でやってきてたjavascriptをきちんと勉強しようと思うので、少しずつメモ書きをためていきます。 今回はhtmlドキュメントツリー内の「id」、「class」、「name」を指定して要素取得します。 IDでテキストを…

シートの最終行番号を取得するユーザー定義関数 - VBA(エクセルマクロ)

VBA

最近仕事で受注・発注業務のオートメーション化をするにあたって、VBAで良く使う「シート内で利用している最終行番号を取得する」 と 「特定のセルを基準に一番下のセルの行番号を取得する」ユーザー定義関数をメモとして残しておきます。 シート名を引数に…

Google Analytics の文字化けしたURLを日本語に変換するブックマークレット

Google Analyticsの画面では日本語URLは文字化けしてしまう 参考画像はこのブログのアクセス解析結果ですが、3番目のページはURLが文字化けしていますね。 これはURLに日本語などのマルチバイト文字のURLが使用されているためです。 この状態ではどのページ…

楽天市場RMSページでscriptタグ(禁止タグ)を有効にする方法(スマートフォン限定)

この記事でできるようになること スマートフォンページ(トップページ・商品ページ・カテゴリーページ)などで任意のscriptを実行 (楽天GOLDで実行したscriptのhtmlをフレーム読込するとか茶地なものではありません。) 楽天市場のRMSで管理しているページ…

最新良くわからないウェブ用語とマーケティング用語 eコマースEXPO2016

2月16日と17日にeコマースEXPO東京2016に行ってきました。 さすがにビッグサイトでやるだけあってそれなりの規模。 そして感想を一言で言うならマーケティングオートメーション!マーケティングオートメーション!うるせー! マーケティングオートメーション…

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。 qiita.com これがすごく便利! このscriptでできる…

マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery

.hogehoge { pointer-events: none; } 例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を .soldout { position: relative; } .soldout:after { content: "" display…

自動でファイル名に日付を入れてバックアップするバッチファイル

bat

1.下記のコードをテキストエディタにコピペ setlocal rem /* 今日の日付を取得(yyyymmdd) */ set now=%date:~-10,4%%date:~-5,2%%date:~-2,2% rem /* ○○に日付を入れてをバックアップ */ xcopy /Y /E C:\○○ D:\○○_%now%\ rem /* 一時停止 */ pause endlocal …

CSSで画像をぼかしてオンマウスした画像だけ鮮明に

CSS

See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen. img { width:30%; -webkit-filter: blur(2px); filter: blur(2px); } filterプロパティはその名のとおり画像にフィルターをかけることができます。 これを使…

CSSのみで「スクロールすると表示されるフローティングメニュー」

CSS

ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。 jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメー…

.load()メソッド IE10で読み込まれない原因は

IE11では正常にhtmlが読み込まれるのに対して、IE10では表示されない。 IE10は.load()メソッドは対応しているはずなのに・・・。 まず疑ったのはキャッシュ。 キャッシュを全て削除して更新してみたが改善されない。 原因は・・・・。 <script> $(function() { // 文…

要素内の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】htmlページをパーツごとに分けて読み込む方法

最近仕事で使った方法なのですが、今時はあまり使われないかも。 この記事でできるようになること ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理 切り出したHTMLファイルをjQueryで動的に読み込む PHPなしで制作するWEBページは管理が煩雑…

ページ内リンクをすべて滑らかにスクロールさせる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などのコーディングの奥深さ…