技術的な思考方法や、日々思うことをご紹介いたします。

I introduce here what is considered the technical thinking method and every day.

JSを使わずCSSだけでモーダルウィンドウ
date:2018/10/14category:CSS/HTML

JSが使えず、CSSだけでいろいろ制御しなきゃならない
案件があったのでやってみた。

See the Pen JSを使わずにモーダルウィンドウ by kotaro sekiya (@nanigashi-lab) on CodePen.

JSを使わずCSSだけで表示非表示
date:2018/10/11category:CSS/HTML

JSが使えず、CSSだけ表示非表示を制御しなきゃならない
案件があったのでやってみた。

See the Pen JSなしCSSだけで表示非表示 by kotaro sekiya (@nanigashi-lab) on CodePen.

Vue.js練習4
date:2018/10/08category:CSS/HTML/JavaScript

1.モーダルウィンドウ

See the Pen Vue_08 by kotaro sekiya (@nanigashi-lab) on CodePen.


Vue.js練習3
date:2018/10/07category:CSS/HTML/JavaScript

1.tab切り替え

See the Pen Vue _06 by kotaro sekiya (@nanigashi-lab) on CodePen.



2.アコーディオン

See the Pen Vue_07 by kotaro sekiya (@nanigashi-lab) on CodePen.


Vue.js練習2
date:2018/10/06category:CSS/HTML/JavaScript

1.ボタンで表示非表示

See the Pen Vue_04 by kotaro sekiya (@nanigashi-lab) on CodePen.



2.ボタンで表示非表示(アニメーションあり)

See the Pen Vue_05 by kotaro sekiya (@nanigashi-lab) on CodePen.


Vue.js練習
date:2018/10/04category:CSS/HTML/JavaScript

1.まずはテキスト表示

See the Pen Vue_01 by kotaro sekiya (@nanigashi-lab) on CodePen.



2.テキストボックスに入れた文字を表示

See the Pen Vue_02 by kotaro sekiya (@nanigashi-lab) on CodePen.



3.ボタンでテキストを制御

See the Pen Vue_03 by kotaro sekiya (@nanigashi-lab) on CodePen.


当サイトにBEMを採用してみた
date:2018/09/30category:CSS/HTML

BEMっていうのはクラスの命名規則の一つなんですが
ずっと気になってはいたのですが、案件で使うチャンスがなかなかないので
当サイトに導入してみた

詳しいことはいろいろなサイトで解説しているのでここでは割愛
本来はblock-block__element-element--modifierといった感じで
blockやelementが複数の単語になる場合は
-一つでつなぐなのですが、-が増えて好きではないので
blockBlock__elementElement--modifier
キャメルケースにアレンジしてみました。

まだ慣れてないので、気持ち悪かったりしますが
慣れれば、わかりやすいのかなと思います。
今後、案件で使用する機会があれば、積極的に導入していきたいと思います。

Gitをインストールしてみた
date:2014/07/06category:ハマったのでメモ

Gitをインストールしてみたところ、ハマったのでメモ

Gitの解説をしているページにmsysgitのダウンロード先googlecodeのLinkですが
どうしても403エラーになってしまい、ダウンロードできません。
ググっても出てくるのは上記URLばかり・・・

これは詰んだかと諦めかけてたところ
ようやく公式ページを発見
http://msysgit.github.io/

再インストール時にまたハマりそうなのでメモ。

Plague Inc.
date:2014/07/01category:最近ハマったゲーム

殺人ウィルスを進化させ、人類を滅亡させるゲーム


Plague Inc.

序盤はなるべく致死率を下げておいて、感染力は強いが危険性の少ないウィルスにしておいて、
全人類に感染させといて、一気に致死率を上げるのがセオリー
一気に致死率を上げるため、ポイントを残しておくのがコツ

Plague Inc.

Plague Inc.


『勇者のくせになまいきだ』もそうだけど、たまには全人類の悪になって
正義を滅ぼすのもいいですよね。
この悪と正義の逆転ゲームって名作が多い気がする。
こういう逆転の発想ってすごく大事だなっと感じた1本でした。

久々にハマったのでメモ
date:2013/12/25category:CSS/HTML/ハマったのでメモ

css3のbox-sizingプロパティでハマったのでメモ
box-sizing:border-box;をそのまま使うと
androidでバグる。

