WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

inline-blockやfloatで横並びにした時に高さを揃える

デモ
http://efu.sakura.ne.jp/web/inline-block/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>inline-blockで横並びにした要素の高さを揃える</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <ul>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
    <ul>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
  </div>
</body>
</html>
@charset "utf-8";

.wrapper {
  margin: 50px auto;
}

ul {
  width: 750px;
  margin: 0 auto 10px;
  text-align: center;
  letter-spacing: -.4em;
  overflow:hidden;
}

ul li {
  display: inline-block;
  width: 200px;
  margin-bottom: -32768px;
  margin-right: 50px;
  padding-bottom: 32768px;
  letter-spacing: 0;
  vertical-align: top;
  background: #eee;
}

ul li:nth-child(3n) {
  margin-right: 0;
}

縦の間を調節したい場合は1列ごとに囲む必要がある。
borderをつけた場合は下が切れる。

広告を非表示にする

文字を左からフェードで表示

デモ
http://efu.sakura.ne.jp/web/fade/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フェードアニメーション</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>Sacramento</h1>
</body>
</html>
body {
  text-align: center;
}

h1 {
  position: relative;
  display: inline-block;
  margin: 200px 0;
  font-size: 100px;
  font-family: 'Sacramento', cursive;
  color: #333;
}

h1:before {
  content: "";
  position: absolute;
  top: -10%;
  left: -100%;
  width: 270%;
  height: 120%;
  background: #fff;
  background: -moz-linear-gradient(center left, transparent, #fff 25%, #fff 50%, #fff 75%, transparent);
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, from(transparent), color-stop(0.25, rgb(255, 255, 255)), color-stop(0.5, rgb(255, 255, 255)), color-stop(0.75, rgb(255, 255, 255)), to(transparent));
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

h1.active:before {
  left: 100%;
}
$(function(){
  setTimeout( function(){
    $('h1').addClass('active');
  }, 400);
});

linear-gradientでグラデーションを作ったものを上に被せて
横にアニメーションさせる。

広告を非表示にする

現在いるページのナビゲーションにクラスを追加

デモ
http://efu.sakura.ne.jp/web/menu3/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ナビゲーションのカレント</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <ul class="menu">
    <li class="menu__item menu__item--top"><a href="/web/menu3/">TOP</a></li>
    <li class="menu__item menu__item--about"><a href="/web/menu3/about/">ABOUT</a></li>
    <li class="menu__item menu__item--gallery"><a href="/web/menu3/gallery/">GALLERY</a></li>
    <li class="menu__item menu__item--contact"><a href="/web/menu3/contact/">CONTACT</a></li>
  </ul>
</body>
</html>
@charset "utf-8";

.menu {
  margin: 50px 0;
  text-align: center;
  letter-spacing: -.4em;
  background: #006284;
  border-top: 2px solid #006284;
  border-bottom: 2px solid #006284;
}

.menu .menu__item {
  position: relative;
  display: inline-block;
  padding: 20px 0;
  letter-spacing: 0.1em;
}

.menu .menu__item a {
  position: relative;
  display: block;
  margin: 0 20px;
  padding: 0 4px;
  color: #FFF;
  text-decoration: none;
}

.menu .menu__item a:before {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 0;
  left: auto;
  width: 0;
  height: 3px;
  background: #bc002D;
  overflow: hidden;
  transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu .menu__item a:hover:before {
  left: 0;
  width: 100%;
  transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu .menu__item.current a:before {
  width: 100%;
  transition: none;
}
$(function(){
  var path = location.pathname;
  if(path != "/") {
    console.log(path);
    if(path.split("/")[3] == ""){
      console.log(path.split("/"));
      $('.menu .menu__item--top').addClass('current');
    } else {
      console.log(path.split("/"));
      $('.menu .menu__item--' + path.split("/")[3]).addClass('current');
    }
  }
});

過去の記事

mmmmofu.hatenablog.com

広告を非表示にする