css

Googleフォームに自身のcssを適応させる

webサイト制作

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com

HTMLで同じ項目のフォームを作成する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

f:id:yachin29:20190830132353p:plain

以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。

f:id:yachin29:20190830132103p:plain

サンクスページにリンク先を変更させ流にはjQueryajaxで可能なので、自身で作成したinputページに以下のjQueryを追加しましょう。

これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp

function postToGoogle() {

//フォームの値を取得
var field1 = $('[name="entry.xxxxxxxx"]').val();
var field2 = $('[name="entry.yyyyyyyy"]').val();


$.ajax({
url: "googleフォームのactionの値",
data: {"entry.xxxxxxxx": field1,"entry.yyyyyyyy": field2
},
          type: "POST",
          dataType: "xml",
          statusCode: {
              0: function() {
                  //Success message
location.href="サンクスページのパス";
              },
              200: function() {
                  //Success Message
location.href="サンクスページのパス";
              }
          }
      });
      }

最後に送信ボタンに関数の指定をする

<input type="button" onClick="postToGoogle()" value="送信">

cssのdisplay:grid を使ってグリッドレイアウトを作ってみる

css3

CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。

display:gridの利点

floatやflexの場合、レイアウトしたい要素を囲むラッパー的な余計な要素が必要になってしまいがちですが、display:gridを使う事で余計な要素を作らずにレイアウトが出来ます。

まずはコンテナに

.container {
  display: grid;
}

次にアイテム間の縦横の隙間を指定します。

.container {
  display: grid;
  grid-column-gap: 10px;/*横の隙間*/
  grid-row-gap: 10px;/*縦の隙間*/
  /*grid-gap:10px;横縦同じであれば省略可*/
}

「grid-template-columns」を使ってアイテムの横幅を指定します

.container {
  display: grid;
  grid-column-gap: 10px;/*横の隙間*/
  grid-row-gap: 10px;/*縦の隙間*/
  /*grid-gap:10px;横縦同じであれば省略可*/
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
  • repeat() … repeat()関数で繰り返しパターンを指定出来ます。
  • 「auto-fit」と「auto-fill」の違い

auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます
auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます

  • minmax()

minmax()ではグリッドアイテムの最小幅と最大幅を指定しています。この記述だと最小幅が200px、最大幅が1fr(可変のフラクション)です。

fr

frとは「display: grid;」が指定された要素に対して有効な単位で、要素内の可用領域のうち占める割合を表す。Flexboxのflex-growと同じような振る舞いをすると理解してもらえれば良いでしょう。

www.webprofessional.jp

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>css-gridその2</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,p {
margin: 0;
padding: 0;
}
.container {
max-width: 1366px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
display: grid;
grid-column-gap: 10px;/*横の隙間*/
grid-row-gap: 10px;/*縦の隙間*/
/*grid-gap:10px;横縦同じであれば省略可*/
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

.item {
  border-radius: 10px;
  background:#7FD4D6;
  padding: 15px;
  text-align: center;
}
.item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}
p {
text-align: left;
}

</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="http://placehold.it/240x150" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!--/.item-->
<div class="item">
<img src="http://placehold.it/240x150" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!--/.item-->
<div class="item">
<img src="http://placehold.it/240x150" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!--/.item-->
<div class="item">
<img src="http://placehold.it/240x150" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!--/.item-->
<div class="item">
<img src="http://placehold.it/240x150" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!--/.item-->
<div class="item">
<img src="http://placehold.it/240x150" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!--/.item-->
</div>
</body>
</html>

結論

レイアウトする際に授業では「float」「flex」「grid」の3種類を使用してきましたが「どれが一番優れているか」では無く、各プロパティの特徴を理解し、上手に使い分ける事が重要です。

ics.media

cssで作るメガドロップダウンメニュー

webサイト制作

f:id:yachin29:20160908004023p:plain

メガドロップダウンメニュー

最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。

メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp

www.nike.com

www.kureha.co.jp

www.nodai.ac.jp

cssで作成する場合はhtmlの構造がどうなっているか、しっかりと理解する必要があります。

<body>
<header>
<div class="inner">
<h1>ロゴ</h1>
<nav class="g-nav">
<ul>
<li><a href="#">ボタン1</a>
<div class="sub-menu-box">
<p><a href="#">コンテンツ1</a></p>
</div>
</li>

<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
<li><a href="#">ボタン5</a></li>
<li><a href="#">ボタン6</a></li>
<li><a href="#">ボタン7</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="keyvisual">
</div>
</div>
</body>

cssの正規表現を使って要素を絞り込む

css3sass

divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。
そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込む事が出来ます。

<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>

クラス名の行頭を一致させる場合

div[class^="box"] {
 
}

クラス名の行末を一致させる場合

div[class$="◯◯"] {
 
}

クラス名の部分一致させる場合

div[class*="◯◯"] {
 
}

Sassのfor文を使ってループ処理する

@for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
}

