mania-ku

何か作りたいプログラマ未満。

ニートの間に暇つぶしに読んだWeb漫画

最近転職しました。
忙しくて就業中に転職できず、しばらくニートでした。
その間に暇つぶしに読んだWeb漫画からオススメのものをピックアップします!

ぎじん課っ!ω!

ギャグ。主人公がぎじん課でイケメン?とぐだぐだ日常を送っている漫画。主人公が太ってるとか言われてますが、一体何キロなのか・・・そして同僚のぎじんの面々の体どうなっているのか・・・

きみのこえ。

ドームの外と中で生活する二人が惹かれあっていく話。ワルツという人語を操る毛玉みたいな猫みたいな何かがカワイイ

それゆけ女子高専生

高専生の日常漫画。高専って寮必須だと思っていたけど、そうでもないらしい。

でしにっき

主に江戸端唄の漫画。伝統芸能や着物、関西の話なんかもあります。
この漫画に出てくる師匠の笹木 美きえ先生をちょっと調べてみたら、かなりの美人でした。漫画そっくり〜

英国紳士と国際結婚@ロンドン

英国紳士と国際結婚した人のロンドンぐらしの話。元Web屋さんだとかでブログタイトルがSEO対策っぽくなったらしいw

猫はまたたび – GANMA!(ガンマ)

ねこが可愛すぎてやばい

まめきちまめこの日常

ニートのまめこの漫画。絵がゆるいし、話もゆるい。
たまにニートじゃなくてアルバイターになったりする

ゲルマン日和

とりあえずビール(すげえ名前だ)さんのイギリス人夫との日常漫画。
最近第二子が生まれたとのことでおめでとうございます!

Web漫画以外でオススメ

よしなが先生のご飯の絵はおいしそうすぎる やっと3巻でた!! この作者筆が早すぎやしませんかね・・・気づいたらもう20巻です ブッタとイエスが仲が良い漫画が描けるとこが日本のいいところな気がします。 お嫁さんが宇宙人の日常漫画。 作者がなくなってしまって続きは出ないと思いますが、娘の成長がみたかったなぁ・・・

【jQueryプラグイン】高さを揃え&レスポンシブ対応のjquery-match-heightがすごい便利

高さをそろえる系プラグインは色々試してきましたが、最近見つけたliabru/jquery-match-height · GitHubが大変便利です。
幅が変わって横に並ぶ数が変わっても、高さを合わせてくれるのです!レスポンシブサイトを作るときは大変便利です:)

メリット

  • ・レスポンシブで列の数が変わっても、その列で自動に高さを揃えてくれる
  • ・padding,margin,border,box-sizingに対応
  • ・非表示の要素は無視してくれる
  • ・IE8+に対応
  • ・削除できる
  • ・正しいスクロール位置を維持する
  • ・必要なときに高さを更新することもできる

デメリット

デモ:jquery-match-heightデモ – js do it

【jQuery】「Uncaught Error: Syntax error, unrecognized expression: [name=]」というエラーが出たら

$('input[name='text']');

のような内側外側の引用符が同じことが原因です。
jQueryの仕様が変わって、エラーが出るようになったみたいです。

修正の方法は【jQuery】引用符とエスケープを覚える | mania-kuをどうぞ。

【Chrome】オートコンプリートのとき、背景を黄色にしないようにする方法3つ

Chromeでオートコンプリートのときに、標準では背景が黄色になります。
これをしない方法3つです。

CSSでの解決策

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px [背景にしたい色] inset;
}

HTMLでの解決策

<form autocomplete="off">
</form>
<input autocomplete="off">

jQueryでの解決策

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('input').attr('autocomplete', 'off');
}

【Custom Scrollbar plugin】カスタムスクロールバー中のareaがスムーズスクロールしちゃう

Custom Scrollbar pluginのバージョン2.8.3を使ったカスタムスクロールバー中にareaがあると、クリックしたときにページ最下部へのスムーズスクロールになってしまいます。

bugfix

