My Vector Space

人生は寄り道してなんぼ

トップ > HTML / CSS

【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

HTML / CSS Javascript JQuery
sweet-thumbnails-preview

サムネイルプレビュー付きスライダー。

demo

記述の流れは、まず対象とする＜img＞タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。

外部ファイルの中からCSS、Javascript、JQueryのそれぞれのコードを設定していくという流れ。

サムネイルプレビュー付きスライダーの設定
1. 対象とする＜img＞タグにhtmlタグを追加

まずは対象とする＜img＞タグにhtmlタグを追加していく。

 【 html 】
 1
  <div id="ps_container" class="ps_container">
 2
      <div class="ps_image_wrapper">
 3
          <!-- First initial image -->
 4
          <img src="images/11.jpg" alt="" />
 5
      </div>
 6
      <!-- Navigation items -->
 7
      <div class="ps_next"></div>
 8
      <div class="ps_prev"></div>
 9
      <!-- Dot list with thumbnail preview -->
 10
      <ul class="ps_nav">
 11
<li class="selected"><a href="images/11.jpg" rel="images/thumbs/11.jpg">img</a></li>
 12
          <li><a href="images/12.jpg" rel="images/thumbs/12.jpg">img</a></li>
 13
          <li><a href="images/13.jpg" rel="images/thumbs/13.jpg">img</a></li>
 14
          <li><a href="images/14.jpg" rel="images/thumbs/14.jpg">img</a></li>
 15
          <li><a href="images/15.jpg" rel="images/thumbs/15.jpg">img</a></li>
 16
          <li><a href="images/16.jpg" rel="images/thumbs/16.jpg">img</a></li>
 17
          <li><a href="images/17.jpg" rel="images/thumbs/17.jpg">img</a></li>
 18
          <li><a href="images/18.jpg" rel="images/thumbs/18.jpg">img</a></li>
 19
          <li><a href="images/19.jpg" rel="images/thumbs/19.jpg">img</a></li>
 20
          <li><a href="images/20.jpg" rel="images/thumbs/20.jpg">img</a></li>
 21
          <li class="ps_preview">
 22
               <div class="ps_preview_wrapper">
 23
                   <!-- Thumbnail comes here -->
 24
               </div>
 25
               <!-- Little triangle -->
 26
               <span></span>
 27
           </li>
 28
       </ul>
 29
  </div>
2. head内にダウンロードしたCSSファイルをリンクさせる
 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/style.css" />
 3
  </head>
3. JavascriptとJQueryのコードを記述
 【 html 】
 1
  <!-- The JavaScript -->
 2
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 3
  <script type="text/javascript">
 4
   ～ここのエリアに記述するスクリプトのコードはコピペなので省略～
 5
  </script>
 6
  <script type="text/javascript">
 7
   ～ここのエリアに記述するスクリプトのコードはコピペなので省略～
 8
  </script>

 

関連記事他のスライドショー関連の記事

文字を変形させる ( 拡大 / 縮小 )

HTML / CSS

WEB上で縦横比を無視して文字の形を変形させるには、CSS3のtransformプロパティを使う。

transformプロパティの値には「scale」という値を指定してコードを以下のように記述する。

 【 html 】
 1
  transform:scale(x,y);

「x」には横方向の倍率を、「y」には縦方向の倍率を数値で記述する。

標準のサイズは「1」で、1より小さくすれば表示サイズも小さくなり、1より大きくすれば表示サイズも大きくなる。

POINT

使い方としては、0.7～1.5くらいの間で設定するのが自然で、バランスがいい。極端に変えると、フォントの本来の良さが無くなってしまう上に違和感も感じる。

CSSで作るリボン風の見出し

HTML / CSS

 

～CSSでリボンを作るまでの大まかな流れ～

 

まず、リボン風にしたい部分の要素をhtmlに設定。

そこにスタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し

positionプロパティで位置の調整をしていく、という流れ。

 

まずは、htmlから

 【 html 】
 1
  <div class="sample1">
 2
      サンプルテキスト　サンプルテキスト
 3
  </div>

 