回避方法
webkitのベンダープレフィクスを付ける

box-sizing:border-box;
-webkit-box-sizing:border-box;

JS練習パート2
date:2012/05/28category: jQuery/JavaScript

練習がてらbodyの背景をランダムで変える
JSを書いてみました。


JSのソース


<!-- javascript -->
<script type="text/javascript">
<!--

	randomBg = new Array();
	randomBg[0] = "#ccc";
	randomBg[1] = "#000";
	randomBg[2] = "#fff";

	n = Math.floor(Math.random()*randomBg.length);
	document.writeln("<style type='text/css'>");
	document.writeln(".sample111117{");
	document.writeln("background:"+randomBg[n]);
	document.writeln("}");
	document.writeln("</style>");

// -->
</script>

今回はbodyの色変えちゃまずいので
sample111117というclassの背景色を変えています。
今回は端折って色だけですが、url(hoge.gif)を
入れれば、背景画像も変えられます。


動作サンプル


jquery練習
date:2012/03/22category: jQuery/JavaScript

非常にノロノロペースですが、jqueryの勉強を
細々とやっておりまして、とりあえず何か書いてみようと
弊社で一番と言っていい位、よくつかわれるであろう
タブ切り替えを書いてみました。

まだまだ、入門以前なのであまりいい出来では
ありませんが、今後もなにか書いたら、
ここに掲載して行こうかなと思っております。

それではソースを
まずはJS

$(function() {
	$("#tab li").click(function() {
		var num = $("#tab li").index(this);
		$(".tabmain").addClass('none');
		$(".tabmain").eq(num).removeClass('none');
		$("#tab li").removeClass('choice');
		$(this).addClass('choice')
	});
});

HTML

<ul id="tab">
<li class="choice">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<div class="tabmain">本文1</div>
<div class="tabmain none">本文2</div>
<div class="tabmain none">本文3</div>
<div class="tabmain none">本文4</div>

CSS

#tab li {
  float: left;
  padding: 10px;
  background: #eee;
}
#tab li.choice {
  background: #ccc;
}
.none {
  display: none;
}
.tabmain {
  clear: both;
  width: 500px;
  padding: 50px 0;
  text-align: center;
  background: #ccc;
}

動作サンプルはこんな感じ

  • タブ1
  • タブ2
  • タブ3
  • タブ4
本文1
本文2
本文3
本文4

301リダイレクト処理
date:2012/01/18category:.htaccess/HTML

ページリニューアルに伴い、新しいサーバーと
ドメインに移転する案件があり、301リダイレクト処理を
行う必要があり、よくわかってなかったので調べてみた。


■ 旧ドメイン全体を新ドメインのトップへ転送する

この場合、旧ドメインのどの、ディレクトリにアクセスしても
すべて新ドメインのトップへ転送されます。

 RedirectMatch 301 .* http://新ドメイン/


■ URLを指定して転送
旧ドメインの各URLから新ドメインのURLへ転送されます。

以下の例の場合
旧ドメイン/01.htmlにアクセスすると新ドメイン/a/01.htmlに
旧ドメイン/02.htmlにアクセスすると新ドメイン/b/01.htmlに
転送されます。すべてのディレクトリについて記述しなければなりませんが
ディレクトリ構造が新旧ドメインで異なる場合はこちらで転送できます。

 Redirect 301 /01.html 新ドメイン/a/01.html
 Redirect 301 /02.html 新ドメイン/b/02.html


■ mod_rewriteを使用した転送
ドメイン以下のパスの転送

以下の例の場合
旧ドメインから新ドメインへ転送されます。
フォルダ名やファイル名を変えていない場合には、
これで全てのページが対応するページへリダイレクトされます。

※サーバがmod_rewriteに対応している必要があります。

 RewriteEngine On
 RewriteCond %{http_host} ^www.旧ドメイン
 RewriteRule ^(.*) http://www.新ドメイン/$1 [R=301,L]

忘れていたのでメモ
date:2011/11/17category:CSS/HTML

先日、IEでどうしてもheightが100%にならず
ハマっていたのですが、ただ要素に100%にしただけでは
100%にならないことをすっかり忘れていたのでメモしておきます。

IEでは親要素の高さの100%という解釈なので
親要素にも100%を入れなければなりません。
ですのでページ分の高さをとるならば
htmlタグとbodyタグにheight100%を当てなければなりません。

