ラベル WEB BASIC の投稿を表示しています。 すべての投稿を表示
ラベル WEB BASIC の投稿を表示しています。 すべての投稿を表示

2013年4月13日土曜日

サムネイル(グリッド)を並べた時に同じCSSでぴったり収める方法

215pxサムネイルを4つ20pxの間隔で配置したい場合最後のサムネイルにかかったmargin-right:20px;が邪魔になります。そこで最後のマージン20pxを吸収します。

サムネイル4つを収めたい横幅は920px、しかし上記の状態だと940pxの幅必要です。それをサムネイルの親要素の幅を940pxとして20px多くしますがmargin-right:-20px;で20pxを相殺することで。215pxサムネイルを×4個、20pxの間隔で配置したい時に920pxでピッタリ収まります。


<!--親要素-->
#colum{
width:940px;
margin-right:-20px;
_overflow:hidden;
}


<!--サムネイル-->
.thumbnail{
width:215px;
float:left;
padding-right:20px;
}


2012年9月7日金曜日

backgorudで指定したボタンがマウスオーバーで消えるのをCSSのみで解決する。

最近まで知らなかったのだが
backgorudで指定したボタンがマウスオーバーで消えるのを
CSSのみで解決する方法があったのでメモ。

<html>


<CSS>
 

<参考サイト>
http://www.komacchi.com/blogs/2010/07/css.php

2012年6月28日木曜日

CSSで半透明にさせる。(クロスブラウザ)


以下を記述。

2012年6月25日月曜日

clear:both;やclearfixの代わりにoverflowでfloatの周り込みの解除する。

floatの周り込みの解除方法。
overflowを使うのが今の所スマートな感じがする。




以上の記述をfloatを解除したい要素に指定する。

clear:borth;は空divなどの余計な空要素を作るし
clearfixは効かない事も多いのでこれが簡潔でいいかも。

2012年6月11日月曜日

prototype.js jquery コンフリクトを4行で解決する。

prototype.jsと jqueryは一緒に使うとコンフリクトしてどちらかが
動かなくなります。その解決方法。

(1)読み込ませる順番を変える。
1:prototype.js
2:prototype.jsのプラグイン
3:jQuery
4:jQueryのプラグイン

(2)以下のスクリプト4行を上記2と3の間に入れる。

完了。

<例↓>  

<参考サイト>
jQueryとprototype.jsを共存させる方法

2012年5月28日月曜日

background-positionを使った背景画像の指定

上のキャプチャーのように点線を背景画像で引く方法。
(borderの指定だと上手く行かなかった場合など)




参考URL
http://www.css-lecture.com/log/css-beginner/041.html

上下中央配置(CSS)

上下中央配置(CSS)のメモ
<html部分>
<CSS部分>
<参考サイト>
http://www.css-lecture.com/log/css/032.html 

2012年5月22日火曜日

簡単なgoogleのサイト内検索設置

以下をコピペ。「ja.wikipedia.org」はページのドメイン名にする。
(参考サイト)http://search.web-sun.com/zatu/g_site.html

syntaxhighlighterでコードをきれいに表示させる

syntaxhighlighterでコードをきれいに表示させる
(1)下記サイトからjs,css,swfファイルをダウンロード
syntaxhighlighter(google code)

(2)必要なJSをアップロードする 。html、CSS、JS、PHPの場合。

(3)htmlの方には以下<textarea>で囲んだ中にスクリプトを記述。
class=""のところに表示するコードの名前を入れる。


完了!

(参考サイト)
http://mrs.suzu841.com/highlighter/dp.SyntaxHighlighter/

2012年4月26日木曜日

WEBサイトにパスワードをかける。(BASIC認証)

 
「WEBサイトにパスワードをかける。(BASIC認証)」

<概要>
IDとPASSをかけたいページのディレクトリに
以下の2つのファイルを作成して置くとできる。
.htaccess 
.htpasswd

<制作方法>

1)「.htaccess を作成」
テキストエディタで以下のように記述

AuthType Basic
AuthName "Please type ID&passward."
AuthUserFile フルパス/パスワードをかけたい階層へのパス/.htpasswd
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
deny from all
</Files>

※フルパスを取得するのが面倒、以下のphpを
サーバーにアップして確認。

<?php
//絶対パス
echo __FILE__ . '<br />';

//ディレクトリパス
echo dirname(__FILE__) . '<br />';

//スクリプト名
echo basename(__FILE__) . '<br />';

//指定した拡張子を取り除いたスクリプト名
echo basename(__FILE__, '.php');
?>

2) 「.htpasswdを作成」
テキストエディタでID名+「:」コロン+パスワードを
記述する。

ID名:パスワード(変換したもの)

パスワードの変換は以下から