jquery.mCustomScrollbar.js内のareaの記述を削除します。
でもtextareaのほうは消さないように気をつけてください。そうすると直ります。

【HTML5】Videoが動かないときに確認すること

<source src="video/***.webm" type="video/webm">
<source src="video/***.mp4" type="video/mp4">

このようなコードでIEやChromeでVideoが動かない場合、mp4がH.264タイプではなく、MPEG4タイプかもしれません。

Macでの確認方法

QuickTIme Player>Cmd+Iのインスペクタで、フォーマットがH.264(H.264タイプ)かMPEG-4(MPEG4タイプ)か確認できます。

Windowsでの確認方法

<video>タグでmp4の動画が再生されない(解決法)(たまちゃんHTMLのおうち~作成に役立つテクニック)の方法で確認できます。

【IE】隣接したarea移動時にマウスオーバーが途切れないようにする

以下のようなHTMLとjQueryのとき、mapにareaが複数あると隣接していてもIEでは移動時にmouseoutとmouseoverが起きてしまいます。

<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
    <area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
    <area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>
//js
$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});

解決策

jQueryの動作の前に.stop()を追加します。

$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});

【jQuery】引用符とエスケープを覚える

jQueryで引用符(シングルクオート(’)とダブルクオート(”))を使う時にエスケープが必要になるときがあります。

内側と外側同じ引用符を使って、内側をエスケープ(\)する

$('a[href=\'http://mania-ku.info\']') //シングルクオート(')とエスケープ(\)
$("a[href=\"http://mania-ku.info\"]") //ダブルクオート(")とエスケープ(\)

エスケープがめんどくさい!なら内側と外側で別の引用符を使う

こちらの方が簡単だと思うのですが、どうなんでしょうね?

$('a[href="http://mania-ku.info"]') //外側はシングルクオート(')で内側はダブルクオート(")
$("a[href='http://mania-ku.info']") //外側はダブルクオート(")で内側はシングルクオート(')

【jQuery】クリックイベントで一部だけ別の動作をさせる

下記のようなHTMLがあるときに、spanだけ別の動作をさせたいときに使うjQueryの覚え書きです。
qiitaでいろいろ教えてもらいました。

<p><span class="icon">ここは別の動作をさせる</span>ここは普通の動作をさせる</p>

クラス名で指定:$(e.target).hasClass(クラス名)を使う

$("p").click(function(e){
    if($(e.target).hasClass("icon")) {
        //.iconだけ別の動作
    } else {
        //普通の動作
    }
});

属性で指定:$(e.target).attr(属性)を使う

複数クラスを指定する場合は、.hasClass(クラス名)を使う

$("p").click(function(e){
    if($(e.target).attr("class") == "icon") {
        //.iconだけ別の動作
    } else {
        //普通の動作
    }
});

要素名で指定:$(e.target).get(0).tagName==要素名を使う

$("p").click(function(e){
    if($(e.target).get(0).tagName == "span") {
        //spanだけ別の動作
    } else {
        //普通の動作
    }
});

いちいち覚えるのが大変なときは、$(e.target).is(要素)を使う

$("p").click(function(e){
    if($(e.target).is(要素)) {
        //クラスでも、
        //属性でも、
        //要素名でも使えるので便利!
    } else {
        //普通の動作
    }
});

【jQuery】親要素を削除するunwrap()

下記のようなHTMLのときに、pをクリックしたら親のdivを消したいときはどうすればいいのでしょうか?

<div>
	<p>ここをクリックする</p>
</div>

remove()ではない

jQueryで削除と言えばremove()ですが、これでは子以下も削除してしまいます。

$('div p').click(function(){
	$(this).parent().remove(); //divとその中身が全て消えちゃう
});

unwrap()を使う

親要素だけを削除したい場合はどうすればいいのでしょうか?
jQuery1.4系以降だとunwrap()が使えます。

$('div p').click(function(){
	$(this).unwrap(); //divだけを消す
});

デモ

参考サイト

親要素のみ削除する方法[jQuery1.4系版] | THE HAM MEDIA BLOG