html, body{height:100%;}

p {
    height:100%;
}

また、上記の事を調べているときに
IEでのfloat時のmargin2倍問題の解決方法も
見つけたのでメモしておきます。

IE6では float:left;とmargin-leftを同時に
指定するとmarginが、2倍になってしまいます。
逆にfloat:right;とmargin-rightを指定しても
同じく2倍になります。
今まではmarginの代わりにpaddingを指定したり
floatとは反対側のmarginで対処していたのですが
float時にはwidthも指定するので、paddingだと幅の計算が面倒だったり
デザインによっては、反対側のmarginでは対応できない場合もあります。

理由はよくわかりませんが、floatとmarginを
指定している要素にdisplay:inline;を入れると
2倍問題も解決し、モダンブラウザでは、floatしている要素の
displayの指定を無視するので問題ないようです。

p{
    float:left;
    width:80px;
    margin-left:20px;
    display:inline;
}

IE6の印刷対応
date:2011/10/05category:CSS/IE6/ハマったのでメモ/ブラウザ

さて今回はIE6での印刷対応についてです。
IE6以外のブラウザーはデフォで印刷時、縮小されるので
横幅がオーバーしていてもあまり問題はないのですが
IE6にはその機能がありません。

そこで自分は、あまりよい方法ではありませんが
IE6だけzoomで対応しています。

* html body{ zoom : 70% ; }

しかし、htmlの組み方によっては
naviなど、floatで横並びにしている要素で
最後のボタンだけ落ちてしまう場合があります。
そんな時は、全体の幅を指定している箇所の幅をちょっとだけ
広げてあげると治ります。

■通常時のCSS

#page {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    text-align: left;
    width: 907px;
}

■print.css

* html #page {
	width: 910px;
}

入れておくと幸せになれるかもMTプラグイン
date:2011/09/09category:CSS/HTML/MT

自分がMTを構築する際によく入れてる
プラグインをご紹介いたします。

すごく便利なプラグインばかりですのでMT構築の際に、入れておくと
幸せになれるかもしれません。
では早速いってみよう!!

■AutoThumbnail
http://gabs.cc/blog/bun/topic20101022-1017.php
ファイルアップロード時にサムネイル画像を自動生成してくれるプラグインです。
商用利用可

■MultiImageUploader
http://golf-bk.com/googlemaps/GMTK-sample/MultiImageUploader4GIZMODO/docs/mt-multi_image_uploader.html
複数画像のアップロードを行うためのプラグインです。

■pagebute
http://www.skyarc.co.jp/engineerblog/entry/2642.html
ダイナミックパブリッシングにせずにページネーションを行うためのプラグインです。
商用利用可

■PreviousNextInCategory
http://junnama.alfasado.net/online/2008/08/previousnextincategory.html
同一カテゴリーの前後のエントリーを出力するプラグインです。
ライセンス記述なし

■sortcategories
http://www.h-fj.com/blog/archives/2006/11/30-141201.php
カテゴリーを並べ替えるプラグインです。
ドネーションプラグイン

■Quickrebuild
http://tec.toi-planning.net/mt/quickrebuild/manual/
ワンクリックで特定のアーカイブタイプのみを再構築
ワンクリックでシステムの全てのブログを再構築できるようにするプラグイン
修正BSDライセンス

Mac&iPhoneなどをより快適にする記事20選+α
date:2011/08/29category:Mac

先日、iMacを購入しまして、Macデビューをしたので
今回はこんな記事をご紹介いたします。

Mac&iPhoneなどをより快適にする記事20選 : ライフハッカー[日本版]より