フォントサイズを画面幅に応じて可変にする

CSS応用レスポンシブデザイン

remを使ったフォントサイズ

まずはremを使ったフォントサイズの指定を覚えましょう。
「rem」とは、「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相対的に指定する単位の事です。

remを使う時の注意点

remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */


h1 {
font-size:4.0rem; /* 40px */
}

スマホ時にフォントサイズを画面幅に応じて可変にする

フォントサイズを可変にするには上記のremにvwとcalcを合わせて使用します。
ルート(html)のfont-sizeをcalc(100vw / 32)とすることで、iPhone5などの画面幅320pxのときは基準のフォントサイズを10pxとし、ルートより下ではremを使っていくという方法です。


@media (max-width:640px){
html{
font-size: calc(100vw / 32);/*iPhoneの最小サイズ320pxに10px*/
}
h1 {
font-size:3.0rem;/*320pxの時30pxに*/
}
p {
font-size: 1.4rem;/*320pxの時14pxに*/
}
}

スマホ時に横スクロールのUIを実装

css3

最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また、シンプルな横スクロールのUIであれば、CSSのみで実装出来るので覚えましょう。

f:id:yachin29:20181127125323p:plain

www.tripadvisor.jp

webkit-overflow-scrolling: touch

本来、はみ出た要素をスクロールで動かすには「overflow: scroll」で良いのですが、「overflow: scroll」ではIOS系のデバイスでスクロールの動きがぎこちなくなるので、代わりに「-webkit-overflow-scrolling: touch」を指定します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cssのみで横スクロール</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
img {
max-width: 100%;
}
h1 {
  text-align:center;
  padding: 10px 0;
}
.content {
  max-width:960px;
	margin: 50px auto 0;
}
.mask {
  width:100%;
}
ul {
  list-style:none;
  display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
li {
width:calc((100% - 30px) / 4);
margin-bottom: 10px;
}
@media screen and (max-width:768px){
.content {
  max-width:960px;
  margin: 50px auto 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
ul {
  display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
	width: 800%;
}
li {
width:calc((100% - 90px) / 8);
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>タイトル</h1>
<div class="content">
<div class="mask">
<ul>
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
</ul>
</div>
</div>
</header>
</body>
</html>

縦書きとrubyタグの使い方

css3

「webは横書きが当たり前」そんな常識は変化しつつあります。
実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは縦書きを表現できるようになっています。

「writing-modeプロパティ」を使用し、縦書きにします。現在はFirefoxIEChromeSafariと主要ブラウザー全てに対応しているので、積極的に使っていきましょう。またWebkit系とIEは共にベンダープレフィックスが必要なので、Firefoxには必要ないのでそちらも注意が必要です。

また、この機会に最新の明朝体に最適化されたfont-familyの指定もしっかり覚えておきましょう。

p {
  -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/
  -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/
  writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/
}

明朝体を使用する際のfont-family 2016年版

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;

yachin29.hatenablog.com

www.jishouin.jp

http://thana531223.webcrow.jp/shirane/

www.fieldcorp.jp

www.miyama-sansou.com

81-web.com

tategaki.github.io

ルビの使い方

HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。(2015年8月1日現在、Firefoxの最新版は39)
このため、IEChromeSafariFirefoxの主要4ブラウザーで表示が出来るようになりました。今後の為にrubyタグの使い方をしっかりと覚えておきましょう。
http://yachin29.hatenablog.com/entry/2015/05/14/001720yachin29.hatenablog.com

rubyタグ対応前のFirefox

f:id:yachin29:20150513235308j:plain

f:id:yachin29:20150514000127j:plain

rubyタグ対応後のFirefox(Ver.38以降)

f:id:yachin29:20150801101806p:plain

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦書きとrubyタグ</title>
<style>
body {
  background: #D05A6E;
}
p {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
  margin: 0 auto;
  color: #FCFAF2;
  font-size: 22px;
  line-height:3;
  padding: 1em;
  letter-spacing: 0.15em;
  -webkit-writing-mode: vertical-rl; /*縦書きにする(右から左)*/
  -ms-writing-mode: tb-rl;
}
</style>
</head>
<body>
<p><ruby>心<rt>こころ</rt></ruby>にも<br>
あらでうき<ruby>世<rt>よ</rt></ruby>に<br>
ながらえば<br>
<ruby>恋<rt>こい</rt>しかるべき</ruby><br>
<ruby>夜半<rt>よか</rt></ruby>の<ruby>月<rt>つき</rt></ruby>かな</p>
</body>
</html>

今回はこれにCSS3アニメーションを追加してみましょう


見本サイト
http://yachin29.com/ruby/ruby.html

f:id:yachin29:20151130014437j:plain

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

css3

以前、Photoshopクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。

さらに

-webkit-text-fill-color: transparent;
https://codepen.io/Jintos/full/crlxk/codepen.io

@font-faceを使ったWebフォントの使い方

css3

webフォントには大きく分けて2種類の使い方があります。
1つはGoogleFontのようにネット上にあるCDNを使うパターンです。
今回は、もう1つの、「自身でフォントデータをサーバーにアップする」方法をやってみましょう。こちらの方法を使えば、GoogleFontには無いような珍しい個性的なフォントを表示させる事も可能になります。

1、使いたいフォントデータを自身のサーバーにアップロードする。

2、CSSに「@font-face」でフォントの指定をする。

@font-face {
font-family: MyFont; /*任意の名前を付ける*/
src: url(‘fonts/againts.otf’) format(“opentype”);
}

3、適用させたい要素に上で付けたfont-familyを指定する

h1 {
font-family: MyFont;
font-size: 40px;
}

このように非常に簡単な記述でWebフォントは使え、最近は無料のフォントデータも豊富にあるのでぜひ使ってみましょう。
ただ、むやみに多種類のフォントを使う事はファイルの読み込みが遅くなり、デザイン的にも良くないので注意が必要です。また、個人・商用共にフリーのフォントでも再配布禁止のフォントはたくさんあるので、ライセンス確認は必ず行いましょう。

ダウンロードしたフォントの中にTrueTypeとOpenTypeの両方があった場合、Webサイト制作ではOpenTypeデータを優先的に使いましょう。

TrueType

TrueTypeは歴史が長く、様々なアプリケーションに使われている形式。特にWindows用のアプリケーションでは、いまだにTrueTypeのみをサポートしているというものが残っている。たとえば、年賀状ソフトや、WordやPowerPointの一部の機能はOpenTypeに対応していないものがある。

OpenType

TrueTypeより高度な機能を持たせた新たなフォント規格がOpenType。WindowsMacとの間で互換性を維持できるようになっている点が特徴。

fontfree.me

photoshopvip.net

cssだけでハンバーガーメニューを作る

css3

授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。
また、細かい要素の指定方法が必要になるので、

「~」で同じ階層の後ろに並ぶ要素に適用
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>

css

example ~ p {
  color: red;
}
「+」で同じ階層のすぐ後の要素にのみ適用
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>

css

.example + p {
  color: red;
}

などを覚えておきましょう。




cssだけでハンバーガーメニュー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのみでドロワーメニュー</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<style>
html,body,ul,li,p {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}

header {
  background:#0099CC;
  height:70px;
  padding:10px;
  box-sizing:border-box;
}
#nav-input {
  display:none;
}
#nav-open {
  display:block;
  width:50px;
  height:50px;
  background:#0066CC;
  position:relative;
  cursor:pointer;
}
#nav-open span {
  display:block;
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.1s;
}
#nav-open span:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:-22px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.1s;
}
#nav-open span:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:0;
  right:0;
  bottom:-22px;
  left:0;
  margin:auto;
}
#nav-input:checked ~ #nav-open span {
  transform:rotate(45deg);
}
#nav-input:checked ~ #nav-open span:before {
display:block;
  content:"";
  width:30px;
  height:2px;
  border-radius:2px;
  background:#FFFFFF;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transform:rotate(90deg);
}
#nav-input:checked ~ #nav-open span:after {
  display:none;
}

