mawatari.jp
ウェブエンジニアのメモ帳
  • ブログ
  • ブックマーク
  • 本棚
  • GitHub
  • プロファイル
  • PhpStorm
  • CakePHP
  • FuelPHP
  • PHP
  • RubyMine
  • Ruby on Rails
  • Ruby
RSS
2015年5月25日

子要素がfloatだった場合に親要素の高さが拡張しない問題点の解決法

mawatari 日記 CSS, HTML 0 Comments

子要素が floatだった場合、親要素の高さが拡張しない問題点を解決する方法の一つをメモしておきます。
親要素に overflow: auto;のプロパティを付与しましょう。

to-automatically-extend-parent-element-01

子要素が floatだった場合、親要素の高さが拡張しない

to-automatically-extend-parent-element-02

親要素に overflow: auto;のプロパティを付与すればOK

子要素がfloatだった場合も親要素の高さを拡張させる例
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子要素がfloatだった場合も親要素の高さを拡張させる例</title>
<style type="text/css">
.parent {
background-color: #E5E5E5;
padding: 5px;
overflow: auto;
}
.child {
width: 100px;
height: 100px;
background-color: #449D44;
margin: 5px;
float: left;
}
</style>
</head>
<body>
 
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
 
</body>
</html>

以上です。

2015年4月14日

npm listの依存関係を非表示にする

mawatari 日記 JavaScript, Node.js 0 Comments

npm list (またはls, ll, la)では、パッケージの依存関係がすべて表示されてしまうので、自身でインストールしたパッケージのみを知りたいときに見づらく感じてしまうことがあります。そんな時は depthオプションで表示制御をしましょう。
例えば、 --depth=0オプションを付与するとパッケージの依存関係を非表示にすることができます。

npmの依存関係を非表示にした時の表示例
Shell
1
2
3
4
5
npm list --depth=0 -g
/Users/mawatari/.nvm/versions/node/v0.12.2/lib
├── grunt-cli@0.1.13
├── gulp@3.8.11
└── npm@2.7.4

以上のとおり、表示制御出来ました。

2015年4月9日

Debianのバージョン確認コマンドとアーキテクチャ確認コマンド

mawatari 日記 Debian, Tips 0 Comments

仕事でDebianに触れる機会がありました。普段はあまり触らないOSなので、わからないことも多いわけですが、そのうちの一つとして、Debianのバージョンやアーキテクチャ(OSが32bit, 64bitどちらなのか)を確認するためのコマンドをメモしておきます。
以下は、Mac OS XのVirtualBoxを使ってゲストOSとしてインストールしたDebianで試した結果です。

Debianのバージョンを確認するコマンド

他のOSと比べても極めてシンプルな表示ですね。

Debianのバージョン確認(ハイライト部分がコマンド)
Shell
1
2
3
4
5
6
cat /etc/debian_version
7.8
 
# 以下のコマンドでも確認できます
cat /etc/issue
Debian GNU/Linux 7 \n \l

アーキテクチャ(OSが32bit, 64bitどちらなのか)を調べるコマンド

こちらに関してはLinux共通ですね。

アーキテクチャの確認コマンド(ハイライト部分がコマンド)
Shell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
arch
# 以下のように表示されます
# 64bitの場合
X86_64
# 32bitの場合
i686
 
# 以下のコマンドでもOK
uname -a
# 以下のように表示されます
Linux debian 3.2.0-4-amd64 #1 SMP Debian 3.2.65-1+deb7u2 x86_64 GNU/Linux
 
# このコマンドでもOK
cat /proc/version
Linux version 3.2.0-4-amd64 (debian-kernel@lists.debian.org) (gcc version 4.6.3 (Debian 4.6.3-14) ) #1 SMP Debian3.2.65-1+deb7u2

以上です。

2015年4月7日

Vagrant 1.7+でSSH接続エラーが出た場合の対処法

mawatari 日記 Ansible, Homebrew, Vagrant, VirtualBox 1 Comment

普段から、Vagrant + Ansibleを用いて、チームで共通の開発環境を作れるようにしています。先月、届いた13″ rMBP early 2015に開発環境を構築していた際、Ansibleがうまく実行できないトラブルにハマりました。
全く同じBox及びプロビジョニングを使って旧環境では問題なく構築できたのに、新環境ではできないことに頭を悩ませましたが、2時間ほど試行錯誤した結果、解決できたので、その事象と原因、対処法をメモしておきます。

環境

環境は以下の通りです。Vagrant, VirtualBox, AnsibleすべてをHomebrewでインストールしています。結果からいうとVirtualBoxやAnsibleは直接関係ありませんでしたが、一応、バージョン情報を示しておきます。

ソフトウェアバージョン
MacOS10.10.2
Vagrant1.7.2
VirtualBox4.3.26
Ansible1.9.0.1

SSH Error: Permission deniedとなってしまう問題

まずは事象を振り返ります。
CentOS 6.x minimalのVagrant Box* を用いて、 vagrant provisionや ansible-playbookコマンドでプロビジョンしようとした際、次の様なエラーが表示され、それ以上、先に進めることができませんでした。
* 厳密には、minimalにVirtualBoxのツールやvagrantユーザの作成などを行った状態のものです