「Mac OS X」編
Mac OS Xのシャットダウンをキャンセルする超簡単な裏技
「Optionキー+ファンクションキー」を押すと関連する環境設定が開く
GmailウェブアプリをまとめてMacのメニューバーへ追加!
OS Xメニューバーへカスタムメニューを追加してクイックアクセス!
FacebookのチェックがOS Xのメニューバーから可能に!
デスクトップパソコンでのリアルタイム通知なら『Boxcar for Mac』
ファンクションキーの機能切替をマウスクリック一つで可能に!
『Mail』にタブを追加する無料のプラグイン「MailTabs」
iTunesに取り込めないファイル形式をiTunes用に変換する方法
Optionキーを押しながらAirMacのアイコンをクリックすると通信速度が表示!
+α:Mac OS X、Finderで隠しファイルを表示する
「iOS」編
「Ping」の機能を制限するとiPhoneのバッテリーが長持ちする
古いiPhoneから新しいiPhoneへデータを移行する方法
iPhone/iPadでSkypeの通話を録音する方法
iTunesを使わないでiOSと音楽ファイルを同期する最善策
アプリ検索でiOSデバイスのアプリの移動がより簡単に
ホーム画面の配列を失わずにiPhoneを復元させる方法
iPad、iPhoneの隅から隅まで保護するなら...
iPhoneで一度に6枚以上の画像をメールで送るTips
友達がiPhoneで撮影した動画と自分の動画を合わせて編集できる『Flixlab』
少人数のグループで写真を共有したい時に便利なiOS用アプリ『Photogram』

よかったら試してみて下さい。

わすれるのでメモメモ
date:2011/08/27category:HTML

コーディング時、よく使うのに
毎回ネットで検索しているので、まとめておくメモ

■ポップアップウィンドウの閉じるボタン

<a href="#" onClick="window.close(); return false;">サブウィンドウを閉じる</a>

■フォームボタンの画像化とロールオーバー

<input type="image" src="/images/btn_hoge_off.gif" alt="送信"
onmouseover="this.src='/images/btn_hoge_on.gif'"
onmouseout="this.src='/images/btn_hoge_off.gif'">

■戻るボタン

<a href="#" onClick="history.back(); return false;">back</a>

タグなどの読み方
date:2011/07/15category:CSS/HTML

HTMLのタグとかCSSとかって読み方が分かりにくいもの多いですよね。
ネイティブな人間なら問題ないのかもしれませんが、
省略されているのものも多いので・・・

先日、DevJam内でそんな話で盛り上がったもので
ちょっと調べてみました。

DOCTYPE:ドクタイプ/ドキュメントタイプ
DTD:ディーティーディー(ドキュメントタイプ・ディフィニション)
img src:イメージソース
alt:オルト
embed:インベッド
href:エイチレフ or ハイパーリファレンス
rel:レル
span:スパン
width:ウィズ
height:ハイト
align:アライン

みなさん読み方あっていましたか?
人前で違った読み方してしまって恥ずかしい思いをしたりしないよう
覚えておくとよいかもです。

(間違ってたらごめんなさい)

わすれるのでメモメモ
date:2011/06/15category:CSS/HTML

今回はHTMLコーディングでよく設定し忘れるのでメモです。

HTMLコーディングで背景が横幅100%で
背景を繰り返す場合よくありますよね?

この場合、幅100%にしている親要素に子要素の幅と同じ値の
minwidthを入れておかないとウィンドウサイズを小さくして横スクロールが
でた際に、背景が途中で途切れてしまいます。

背景が横方向で途切れてしまったら、これ疑ってみてください。

zen-coding
date:2011/05/12category:HTML

ちょっと前に流行ったzen-coding
表記方法を忘れてしまうのでメモ

div

<div></div>

div#hoge

<div id="hoge"></div>

div.hoge

<div class="hoge"></div>

div#hoge.hoge2

<div id="hoge" class="hoge2"></div>

div#hoge.hoge2.hoge3

<div id="hoge" class="hoge2 hoge3"></div>

div#hoge+div#hoge2

<div id="hoge"></div>
<div id="hoge2"></div>

div#hoge>div#hoge2

<div id="hoge">
<div id="hoge2"></div>
</div>

div.hoge*5

<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>

div.hoge$*5

<div class="hoge1"></div>
<div class="hoge2"></div>
<div class="hoge3"></div>
<div class="hoge4"></div>
<div class="hoge5"></div>

table+

<table>
<tr>
<td></td>
</tr>
</table>

ul+

<ul>
<li></li>
</ul>

dl+

<dl>
<dt></dt>
<dd></dd>
</dl>

私が使うのはこれくらいでしょうか・・・

CSSの小技(字下げ)
date:2011/04/28category:CSS/HTML

今回はCSSでの字下げの方法を紹介いたします。
なにも設定していない状態で注意事項とかで頭に※がついていると
改行されたときに


※ほげほげ
ほげほげ


となってしまいますよね。これを簡単に


※ほげほげ
ほげほげ


とする小技です。

字下げしたい箇所に


text-indent: -1em;
padding-left: 1em;