#nav-close {
  display:block;
  position:fixed;
  top:70px;
  left:0;
  width:100%;
  height:100vh;
  background:rgba(0,0,0,0.6);
  transform:translate(-100%,0);
  transition:0.2s;
}
#nav-input:checked ~ #nav-close {
    transform:translate(0,0);
}
#nav-content {
  width:60%;
  height:100vh;
  background:#FFF;
  position:fixed;
  top:70px;
  left:0;
  transform:translate(-100%,0);
  transition:0.2s;
}
#nav-input:checked ~ #nav-content {
   transform:translate(0,0);
}
#nav-content li {
  height:50px;
  padding:0 14px;
}
#nav-content li a {
  display:block;
  padding:24px 0 10px 20px;
  border-bottom:1px solid #333;
}
.fa-angle-right {
  margin-left:50%;
}
.box p {
  line-height:1.8;
  padding:20px;
}
</style>
</head>

<body>
<header>
<div id="nav-wrapper">
<input id="nav-input" type="checkbox" class="unshown">
<label id="nav-open" for="nav-input"><span></span></label>

<label class="unshown" id="nav-close" for="nav-input"></label>
<nav id="nav-content">
<ul>
<li><a href="#">ボタン1<i class="fas fa-angle-right"></i></a></li>
<li><a href="#">ボタン2<i class="fas fa-angle-right"></i></a></li>
<li><a href="#">ボタン3<i class="fas fa-angle-right"></i></a></li>
<li><a href="#">ボタン4<i class="fas fa-angle-right"></i></a></li>
</ul>
</nav>
</div>
</header>
<div class="box">
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。<br>
なぜそんな無闇をしたと聞く人があるかも知れぬ。<br>
別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。<br>
小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>
</div>
</body>
</html>