SSH Error: Permission denied(ハイライト部分がコマンド)
Shell
1
2
3
4
5
6
7
8
9
vagrant provision
192.168.33.10 | FAILED => SSH Error: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
    while connecting to 192.168.33.10:22
It is sometimes useful to re-run the command using -vvvv, which prints SSH debug output to help diagnose the issue.
 
ansible-playbook -i hosts/vagrant provision_vagrant.yml
192.168.33.10 | FAILED => SSH Error: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
    while connecting to 192.168.33.10:22
It is sometimes useful to re-run the command using -vvvv, which prints SSH debug output to help diagnose the issue.

Ansibleのインベントリファイルである hosts/vagrantには、以下の様な内容を記述していました。

Ansibleインベントリの例
1
192.168.33.10 ansible_ssh_private_key_file=~/.vagrant.d/insecure_private_key ansible_ssh_user=vagrant

続きを読む

2015年3月24日

HomebrewとAnsibleでMacの開発環境構築を自動化する

mawatari 日記 Ansible, Homebrew, Mac 0 Comments

3月20日に13″ rMBP early 2015が手元に届いたので、以下の様なツイートをしながらPlaybookを作っていました。

GUIアプリも含めて全部Homebrewで管理してみようかな。

— まわたりなおと (@mawatarin) 2015, 3月 20

んー?Brewfileで管理できないのか? http://t.co/g8eBr2tInk

— まわたりなおと (@mawatarin) 2015, 3月 20

うん。Brewfileの代替はこれがよさそうだな。今夜やってみよう。 http://t.co/mxXRd3IGK2

— まわたりなおと (@mawatarin) 2015, 3月 20

例のごとく、そのとき取り組んだことを整理した上で公開しようとしていたわけですが、その日の夕方、@t_wadaさんによって、Mac の開発環境構築を自動化する (2015 年初旬編)という記事が公開されました。内容がほぼ被っているので、私のメモを公開する意義は少ないわけですが、アプローチが違う部分、修正した部分もあるので残しておきます。
Homebrew + Ansibleで、CLI, GUIアプリともに管理します。非常に簡単なので、ぜひ取り組んでいただければと思います。
mawatari/mac-provisioning – GitHub

ちなみに、Ansibleを使わずにやりたい場合は、以下の記事が参考になるかもしれません。
Brewfileはオワコンではない
Homebrew-fileでhomebrewでインストールしたパッケージの管理をする

環境

環境は以下の通りです。工場出荷状態の13″ rMBP early 2015で試しました。
以下の説明はクリーンインストールされたMacOSを前提にしているので、環境によっては違ってくる部分もあると思いますが、その点は留意してください。
念のため、OSの再インストールを3回繰り返してチェックしたので、同じ環境であれば同様の手順で簡単に再現できるはずです。

ソフトウェアバージョン
MacOS10.10.2

続きを読む

«‹ 2 3 4 5›»

フォロー

follow us in feedly
人購読中

最近の投稿

  • RDS (MySQL) からファイル出力 (TSV,CSV) する
  • エラー対応:cannot update mailbox /var/mail/root for user root. error writing message: File too large
  • MySQLのSHOW TABLESでコメント他も合わせて表示する
  • Amazon Linuxのバージョン確認コマンドとアーキテクチャ確認コマンド
  • PHPのエラーメッセージを出力する
  • ServerspecでMacの開発環境をテストする
  • PHPカンファレンス福岡2015に参加してきた
  • rbenvでRubyの最新安定版をインストールするワンライナー
  • Ansibleの実行結果を通知する
  • MacにComposerをインストールする

Twitter

@mawatarinさんのツイート

カテゴリー

  • 勉強会・交流会 (56)
  • 日記 (104)

タグクラウド

Ansible Apache AWS Backbone.js baserCMS Bootstrap CakePHP CentOS CSS EC-CUBE facebookアプリ開発 fancyBox FuelPHP Fukuoka.php Git GitHub Homebrew HTML5 iOS JavaScript Jenkins Jenkins実践入門 jQuery Mac MAMP MySQL Node.js OSC PHP PHPMatsuri PhpStorm PHPUnit Rails rbenv Ruby RubyMine SwimmyStudy Tips Twitter Vagrant VMware WordPress Xdebug アジャイル 福岡インフラ勉強会
mawatari.jpのはてなブックマーク数
  • PhpStorm
  • CakePHP
  • FuelPHP
  • PHP
  • RubyMine
  • Ruby on Rails
  • Ruby

最近の投稿

  • RDS (MySQL) からファイル出力 (TSV,CSV) する
  • エラー対応:cannot update mailbox /var/mail/root for user root. error writing message: File too large
  • MySQLのSHOW TABLESでコメント他も合わせて表示する
  • Amazon Linuxのバージョン確認コマンドとアーキテクチャ確認コマンド
  • PHPのエラーメッセージを出力する
  • ServerspecでMacの開発環境をテストする
  • PHPカンファレンス福岡2015に参加してきた

フォロー

follow us in feedly
人購読中
mawatari.jpのはてなブックマーク数

新着はてなブックマーク

  • PhpStorm
  • CakePHP
  • FuelPHP
  • PHP
  • RubyMine
  • Ruby on Rails
  • Ruby

↑

© mawatari.jp 2025
Powered by WordPress • Themify WordPress Themes