ページ読込み時に下から上に移動しながらフェードインというリッチなコンテンツ表示を簡単実装

2018-10-29

ページを開いた際にフェードでページ全体を表示する方法はネットに出回っていますが、 「下から上に移動しながらのフェード」これがなかったので、自分で調整したものを残します。 単純に、jqueryのappend関数（コンテンツ追加）でbodyのmargin初期値を50pxなどにして、delay（ディレイ）後にmarginを0にする。 同時にフェード効果とのコラボとなり、非常に心地の良い効果になります。 htmlStart $(function(){ $('head').append( 'body{display:none; margin-top:50px;}' ); ...

続きを見る

jQuery

リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法

2018-10-29

マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition（切り替える時間）を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...

続きを見る

CSS

パソコンを持たない世代の増加でWEB制作者の需要が年々アップ!

2015-04-23

WEB制作の業界で飯を食ってきて10年目になった。 10年前の2005年頃はインターネットの普及率がグングン伸びていて、 WEBの技術者もそれに伴い増加傾向にあったと思われる。 この頃はガラケーサイトを作るが面倒だった。 絵文字は必要だし、機種によって文字コードや文字サイズが違うので、 WEBエンジア（SE）は実機チェックに奔走せざるを得なかった。 その5年後の2010年にはガラケーサイトの需要が縮小し、スマホの時代に突入。 スマホのブラウザはJavascriptが使用でき、機種による差も多くなく、 SE的にはガラケーサイトを作るよりはかなり楽になった。 が、...

続きを見る

個人的主張

ドキュメントタイプについて

2014-08-14

HTMLの先頭で記載しなければいけないドキュメントタイプにはいくつか種類がある。ドキュメントタイプを指定しないと、古いIEではCSSが正しく反映しなかったりするので宣言は必須。例えば「margin:0 auto;」が効かない。 これまで現役で、今もなお主力なのがxhtmlのドキュメントタイプ。この指定をすると閉じタグのないタグには最後にスラッシュが必要になる。個人的には好きな指定法。 htmlStart htmlEnd そして、xhtmlより前に主流だったのが下記のドキュメントタイプ。テーブル組みの時代によく見られていたので、古いサイトは大半がこの形。 htmlSta...

続きを見る

HTML

本物のタブブラウザはスレイプニル!高速ネットサーフィンで仕事で差をつけろ!(2019年更新:スレイプと決別した理由)

2013-09-01

2019年7月更新：もう４年前頃にスレイプニルとはきっぱり決別した理由。スレイプニルの迷走よ止まれ！ スレイプニルは「重い」「突然落ちる」のデメリットがあります。しかし、スレイプニル４のブックマークとタブの使い勝手は抜群にいいので、今も離れられないユーザーがいると思います。 きっぱり決別しようと思ったのは、バージョン５の時にスレイプニルの良さがすべて消し飛んでしまったからです。普通のよくあるブラウザと同じ様なものになった感があります。使いこなす前にアンインストしたので知りませんが。ですが、最新バージョンに全く魅力を感じなかったので決別しようと決心しました。 現在のスレイプニルの公...

続きを見る

個人的主張

【フリー素材】スマホ版ヘッダー用素材

2012-10-25


今回はスマホ版サイトのヘッダーの部分でよく見かけるアイコンの素材。今回配布しているPSDファイルでは、ホームやメールなど全てがベクターなので拡大縮小が自由です。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 スマホ版サイトをデザインする時の強い味方となる参考サイトをついでにご紹介。 ■絶対見ておきたい有名企業のスマホサイトまとめ https://ascii.jp/elem/000/000/590/590502/ ■優れたiPhoneサイトデザイン集 -...

続きを見る

WEB素材

クロスブラウザ対応CSSハックの一覧

2012-08-09

コーダー泣かせのIEはハックで強引に直しちゃいましょう。IEはjavascriptの動作が重いし、CSS3とHTML5の対応は進んでいませんし、FireFoxもCSS3とHTML5が完全対応ではありません。safariとGoogleChromeはその辺はかなり対応していて優秀です。IEの次のバージョンはどうなのでしょうかね？ マイクロソフトはOS部門のWindows以外で大した成功がないような気がします。メッセンジャーはスカイプに負けてるし、ブラウザもイケてないし、スマホでも勝ち目なさそうだし。クラウドサービスもグーグルの方が技術的に強そうなイメージがある。どれも使いやすさには定評がある...

続きを見る

CSS

【フリー素材】フォーム用のボタン

2012-08-09


個人的に好きな色のボタンを3パターン作りました。CSS3で表現できるものですが、IEが対応していないので、グラデーションや角丸はまだまだ画像を使っていった方が無難ですよね。ボタンの文字を編集したい方もいると思うのでPSDファイルもアップしてあります。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...

続きを見る

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