を当ててあげればOK


emの数値は当てているフォントとかにもよって変わってくるので
調整して下さい。

フォームの微妙なズレ
date:2011/04/15category:CSS/HTML

さてさて今回はフォームに纏わるCSSです。


皆様、フォームのコーディングって得意ですか?
僕は若干苦手です。特にテキスト部分とフォーム部分が微妙にズレたりしますよね。ムッキー!!!


僕も最近まできっちり合わせることができなくて仕様です。って言ってたりしたのですが
解決できたので、ご紹介


特にずれが気になるのがラジオボタンですよね。
普通に書くとこんな感じ



inputに


vertical-align: middle;


を当ててあげるとこんな感じ



何も無しよりはマシだけどちょっとズレてますよね。
そして今回の解決策
意外と知られておりませんが実はこのvertical-alignのプロパティ
middleとかbottomだけでなく、数値での指定が可能なんです。
ざっとリファレンス載せてるサイト見ましたが、載っていないところが多い
僕が持ってるタグ辞典にも記載がありませんでした。


あとは文字サイズに合わせてemで指定してあげればぴったり並べることが出来ます。
今度は-0.2em当てた画像



ブラウザ間で若干見え方が異なるので厳密に全部のブラウザでぴったり合わせるには
ハックを駆使しなければならないが、初めのズレズレよりはマシですよね。

マークアップに役立つサイトをご紹介!
date:2011/04/01category:CSS/HTML

今回はマークアップに役立つサイトをご紹介!


fontSizeの計算って入れ子になっていたりすると
かなり面倒ですよね?
僕がアホなだけ?


そんな時は『Em Calculator』が便利です。
bodyのfontSizeをpxで指定してあげれば
emに変換してくれます。
入れ子になっている場合もAdd childボタンで
追加できます。


emでのsize指定はバグがあるので
100倍して%指定してあげるとさらによいかと・・・
emのsize指定のバグの話はまた今度・・・


EmCalculator


たまにしか使わない、HTMLタグって使い方忘れてしまったりしませんか?
僕がアホなだけ?


そんな時は『XHTML タグ一覧表示ツール』が便利です。
このタグって


の中で使えたっけ?とかいうときに
ここでサクっと調べられます。


XHTML


CSSのclass名やid名って結構悩みませんか?
僕がアホなだけ?


そんな時は『CSS HappyLife』の
『もう、class名やid名で悩まないんだからっ!!』というエントリーが便利です。


そのタイトル通り、いろいろなclass名やid名が
纏められています。
使う場所ごとに分類されていますのでとっても便利です。


CSSHappyLife

背景画像を印刷する方法
date:2011/03/25category:CSS/ハマったのでメモ

こんにちわ
devjamのコータローです。

Webサイトを印刷対応にする時、印刷用CSSで
最適化すると思います。

ところが、背景を印刷する場合、ブラウザで背景を印刷する設定をしていないと印刷されない(デフォは設定OFF)
また印刷用に別のヘッダー画像とかを用意する場合(横幅を小さくするなど)うまく印刷されない。

そんな時の技を紹介します。

印刷用CSSで背景を指定したい箇所に
display:list-item;
をあて
list-style-imageで背景画像を指定します。


具体例

#hoge {
  display: list-item;
  list-style-image: url(hogehoge.jpg);
  list-style-position: inside;
  letter-spacing: -1000em;
  font-size: 1pt;
}

これで背景も印刷されます。

ハマったのでメモ
date:2011/03/02category:IE6/ハマったのでメモ/バグ

DD_belatedPNGとiframeの同時使用はIE6でiframeの中が真っ白になる。
PNGFix使う時は、iframeを使わないこと。

IEでtext-indetが効かない
date:2011/01/13category:HTML/ハマったのでメモ

text-indet: -9999px で背景を表示させようとしたところIEでtext-indetが効かなかった。

発生条件 text-indet が指定されている親要素に text-align: right が指定されていると発生。

対処法 text-indetと text-align: center;を指定する。

IE6 と IE7 と IE8 を同じマシンで共存させる方法
date:2011/01/12category:HTML/ブラウザ

1.IE8 をインストール

2.Internet Explorer 7 running side by side with IE6. (standalone) | TredoSoft の IE7 Standalone をインストール

3.Install multiple versions of IE on your PC | TredoSoft の Multiple IE をインストール