pre.code {
    font-size: 100%;
    word-wrap: break-word;
     white-space: pre-wrap;
     font-family:
          Meiryo,
          "メイリオ",
          "Hiragino Kaku Gothic Pro",
          "ヒラギノ角ゴ Pro W3",
          sans-serif;
}

大見出し

中見出し

小見出し
  1. リスト1
  2. スト2
  3. リスト3

input要素にcssを適用させる

CSS応用PHP

フォームで使用するinputやtextareaなどの要素は他の要素に比べて、ブラウザやデバイスのデフォルトのスタイルシートが多く指定されています。
特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウザやデバイスでも同じように表示させたい時にはCSSで多くのリセットが必要になります。
また、ネット上にあるリセットCSSの多くはフォーム周りのリセットがセットになっている物が一般的です。

フォーム周りのリセット

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


ただ、上記をそのまま使用すると記述した要素全てに適用され、ラジオボタンチェックボックスの枠まで消えるので、注意が必要です。


個別のinput要素

input要素で尚且つtype=”text”の要素にのみスタイルを適用させることで、ラジオボタンや送信ボタンなどにはスタイルは適用されないようにできます。

input[type="text"] {
  background: #999999;
}

www.nxworld.net

Illustratorでギンガムチェックのパターンを作る

Illustrator

  • 20x20pxの正方形を4つ作り2x2に並べ、好きな色をつけ、(※左下のブロックは必ず塗りを白色に設定する)スウォッチに登録します。
f:id:yachin29:20190906130141p:plain
  • 好きなサイズでオブジェクトを作り、上で作ったパターンを適応させる
f:id:yachin29:20190906130243p:plain

斜めの線を入れたい場合

  • 斜めの線を作り、斜め線をスウォッチに登録後、斜め線のサイズを小さくする。
f:id:yachin29:20190906130803p:plain
  • 上で作ったチェックパターンに斜め線パターンを掛けた状態ではパターン登録出来ないので、チェックパターンをダブルクリックし、詳細設定の中で斜め線パターンを適応させる。
f:id:yachin29:20190906130951p:plain

f:id:yachin29:20190906131008p:plain

スレッドテキストオプションを使ってカレンダーを作る

f:id:yachin29:20190906131634p:plain

よく使うwordpressテンプレートタグまとめ

WordPress

ここの多くはwordpressのテキストで既に出て来た物がほとんどですが、よく使うwordpressテンプレートタグをまとめたので使ってみましょう。

ページファイルをカスタムテンプレート化する
<?php
/* 
Template Name: テンプレート名 
*/ 
?>
テンプレート化したheader.phpを呼び出す
<?php get_header(); ?>
サイトのURLを表示
<?php echo home_url(); ?>


使用中のテーマフォルダー内のstyle.cssを呼び出す

<?php echo get_stylesheet_uri(); ?>
使用中のテーマのディレクトリのURLを表示
<?php echo get_template_directory_uri(); ?>
設定」→「一般設定」で設定したタイトルを表示する
<?php bloginfo(‘name’); ?>
設定」→「一般設定」キャッチフレーズ「このサイトの簡単な説明」を表示する。
<?php bloginfo(‘description’); ?>
SEOプラグインの導入

jibun-village.com

restinpeace.jp

http://felica29.starfree.jp/origin-20190905T070327Z-001.zip

index.phpに投稿記事のタイトルとコンテンツを表示させる

<?php get_header(); ?>


<?php if(have_posts()): while(have_posts()): 
the_post(); ?>
<h2><?php the_title(); ?></h2>

<?php the_content(); ?>
<?php endwhile; endif; ?>


<?php get_footer(); ?>

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="送信">

フォームのパーツにアニメーションを追加する「pretty checkbox」

PHPwebデザインwebサイト制作

チェックボックスラジオボタンにclassを加えるだけで、さまざまなデザインのチェックボックスラジオボタンが実装できるラリブラリ「pretty checkbox」。
角を丸くしたり、カラーをつけたり、アニメーションをclassを加えるだけで簡単に実装できます。

lokesh-coder.github.io

coliss.com

既存サイトをトレース|ポカリスエット公式サイト

webサイト制作

既存の物を模写するというのは昔からデザイン上達のコツとしてよく取り上げられます。デザインを細かく観察して自分で再現してみることで、自身のパターンを増やし、実践でも活かしてみましょう

pocarisweat.jp

f:id:yachin29:20190826113229j:plain

note.mu

Xdを使って既存サイトをトレースする

「mimic」というプラグインを使うとトレースしたいサイトの「フォント」「色」「画像」の情報が簡単に判るので非常に便利です。

f:id:yachin29:20190826115151p:plain

tourdexd.com

webkikaku.co.jp

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>既存サイトのトレース|ポカリスエット</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script>
$(function(){
$('.slick-box').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});
});
</script>
</head>