3)テキストエディタで作った「htaccess.txt 」「htpasswd.txt」を
パスワードをかけたいhtmlの場所に置く、FTPソフト上で 「.htaccess 」「.htpasswd」
に書き換えて不可視ファイルにする。

4)完成!

2011年11月9日水曜日

illustoratorのweb用保存がボケるのを直す。

イラレのWEB用保存で画像がぼやけるのは
画像の位置(x.y)軸と大きさ(w.h)が小数点も入っていると
ぼける。

なので以上のものを整数pxにするとキレイに書き出される。



<参考URL>
http://blog.sakurachiro.com/2009/11/illustrator-memo-2/
http://blog.sakurachiro.com/2010/10/illustrator-line-1px/

2011年7月8日金曜日

リストマークの画像のずれを修正する(backgroundでリストマーク指定)

(例) 
li {
    padding-left: 12px;
    background: url(hogehoge.gif) no-repeat 0px 0.5em;
    list-style: none;
}
 
padding-left は画像を配置する分の余白です。
url の後ろの指定は順に
background-repeat(画像の繰り返し表示)
background-position-x(X軸方向の開始位置)
background-position-y(Y軸方向の開始位置)
 

2011年3月18日金曜日

tableの属性cellspacing="0", cellpadding="0"をCSSで対応する

<table cellspacing="0" cellpadding="0">
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
</table>
  
<では無くて。。。CSSでやると ▼>
<style type="text/css">
table {
 border-collapse: collapse;
}
</style>

<table>
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
</table> 

2011年3月15日火曜日

dreamweaver テンプレート使い方


・テンプレート機能を使ってみよう 
パート1:「編集可能領域」と「オプション領域」の使い方

・ドリ、テンプレート関連まとめサイト
http://blog.cgfm.jp/garyu/archives/1198 

2011年1月27日木曜日

css classを2つ以上指定する書き方

サイトをコーディングしている時、classを2つ以上指定できる事を忘れがちです。
これ知っていると便利ですね。
ちなみに、idは1つしか指定できません。

設定方法は半角スペースで区切って指定します。
例えば
<p class="red blue">テキスト</p>
という風に。

同じ内容のCSSを指定していた場合、CSSの記述で後に指定した方が優先されます。

2011年1月26日水曜日

swfのhtml読み込み:SWFObject

http://www.e-ssp.net/how_to_03.html

※IE6.7では下部にマージンがでる現象あり。

例)
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<a href="www.adobe.com/go/getflashplayer"><img src="images/top/get_flash_player.jpg" alt="" /></a>
<script type="text/javascript">
var so = new SWFObject("index.swf", "topmovie", "900", "350", "9", "#000000");
so.write("headerFlash");
</script>
</div>



SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。
埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、HTML、XHTML 1.0に使用できます。
※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。
1)http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.4をダウンロードしてください。
解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
ダウンロード ⇒  http://blog.deconcept.com/swfobject/#download
2)Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。
3)HTMLページにJavascriptを記述します。
このページを例にしたFlashムービーを埋め込む為の記述が以下です。
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_c.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
<script type="text/javascript">
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
so.write("headerFlash");
</script>
</div>

以上が、このページで記述しているJavaScriptです。
4)それでは各コードを説明します:
<div id="content_swf">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_cf.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン対策にもなりますので、SEOに不利といわれるFlashの対策にもなります)。
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
新規にSWFObjectをつくり、必要なパラメーターを渡します。
"menu_n.swf"  埋め込むswfのファイル名をパスで指定します。
"ssp"  オブジェクトやembedタグのIDとなります。任意の名前で構いません。
"600"  Flashムービーの幅 (width)
"120"  Flashムービーの高さ(height)
"6"   必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
"#000000"  背景色(background color)を指定できます(例:#FFFFFF)
so.write("content_swf");
(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。
以上です。
SWFObjectは現行のの全てのブラウザに対応しています。
PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。
SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。

2010年7月3日土曜日

ファビコンの設置方法

「ファビコンの設置方法」

1)photoshopでまず「.ico」の画像を書き出せるようにプラグインを
ダウンロードしてアプリケーション>photoshop>プラグイン>の場所に入れる。
(参考)Photoshop で背景透過の美しい favicon (ファビコン) を作成する

※Photoshop CC 2014(Mac上)でも動作。

2)32px四方の正方形でファビコンを作って別名保存で「.ico」形式で保存。
(実際は 16px 四方で表示される)
※書き出せる最大サイズは256px四方までみたいです。それ以上大きいと
別名保存のときにICO形式の保存が選択に出てこない。

3) 「favicon.ico」という名前にしてサーバーにあげ、
htmlの<head>内に
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico のURL" />
を記述。

完了。
参考サイト:お気に入りアイコン(ファビコン)の作り方