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

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

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

jQuery

タイトルではちょっとわかりづらいかな・・・。

例えば

<h1>見出し</h1>

というHTMLがあったときに、jQueryで

<h1><div>見出し</div></h1>

というふうに内側のテキストなどをタグで囲める。

通常なら普通にタグを記述すればいい話なのだが、

  • サイトを立ち上げてからかなり時間がたち全てのhtmlを更新するのが困難な場合
  • ブログやECサイトなどでhtmlを変更出来ない箇所がある場合

などに便利である。

See the Pen 要素内のtextをタグで囲むjQuery by maru (@maru0014) on CodePen.

上記の場合はボーダーがついたh1タグの内側をdivで囲みdivに対してborder-leftを付けることで見出しのデザインを作っている。 このように既存のhtml構造では不都合がある場合に一括でタグを追加することができる。

使い方

jQueryの読み込み

このスクリプトはjQueryが必要なので、まず
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
を記述してライブラリを読み込む

スクリプトを記述
<script>
  $(function(){
   $("外側のタグ").wrapInner("内側を囲むタグ");
  });
</script>

と記述。
今回の例の場合では

<script>
  $(function(){
   $("h1").wrapInner("<div></div>");
  });
</script>

となる。

　
以上、要素内のtextをタグで囲むスクリプトでした。

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

f:id:maru0014:20151203104450p:plain

予想される発生条件

 
  • 「autocomplete-paths ver 1.0.2」が有効
  • HTMLモードになっている（Plain Textモードでは発生しませんでした。）
 
上記の条件下でURLを編集した際に発生しました。
 
 
「autocomplete-paths ver 1.0.2」を無効化した状態ではフリーズせず。
 
その他のパッケージとの干渉というわけでもなく単体で発生しました。
 
 
autocomplete-pathsとは
URLを入力時にプロジェクトフォルダ内のファイルパスに似たようなフォルダ名やファイル名があればオートコンプリートしてくれるパッケージ。
 
プロジェクトフォルダ内の検索がフリーズの原因かと思われる。
フォルダが多すぎるせいで検索に時間がかかっているのかもと思い、ファイル単体での編集も試みたが同様の現象が発生。
 
やむなく機能を無効にし、次のアップデートで修正されるのを待つことにする。

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

ツール

f:id:maru0014:20151105210519p:plain

しかもブラウザ上で動作するなんて・・・ 　 CodePenがこんなに便利なんて知りませんでした(´ｪ`)

今までWEBプログラミング系のブログで何度か埋め込みを見たことはありましたが、実際に使ってみると使いやすいのなんのって！

しかもemmetが使える

半信半疑で ! を入力してTABキーを押してみると・・・使えた！

素晴らしい。スニペットとかちょっとしたコーディングならエディタ起動するまでもないですね。

使えるスニペットが盛りだくさん！

他のユーザーが公開しているcodeが使えるのも楽しすぎる。

ボタンデザインとかだけでも参考になりますなぁ。

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

jQuery JavaScript

f:id:maru0014:20151019221044p:plainページ内でのリンクを貼る場合

 

<a href="#pagetop">ページトップへ戻る</a>

 

などと書きますよね。
Q&Aのページなどの場合大変便利。

でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない！

ちょっとこだわったサイトだとすーーっとスクロールして表示されます。

上に行ったのか下に行ったのか分かりやすく、何より今風でいいですよね。

 

これを簡単に実装できるようにコピペできるソースを公開！

 

 

 

上記を

<head> ～ </head> 内 もしくは</body>直前に挿入。

これだけで滑らかにスクロールされます。

 

※「リンクが ＃ で始まる場合」という指定なので別ページ間でのスムーズスクロールは不可です。

 

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

CSS

今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか？

この書き方を知るまで僕は

.col3 li {
  width : 33.33333% ; 
}

のような書き方をしていました。

実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題もあるかもしれませんが割り切れない 余り があるのがちょっと許せない。

width: 1/3;

みたいな書き方ができたらいいのになー　って思ってました。 で、探してみたところ発見！

1/3サイズを指定する方法があったんです！ 感動(´ｪ`)

　

CSSで計算式を可能にするcalc

対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降 　

使い方：

.col3 li {
  width : calc(100% / 3) ;
}

これだけ！ 簡単ですね。全体の幅100%の3分の1サイズという、まさに僕が探していた等分指定！！！

　

上記にさらにベンダープレフィックスを付け加えて・・・

li.3col {
  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}

これで完成形です！！

See the Pen width: calc() by maru (@maru0014) on CodePen.

ウェブページ製作で実際に使う場面としては、ランキングのトップ3を横並びにさせたい時なんかオススメです。

2017/11/19追記 主要ブラウザの対応状況

f:id:maru0014:20171119165559p:plain 参考: Can I use... Support tables for HTML5, CSS3, etc

執筆時点の2015年においては未対応ブラウザに留意すべきと考えられましたが、現状の主要ブラウザは全て対応済みなのでベンダープレフィックスやフォールバックも不要かもしれません。

※個人的な意見です。実装の際はアナリティクスで利用者の使用ブラウザを調査した後判断しましょう。