<body>
<div class="wrapper">
<header>
<h1><img src="img/header_logo_01.gif" alt=""></h1>
<nav class="g-nav">
<ul>
<li>
<a href="#">ボタン1</a>
<div class="sub-menu-box">
<ul class="grid">
<li><a href="#">
<img src="img/gnav_img_products_01.png" alt="">
</a></li>
<li><a href="#"><img src="img/gnav_img_products_02.png" alt=""></a></li>
<li><a href="#"><img src="img/gnav_img_products_03.jpg" alt=""></a></li>
<li><a href="#"><img src="img/gnav_img_products_04.jpg" alt=""></a></li>
<li><a href="#"><img src="img/gnav_img_products_07.jpg" alt=""></a></li>
<li><a href="#"><img src="img/gnav_img_products_08.jpg" alt=""></a></li>
<li><a href="#"><img src="img/gnav_img_products_09.jpg" alt=""></a></li>
<li><a href="#"><img src="img/gnav_img_products_06.jpg" alt=""></a></li>
<li class="grid-txt">ポカリスエット基本情報</li>
<li class="grid-txt">イオンウォーター基本情報</li>
<li class="grid-txt">ポカリスエットの歴史</li>
<li class="grid-txt">ポカリスエット誕生秘話</li>
<li class="grid-txt">日常生活にイオンウォーター</li>
<li class="grid-txt">イオンウォーター<br>パウダータイプ</li>
<li class="grid-txt">ポカリスエットゼリー</li>
<li class="grid-txt">よくあるQ&amp;A</li>
</ul>
</div>
</li>

<li><a href="#">ボタン2</a>
<!--<div class="sub-menu-box">
<p><a href="#">コンテンツ2</a></p>
</div>-->
</li>
<li><a href="#">ボタン3</a>
<!--<div class="sub-menu-box">
<p><a href="#">コンテンツ3</a></p>
</div>-->
</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>
</header>

<div class="keyvisual">
<img src="img/home_img_slider_05_pc.jpg" alt="">
</div>
</div><!--/.wrapper-->

<div class="main">

<div class="pick-up">
<h2>PICK UP</h2>
<div class="slick-box">
<div class="autoplay">
<a href="#">
<p>
<img src="img/home_img_pickup_37.jpg" alt=""></p>
<p class="slick-txt">未来へ向かって前向きな行動を起こす人たちを応援する「EVERY SWEAT」公開中!</p></a>
</div>

<div class="autoplay">
<a href="#">
<p><img src="img/home_img_pickup_39.png" alt=""></p>
<p class="slick-txt">夏のCM出演者が決定!オーディションドキュメンタリーはこちらから</p></a>
</div>

<div class="autoplay">
<a href="#">
<p><img src="img/home_img_pickup_33.jpg" alt=""></p>
<p class="slick-txt">サウナといえばイオンウォーター</p></a>
</div>

<div class="autoplay">
<a href="#">
<p><img src="img/home_img_pickup_28.jpg" alt=""></p>
<p class="slick-txt">ウォーキングをもっと楽しく!「STEPMAP」公開中</p></a>
</div>

<div class="autoplay"><a href="#"><p><img src="img/home_img_pickup_15.jpg" alt=""></p>
<p class="slick-txt">ポカリスエット イオンウォーター リニューアル。より一層おいしくなりました。</p></a>
</div>

</div>
</div>

</div>

</body>
</html>


style.css

@charset "utf-8";
/* CSS Document */

/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 * 全ての要素にbox-sizing: border-box;.
 * 全ての背景画像にbackground-repeat: no-repeat.
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
img {
vertical-align:bottom;
}
.wrapper {
position:relative;
height:100vh;
}
header {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#015db2;
display:flex;
}
h1 {
width:40%;
padding:10px 60px 10px 0;
text-align:right;
}
.g-nav {
background:#FFFFFF;
width:100%;
}
.g-nav>ul {
display:flex;
}
.g-nav>ul>li {
width:112px;
height:80px;
}
.g-nav>ul>li>a {
display:block;
color:#222;
text-align:center;
line-height:80px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:url(../img/header_gnav_pc_01.gif) no-repeat;
}
.g-nav>ul>li:nth-of-type(2)>a {
background:url(../img/header_gnav_pc_01.gif) no-repeat -112px 0;
}
.g-nav>ul>li:nth-of-type(3)>a {
background:url(../img/header_gnav_pc_01.gif) no-repeat -224px 0;
}
.g-nav>ul>li:nth-of-type(4)>a {
background:url(../img/header_gnav_pc_01.gif) no-repeat -336px 0;
}
.g-nav>ul>li:nth-of-type(5)>a {
background:url(../img/header_gnav_pc_01.gif) no-repeat -448px 0;
}
.g-nav>ul>li:nth-of-type(6)>a {
background:url(../img/header_gnav_pc_01.gif) no-repeat -560px 0;
}
.g-nav>ul>li:nth-of-type(7)>a {
background:url(../img/header_gnav_pc_01.gif) no-repeat -672px 0;
}
.g-nav>ul>li>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat 0 -80px;
}
.g-nav>ul>li:nth-of-type(2)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -112px -80px;
}
.g-nav>ul>li:nth-of-type(2)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -112px -80px;
}
.g-nav>ul>li:nth-of-type(2)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -112px -80px;
}
.g-nav>ul>li:nth-of-type(3)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -224px -80px;
}
.g-nav>ul>li:nth-of-type(4)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -336px -80px;
}
.g-nav>ul>li:nth-of-type(5)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -448px -80px;
}
.g-nav>ul>li:nth-of-type(6)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -560px -80px;
}
.g-nav>ul>li:nth-of-type(7)>a:hover {
background:url(../img/header_gnav_pc_01.gif) no-repeat -672px -80px;
}
.sub-menu-box {
width:100%;
padding-top:10px;
background:#FFF;
position:absolute;
bottom:80px;
left:0;
visibility:hidden;
}
.g-nav a:hover+.sub-menu-box {
visibility:visible;
}
.sub-menu-box:hover {
visibility:visible;
background:#FFF;
}
.keyvisual {
width:100%;
height:calc(100vh - 80px);
background:#999999;
}