次に、CSSのコーディングをしていく

 【 CSS 】
 1
  .sample1{
 2
      position: relative;
 3
      color: #ffffff ;
 4
      background: #1A1A1A;
 5
      font-size: 15px ;
 6
     line-height: 1;
 7
     margin: 15px 65px 20px -12px;
 8
     padding: 7px 20px 5px 20px;
 9
     box-shadow:1px 1px 3px 0px  #666666 ;
 10
   }
 11
  .sample1:before {
 12
      content: "";
 13
      position: absolute;
 14
      top: 100%;
 15
      height: 0;
 16
      width: 0;
 17
      border: 5px solid transparent;
 18
      border-top: 5px solid #484641;
 19
   }
 20
  .sample1:after{
 21
      left: 0;
 22
      border-right: 5px solid #484641;
 23
    }
 24
  .sample1:before{
 25
      visibility:hidden;
 26
    }
 27
 

【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる

HTML / CSS
f:id:ooigawa-bitter-sweet:20181020001804j:plain

CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。

  • ● タグの前後や間に全角スペースが入っている
  • ● セミコロン ( ; ) の記述が抜けている
  • ● 閉じカッコ ( } ) の記述が抜けている
  • ● 編集したファイルを保存し忘れている
  • ● 単純にスペルミス
  • ● セレクタの記述のしかたが優先順位通りになっていない
  • ● class名　id名が数字で始まっている (もしくは数字のみ)
    ( ※機械は数字で始まるものに対して名前ではなく数字だと認識する )

この記事では、特に気をつけておきたい「セレクタの記述のしかたが優先順位通りになっていない」という部分についてを詳しくまとめておきます。

同じセレクタに対する指定が重複している場合は、後に書いたものが優先される

複数の箇所で同じセレクタにスタイルを指定して重複してしまう場合は、後に書いたものが優先されます。

 【 css 】
 1
 p .sample{color:green;}
 2
 p .sample{color:red;}
 3
 p .sample{color:blue;}

この場合　最後にblueを指定している為、文字は青になる。

セレクタ名の書き方で優先順位が決まる

また、前に書いていようが、後に書いていようが、どのセレクタが適用されるかは、セレクタ名の書き方で優先順位が決まる場合があります。

「セレクタ名の書き方」には「優先順位のルール」があるからです。
※優先順位が決まる基準はポイント数です。

1口に「セレクタ」といっても、「タイプセレクタ(要素名)」「classセレクタ」「idセレクタ」など色々な種類があり、また その組み合わせのしかたでも変わったりします。
なので、どのような書き方が優先されるのかしっかり把握しておく必要があります。

優先順位は以下のようになります。右に行くほど優先順位は高くなります。

POINT

タイプセレクタ  <  classセレクタ  <  親要素 + タイプセレクタ  <  idセレクタ

例えば以下のような指定をした場合はどうなるか。

 【 css 】
 1
 .sample{color:green;}
 2
 p .sample{color:red;}
 3
 .sample{color:blue;}

この場合の「sample」の文字の色は赤になります。

この場合　最後にblueを指定してますが、その前に「p」というタイプセレクタを指定している為、優先順位を決めるポイント数の多い ” 赤 ” が文字色になります。

関連記事

CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと
CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。

プロパティの最後に「!important」を記述すると、最優先扱いにできる

ただ、上記の「優先順位のルール」には例外があって、プロパティの最後に「!important」を記述した場合です。

プロパティの最後に「!important」を記述すると、上記にある「優先順位のルール」を無視して、idセレクタよりも優先されて最優先扱いになります。

 【 css 】
 1
 .sample{color:green!important;}
 2
 p .sample{color:red;}
 3
 .sample{color:blue;}

この場合の「sample」の文字の色は緑になります。
「! important 」を指定しているからgreenが最優先で適用されます。

PICK UP
注目記事セレクション

CSSだけで改行する方法

HTML / CSS

ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。

f:id:ooigawa-bitter-sweet:20171227131533j:plain

とくに致命的な問題ではないですが、やはり見やすさ　レイアウトを考えるとだいぶ印象が違ってくるので、やはり直したいところです。

でもhtmlがいじれない　CSSしかいじれない！！そんな状況になった時に便利な「CSSだけで改行する方法」をまとめておきます。

CSSだけで改行する方法

まず、移動させたい対象となる要素があったら、その直前にある要素をセレクタ名にして、この要素を基準に設定していきます。

記述のしかたは以下の2パターンになります。

基準にしたセレクタの後方で改行する場合
 【 CSS 】
 1
  .sample:after{
 2
  content: "\A";
 3
  white-space: pre;
 4
  }
基準にしたセレクタの前方で改行する場合
 【 CSS 】
 1
  .sample:before{
 2
  content: "\A";
 3
  white-space: pre;
 4
  }
PAGE TOP