WEB DESIGN

ドメイン&サーバー

VPNをちょっと理解しておく。

仕事をしている中で、外出先からインターネットを使って社内のPCにアクセスしたり、特定の相手に対して情報の共有をしたりすることがあります。 以前は、このような場合には専用線やWEBベースでの暗号化接続を提供するSSL(Secure Socke...
CSS

擬似要素「:link,:visited,:hover,:active」の順番が曖昧なら覚えてしまえ!

いくつになっても覚えられないことって意外とあるものです。しかも基本的なことほど、何度も何度も確認してしまうことってありませんか? 恥ずかしながら私はあります。。。 「a:link」等の擬似要素の記述する順番がわからなくなる病がそのひとつです...
jQuery

スクロールをキーとしたアクションを「waypoints.js」で実現

画面をスクロールをすることで、ナビゲーションを上部固定する方法のひとつとして、jQueryプラグインの「waypoints.js」をご紹介します。上部ナビ固定をする方法は、これまでもいくつかご紹介させて頂きましたが、今回はアニメーションエフ...
jQuery

jQueryで上部固定ナビゲーション(プルダウン付)を実装するには!

これまでにも何度か紹介してきた「固定ナビ」ですが、今回は「スクロール+プルダウン」の表現を可能にする方法をメモしておきます。 まずは、デモサンプルを確認してみてください。 // // DEMO HTMLを記述  入れ子になっているナビゲーシ...
HTML

グリッドレイアウトの基本的なこと。

今回は、WEBサイトを作成する上でのレイアウト手法のひとつ「グリッドレイアウト」について考えていきたいと思います。最近では「フラットデザイン」や「レスポンシブデザイン」など新たな表現スタイルでそれぞれのWEBサイトの個性を出していますが、そ...
jQuery

アイコン画像やイラストが、ふわふわ浮かぶ「jqFloat」で遊び心を!

雲や気球など、ふわふわ~っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。 // // まずは、デモサンプルを確認してみてください。 DEMO 1.jqFloat...
jQuery

グローバルナビをスクロール時に固定する方法

グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフ...
jQuery

読み込み完了までローディング画像でストレスを軽減する方法

ギャラリーページなど大きい画像を並べていたり、パララックスサイトのように1ページあたりの容量が比較的大きくなるようなページ構成をすると、ユーザー環境によっては配置されている画像が徐々に表示されたり、コンテンツがバラバラに表示されて崩れてしま...
ドメイン&サーバー

いまさら聞きづらい「サブドメインって何?」

Web制作をはじめた人が出くわす「ん?」をすっきり解決! 前回の記事に引き続き、ドメイン関連の内容ですが、「サブドメインって何?」という疑問を解決していきたいと思います。 ついでに、「サブディレクトリ」についても考えていきたいと思いますが、...
ドメイン&サーバー

いまさら聞きづらい「マルチドメインって何?」

Web制作をはじめた人が出くわす「ん?」をすっきり解決! Webデザイナーと言っても、サイトの見た目を作るだけではなく、サーバーやドメインに関しても知識が必要になってきます。PC作業好きだけど、PC知識はちょっと自信ない…って言う人もいるん...
WordPress

【WordPress】任意のCSSを複数読み込みたいときはどうすればいい?

通常、デフォルトで用意する「style.css」を読み込んでいますが、「ユーザーエージェントごと(PC/iPad/iPhoneなど)に分けてCSSを利用したい」、「基本設定はstyle.cssに記述して細かい指定はsub.cssとして読み込...
WordPress

WordPress無料テーマを探しているなら「just themes」をチェック!

WordPress用の無料テーマを探している方に是非オススメの「just themes」をご紹介します。 シンプルなデザインやレスポンシブ対応のものなど数多くあり、色々試してみたくなる無料テーマが揃っていますので、是非とも覗いてみてください...
CSS

特定の要素を画面の中央(上下左右)に配置する方法

意外と多いかもしれませんが、ある特定の要素を画面の中央に配置したいときに、左右は簡単なのに上下は一体どうやるんだろう?と、迷い迷ってmargin-topで誤魔化してしまう…。 そんな方は、ここでこっそり覚えちゃってください。まず、水平方向(...