/*display:grid部分*/
.grid {
background:url(../img/gnav_bg_megaMenu_01.gif) repeat-x left center;
display:grid;
margin:0 auto;
justify-content:center;
align-items:flex-end;
grid-column-gap:20px;
grid-template-columns:repeat(4, 190px);
grid-template-rows:repeat(3, 52px 71px) 52px;
font-size:14px;
}
.grid>li.grid-txt {
align-self:flex-start;
color:#015db2;
font-weight:bold;
background:url(../img/mod_ico_arwR_01.png) no-repeat left 4px;
padding-left:16px;
}
.grid>li img:hover {
opacity:0.7;
}
.grid>li:nth-of-type(1) {
grid-column:1 / 2;/*列のラインの位置*/
grid-row: 2 / 5;/*行のラインの位置*/
}
.grid>li:nth-of-type(2) {
grid-column:2 / 3;/*列のラインの位置*/
grid-row: 2 / 5;/*行のラインの位置*/
}
.grid>li:nth-of-type(3) {
grid-column:3 / 4;/*列のラインの位置*/
grid-row: 2 / 3;/*行のラインの位置*/
}
.grid>li:nth-of-type(4) {
grid-column:4 / 5;/*列のラインの位置*/
grid-row: 2 / 3;/*行のラインの位置*/
}
.grid>li:nth-of-type(5) {
grid-column:3 / 4;/*列のラインの位置*/
grid-row: 4 / 5;/*行のラインの位置*/
}
.grid>li:nth-of-type(6) {
grid-column:4 / 5;/*列のラインの位置*/
grid-row: 4 / 5;/*行のラインの位置*/
}
.grid>li:nth-of-type(7) {
grid-column:1 / 2;/*列のラインの位置*/
grid-row: 6 / 7;/*行のラインの位置*/
}
.grid>li:nth-of-type(8) {
grid-column:2 / 3;/*列のラインの位置*/
grid-row: 6 / 7;/*行のラインの位置*/
}
.grid>li:nth-of-type(9) {
grid-column:1 / 2;/*列のラインの位置*/
grid-row: 5 / 6;/*行のラインの位置*/
}
.grid>li:nth-of-type(10) {
grid-column:2 / 3;/*列のラインの位置*/
grid-row: 5 / 6;/*行のラインの位置*/
}
.grid>li:nth-of-type(11) {
grid-column:3 / 4;/*列のラインの位置*/
grid-row: 3 / 4;/*行のラインの位置*/
}
.grid>li:nth-of-type(12) {
grid-column:4 / 5;/*列のラインの位置*/
grid-row: 3 / 4;/*行のラインの位置*/
}
.grid>li:nth-of-type(13) {
grid-column:3 / 4;/*列のラインの位置*/
grid-row: 5 / 6;/*行のラインの位置*/
}
.grid>li:nth-of-type(14) {
grid-column:4 / 5;/*列のラインの位置*/
grid-row: 5 / 6;/*行のラインの位置*/
}
.grid>li:nth-of-type(15) {
grid-column:1 / 2;/*列のラインの位置*/
grid-row: 7 / 8;/*行のラインの位置*/
}
.grid>li:nth-of-type(16) {
grid-column:2 / 3;/*列のラインの位置*/
grid-row: 7 / 8;/*行のラインの位置*/
}


/*slick部分*/
.pick-up h2 {
font-size:30px;
text-align:center;
padding-top:50px;
width:6em;
margin:0 auto 40px;
border-bottom:6px solid #015db2;
}
.slick-box {
max-width:820px;
margin:0 auto;
display:flex!important;
justify-content:space-between;
}
.autoplay {
width:260px!important;
}
.autoplay img {
width:100%;
}
.slick-txt {
font-size:12px;
margin-top:10px;
color:#444;
background:url(../img/mod_ico_arwR_01.png) no-repeat left 2px;
padding-left:1.5em;
}

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>