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

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

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

CSS

ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。

jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメージです。

headerにz-index:2;を指定する

z-indexを指定するにはpositionの指定も必要なので、position:relative;も指定します。 これでheaderが最前面に表示されることになります。

menuにz-index:1;を指定する

こちらはフローティング化するので、 position:fixed;とtop:0;を指定します。

これでheaderの背面に隠れることになります。

完成状態がこちら

See the Pen CSSのみで「スクロールすると表示されるフローティングメニュー」 by maru (@maru0014) on CodePen.

headerに背景色もしくは背景画像を付けるのを忘れずにね！

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座

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

jQuery

IE11では正常にhtmlが読み込まれるのに対して、IE10では表示されない。

IE10は.load()メソッドは対応しているはずなのに・・・。

まず疑ったのはキャッシュ。
キャッシュを全て削除して更新してみたが改善されない。

原因は・・・・。

<script>
  $(function() {
    // 文字コードの修正
    $.ajaxSetup({
      beforeSend: function(xhr) {
        xhr.overrideMimeType("text/html;charset=euc-jp");
      }
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>

上記を見たら皆さんお気づきかと思いますが、僕は15分くらい悩んだ末IEのデバックツールで見たら一発でした。（一番最初に確認するべきだった・・・）

文字コードの指定が非対応

文字コードの修正の部分は、euc-jpで作られたhtmlがajaxによってutf-8に強制変換され文字化けしてしまうのを防ぐために書いたのですが、overrideMimeTypeはIE10以下非対応でした。

これのせいでscriptが停止し、読み込まれなかったわけです。

IE10はまだまだ利用者の多いブラウザのため切り捨てるわけにはいかず、パーツとなるhtmlの文字コードをutf-8にし、overrideMimeTypeを廃止しました。

念のため.load()のキャッシュを無効にする

今回の件で調べているうちにキャッシュが原因で1回めのアクセス時に表示されず、リロードすると表示されるなどの不具合があるという記事が見つかったので、念の為にキャッシュさせない設定を組み込みました。

<script>
  $(function() {
    // キャッシュOFF
    $.ajaxSetup({
        cache: false
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>

要素内の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が使えるのも楽しすぎる。

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