読者です 読者をやめる 読者になる 読者になる

weblog

WEB全般の忘備録(HTML・CSS・JavaScript・PHPなど)

サイトレイアウトが崩れた時の対処法

メモ。
特にdivタグはあるある。

tsuki10.net

VagrantとVirtualBoxでローカル開発環境を構築

VirtualBox
https://www.virtualbox.org/wiki/Downloads

Vagrant
http://downloads.vagrantup.com/


VirtualBoxは既にインストールされていたバージョン4.3.6を使用。
Vgrantは現時点での最新版1.3.5をダウンロード。

その他基本的なことは下記が詳しい(丸投げ)
http://www.webopixel.net/develop/835.html



共有フォルダ作るには下記コマンドを実行。
/var/www/htmlへシンボリックリンクすればよい。

sudo rm -rf /var/www/html
sudo ln -fs /vagrant /var/www/html

Windows環境でgccコンパイラを使用する(メモ)

忘れそうなのでメモ。

コンパイルするには下記コマンドを実行。

$ cd /work_directory
$ gcc -o hello hello.c

意味は、hello.cというファイルをhelloという実行ファイルに
コンパイルして出力するということらしい。

gccのオプションについてはここが参考になった。
http://kazmax.zpp.jp/cmd/g/gcc.1.html

HTML・CSS コーティング規約参考サイト

HTML・CSS コーティング規約参考サイト


【参考】
google(英語)
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

apple(英語)
http://www.apple.com/html5/

google(和訳)
http://re-dzine.net/2012/05/google-htmlcss-style-guide/

CSSガイドライン
http://2xup.org/log/2006/07/11-1956
http://www.i-seeds.jp/web/cssguideline.html

HTMLガイドライン
http://www.okapiproject.com/web/html_codeconventions/index.html

Class名・ID名の付け方
http://css-happylife.com/archives/2007/0115_1345.php
http://matome.naver.jp/odai/2133510305809813901

HTML5
http://met.hanatoweb.jp/guideline/html5/

jQueryによるスクロール距離の取得方法

jQueryによるスクロール距離の取得方法。

パララックスサイトの作成、ページトップリンクを表示制御、グローバルナビの表示制御など使いドコロがいろいろあると思うのでメモ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール位置の取得</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
$(function() {
    $(window).scroll(function() {
        var dy = $(this).scrollTop();
        if(dy > 100){
            //処理
        }else{
           //処理
        }
    });
});
</script>
</body>
</html>

参考サイト:ドットインストール
#03 スクロール距離を取得しよう
http://dotinstall.com/lessons/parallax_html/10903

JavaScriptでグローバル変数の定義を最小限にする

グローバル変数にvar cnf = {}と定義したあと、
それをアプリケーションのコンテナとして利用することで、
グローバル変数がぶつかる危険性を最小限にする。

下記はブラウザに「Hello World」と出力するスクリプト。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello world</title>

<script>
window.onload = function() {

/**
 *メンテナンス性を良くするため
 *グローバル変数は1つだけ定義する。
 */
var cnf = {}; //newで生成しても良い。
cnf.elem    = {
	para    : document.createElement("p"),
	testDiv : document.getElementById("test"),
	text    : document.createTextNode("Hello World")
};

	cnf.elem.testDiv.appendChild(cnf.elem.para);
	cnf.elem.para.appendChild(cnf.elem.text);
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>


やっとユーザ定義オブジェクトについて分かってきた(かもしれない)。
参考:JavaScript The GoodParts

Windows環境にSCSS環境を構築する手順

WindowsにCSSプリプロセッサのSCSSを導入する手順メモです。

Rubyインストール

Macでは標準でインストールされているらしいですが、Windowsには入っていないので
公式サイトよりダウンロードします。

インストールの時、パスを通すことを忘れずに。(後でもできるけど)
インストールしたらコマンドプロンプトcygwinなんかで

ruby -v

と入力して

ruby 2.0.0p0

とバージョン情報が出たらインストール成功です。

Compassのインストール

CompassCSSを効率的に書くためのフレームワークのようです。
gemをアップデートして、compassをインストールします。

gem update --system
gem install compass

下記コマンドでバージョン情報が出たらインストール成功です、Commpassがインストールされたら自動的にScssもインストールされます。

compass -v

Compassを使う

作業ディレクトリにassetsディレクトリを作成してconfig.rbを作成します

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

scssディレクトリにscssファイルを作成します。
scssファイルに変更があったら自動的にcssファイルにコンパイルするように下記コマンドを実行して監視しておきます。

sass --style expanded --watch scss:css

これで下準備完了。

Scssの文法については今回は割愛しますが、
Rubyとすごく似てるっぽいです。mixinとかすごく便利。