ページを開いたらすぐに指定のページ内リンクにスクロールさせる

2012-08-08

ページを開いた直後に指定のページ内リンクまでスムーズにスクロールさせるという技。jqueryを使用しています。下記のコードは#sampleの部分まで移動させるという場合のものです。任意で変更してください。 htmlStart $(function() { var p = $("#sample").offset().top; $('html,body').animate({ scrollTop: p }, 'slow'); return false; }); htmlEnd ※var p = ～～とありますが、このpはHTMLタグのpとは関係ありません。ただの変数名...

続きを見る

jQuery

thickboxでダイアログを表示する

2012-08-08

Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。 htmlStart htmlEnd あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。 ＜テキストリンク～ダイアログ表示＞ htmlStart サンプル htm...

続きを見る

jQuery

文字コードの変換

2012-08-04

UTF-8の文字をshift_jisに変換するコードです。携帯サイトを作る場合はdocomoとauがshift_jisで作らないといけないので、文字コードを変更することがあります。EUC-JPはperl時代の時によく使用されていましが、今はUTF-8とshift_jisのどちらかしか使わないですね。 phpStart //mb_convert_encoding(文字列,変換後,変換前); mb_convert_encoding($str,'SJIS','UTF8'); phpEnd あとPCサイトでもメーラーを立ち上げるmailtoのリンクで件名と内容も付属するときはshif...

続きを見る

PHP

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04


ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。 ＜CSS＞ htmlStart div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;} div.pager ul{ float:left; position:relative; left:50%;} div.pager ul li { float:left; position...

続きを見る

CSS

マイページや管理画面のログイン機能はセッションで導入する

2012-08-04

PHPでログイン機能を導入する場合はsession(セッション)というものを使います。cookie(クッキー)と似ていますが少し違います。単純に説明すると、cookieはブラウザに保存、sessionはサーバーに保存といったところでしょうか。sessionはcookieよりもセキュリティーが固いのでログイン機能ではcookieは使いません。では早速、コードを見てみてください。 ＜login.php＞ phpStart session_start(); //*1 下記説明 if($_POST['pass'] == $PASS){ $_SESSION['user'] = sessi...

続きを見る

PHP

サイト内のキーワード検索で複合(AND)検索を導入する為のコード

2012-08-04

複合検索は半角スペース区切りのワードに変換して、explode関数で半角スペース区切りで配列に格納し、foreach文でWHEREのSQL文を生成します。foreach文でエラーを出さない為に、ループの前にis_array関数で配列であるかの確認しておきましょう。 htmlStart $q = str_replace('　',' ',trim($_GET['q'])); //*1 下記説明 $array = explode(' ',$q); if(is_array($array)){ foreach($array as $val){ $str = ($sql)?' AND...

続きを見る

PHP

ファイル名から拡張子を取得する

2012-08-04

拡張子を取得する場合はpathinfo関数を使うのが最短のコードだと思われます。 htmlStart $filename = 'sample.jpg'; $ext = pathinfo($filename, PATHINFO_EXTENSION); htmlEnd ファイルアップ時の際に必要になることが多い技になりますね。 htmlStart $filename = $_FILES['upfile']['name']; $ext = pathinfo($filename, PATHINFO_EXTENSION); htmlEnd ...

続きを見る

PHP

あると便利なリスト用アイコン

2012-08-04


画像をダウンロードして、フォトショップで切り抜き加工をして使ってください。CSSの宣言方法も記載しておきます。 ＜HTML＞ htmlStart サンプル１ サンプル２ htmlEnd ＜CSS＞ htmlStart ul.listMark li{ background:url(/img/list.gif) 0 2px no-repeat; padding-left:15px; } htmlEnd 背景ポジション(0 2px)←この部分はline-heightの設定値により数値の調節が必要になります。ポジションの数値はマイナスの値も使えます...

続きを見る

WEB素材

floatの回り込み解除にclearfixを使う

2012-08-04


＜サンプル＞ ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 ＜CSS＞ ※2019-04-20追記 現在はコードが短くスッキリしています。使用方法は変わりません。 htmlStart .clearfix::a...

続きを見る

CSS
この記事がお役に立てましたら是非シェアのご協力お願いします。