20200630のCSSに関する記事は14件です。

【初心者でもわかる】calc()を使ってロールケーキをキッチリ3等分にする方法

どうも、7noteです。今回はcalc()をマスターして、1本のロールケーキを3等分して3人で仲良く食べるお話。

母「今日のおやつはロールケーキだよ♪」
長男「やったー!」
次男「わーい!」
三男「たべるーー!」

母「はい、じゃあお兄ちゃん。 ロールケーキを3人で仲良く食べられるように3等分に切ってくれる?」
長男「わかったー。じゃあだいたいこのくらいかな・・・あっ。」

失敗

rollcake_ng.png

みんな「あーーー・・・」
次男「大きさバラバラだね。」
長男「じゃあ俺が一番背高いからおれが一番大きいやつな。」
次男・三男「ずるい!!」

・・・(ケンカ勃発)

母「やめなさい!ケンカするならもうおやつ抜きにするで!」
3人「ごめんなさい~。」

みんなはケンカにならないように、calc()を使って、綺麗に3等分する方法をマスターしよう!

材料はこちら(1人前)

ファイル CSSプロパティ 意味
index.html
style.css background: url();
width:calc();
背景画像の設定
計算式を入れる
rollcake.png ロールケーキの画像

作り方

  1. ロールケーキの画像を用意。今回は背景画像に設定します。
  2. index.htmlに3つのdiv要素を用意。
  3. style.cssで、calc()を使って、3つのdiv要素の大きさをそれぞれ1/3の大きさにして完成。

1.ロールケーキの画像を用意。今回は背景画像に設定します。

index.html
    <div class="dish">
        <!-- このdishの背景画像にロールケーキの画像を設定します -->
    </div>
style.css
    .dish {
        width: 400px; /* 横幅を3で割りきれない数字を設定 */
        height: 200px; /* 高さを指定。高さがないと背景画像が表示されない */
        background: url(rollcake.png); /* 背景にロールケーキの画像を指定 */
        background-repeat: no-repeat; /* no-repeatを指定しないと背景画像が繰り返されてしまうので設定 */
        display: flex; /* 3つを横並びにする */
    }

2.index.htmlに3つのdiv要素を用意。

index.html
    <div class="dish">

        <!-- ここから下を追記 -->
        <div class="first"></div> <!-- div要素を3つ用意。それぞれに違うクラスを付けます。 -->
        <div class="second"></div>
        <div class="third"></div>

    </div>

3. style.cssで、calc()を使って、3つのdiv要素の大きさをそれぞれ1/3の大きさにして完成。

style.css
    /* ここから下を追記 */
    .dish div {
        width: calc(400px / 3); /* 「400px ÷ 3 = widthの値」となるような書き方になります。 */
        height: 200px; /* 親要素と同じ高さを指定 */
        opacity: 0.1; /* ロールケーキがみえるようにするため */
    }

    .dish .first {background: #F00; /* 背景色に赤色を指定 */}
    .dish .second {background: #0F0; /* 背景色に緑色を指定 */}
    .dish .third {background: #00F; /* 背景色に青色を指定 */}

\完成/

rollcake_ok.png

この色の境目に沿って包丁を入れれば、綺麗に3等分できますね!
これでケンカもなく、仲良く3人でおやつが食べれますね。

解説・作り方のコツ

  • calc()は違う単位同士を計算させる事もできるので、覚えておくととても便利です!
  • clac()では足し算(+)、引き算(-)、掛け算(*)、割り算(/)の4種類の計算ができます。かっこ付きの計算「(10px + 20px) / 3」もできますよ。

まとめ

ケンカせず、みんな仲良くが一番だね!

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね!
rollcake.png

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS:Flex:IE11とiOS13のSafariで「flex-direction: column-reverse」が効かない

前提条件

  • Windows10のIE11
  • iOS13のSafari(iPad第6世代とiPhoneSE2020)

目的

  • flexで列の順番を逆順にする。

手順

  • 以下のCSSを設定
<div id="flex-box">
  <div class="col">1</div>
  <div class="col">2</div>
</div>
#flex-box {
  display: flex;
  flex-direction: column-reverse;
}

現象

  • 高さがなくなり、コンテンツが重なる。

対応

  • 以下の設定を列要素に設定。
.col {
   flex: 1 1 auto;
}

備考

  • PC・Android版のChrome、Chromium版のEdge、古いMacのSafariでは、対応コードなく期待通りの結果になる。
  • iOSのSafari は、「スマホ界のIE」と呼べるぐらい独特な仕様だが、シェアがあるため無視できない。この件については、本当にIE11と同じ挙動になっていた。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Flexボックスをレスポンシブデザインに対応【個人メモ 作成中】

下記で学習しました
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
Flexボックスを利用しているサイトをスマホ。タブレット対応させます。

cssに下記のようなメディアクエリを使って対応させます。画面サイズが600px以下の場合のcssを記述

@media (max-width: 600px) {
    /* 画面サイズが600px以下はここを読み込む */
}

PC(1920px)、タブレット(834px)、スマホ(414px)想定で3種に分類
PCデフォルトとしタブレット、スマホをメディアクエリ内に記述する。PCとタブレットのブレークポイントを1200pxに設定、タブレットとスマホのブレークポイントを600pxに設定する

/* デフォルト+PC設定を記述する */
@media (max-width:1200px) {
    /* 画面サイズが600px~1200pxはここに記述 */
}
@media (max-width:600px) { 
    /* 画面サイズが600px以下はここに記述 */
}

基礎的はビューポートもあまり理解していませんでした。こちらです
“ビューポート”とは?スマートフォン向けのウェブページでビューポートを設定する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

background-attachment: fixed;は使うな!

自分メモで残しておきます。

background-attachment: fixed;は使うな!

単刀直入にいうと、
全ブラウザに対応していないからです。

Edgeでは背景画像の大きさが制御できない

Windows10で確認したところ、IEでは問題なかったのですが、
なぜかEdgeで background-size:cover; が効きませんでした。

iPhoneのsafariでも背景画像の大きさが制御できない

iPhone6と10でも同じ不具合を確認しました。。。

他のブラウザでは大丈夫でしたが、
上記2つで問題が発生しました。。。
background-attachment: fixed; を解除すると、
背景画像の大きさが変わっているので、
必ず調整し直してください。

報告は以上です!!!
(何か良い対処方法がありましたら、ご教示いただけるとありがたいです。)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

aタグでもdisabled属性を扱えるように見せかける

前提

disabled属性とは要素の操作・入力を無効化するために設定する要素ですが、この要素を適用することができるのはformに関連付けられた要素のみです。
参考: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute

しかし、しばしば本来disabled属性が使用できないaタグやその他のタグでも操作の無効化の意味合いとしてdisabled属性を使いたくなることがあります。ありません?僕はあるんです、結構頻繁に。

そんなときにちょっと使えそうなTIPSを書いておきます。

属性セレクタを使用してdisabledっぽくする

css3には属性セレクタというものがあります。これは指定した属性の存在もしくはその値によって要素を選択できるセレクタです。

これを用いて、disabled属性を持つaタグ要素を選択し、pointer-eventsを用いてマウスイベントを無効化してやることで擬似的なdisabledっぽい動きを実現することができます。

動作サンプル(codepen)

  <a disabled href="https://google.com">
    このリンクはクリックできないよ
  </a>
  a[disabled] {
    pointer-events: none; /* マウスイベントの無効化 */
    opacity: 0.5; /* 操作できない感のあるスタイル付け */
  }

操作できない感のあるスタイル付けとしてcursor:not-allowedとかを使うと更にそれっぽい感じになるのですが、pointer-events: none;と食い合ってしまうので、cursorを指定したい場合は別のアプローチが必要になりそうです。

補足

単にaタグの操作を出来なくしているだけなので、disabled要素を外すなりリンク先を直接リクエストすることで遷移先を参照することはもちろん可能です。意図しない遷移・リクエストが行われた際の対策実装は別途適宜行ってください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLとCSSで表現するツールチップ

HTMLとCSSだけでツールチップ(マウスオンしたら出てくる注釈みたいなやつ)を作ります。

HTML

HTML
<span class="c-tooltip" data-tooltip="ツールチップの内容">マウスホバーでツールチップを表示</span>

今回はspanタグで囲っているけど何でも良い。文字だけじゃなくてアイコン画像などでも良い。
data-tooltipというカスタムデータ属性を作成、その中にツールチップに表示したい内容を入力してくださいね。

data-* - HTML: HyperText Markup Language | MDN

CSS

ポイントは::after要素にHTMLで設定したカスタムデータ属性のをattr(data-tooltip)で呼び出すこと。
これ便利だなー

CSS
/* マウスオンする要素とツールチップを横並びにする */
.c-tooltip {
    display: inline-block;
    position: relative;
}

/* ツールチップ共通の設定 */
.c-tooltip::before,
.c-tooltip::after {
    -webkit-transition: all 0.2s;
    opacity: 0;
    position: absolute;
    transition: all 0.2s;
    visibility: hidden;
    z-index: 11;
}

/* ツールチップ吹き出しのひげ */
.c-tooltip::before {
    -webkit-transform: translateY(-50%);
    border-color: transparent #5f6368 transparent transparent;
    border-style: solid;
    border-width: 3px 7px 3px 0;
    content: "";
    height: 0;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
}

/* ツールチップ吹き出しの本体 */
.c-tooltip::after {
    -webkit-transform: translateY(-50%);
    background: #5f6368;
    border-radius: 3px;
    color: #fff;
    content: attr(data-tooltip); /* ここでdata-tooltipの内容を呼び出しているよ */
    display: block;
    font-size: 11px;
    font-weight: 600;
    left: calc(100% + 13px);
    padding: 5px 10px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* マウスオンしたときのカーソルの設定 */
.c-tooltip:hover {
    cursor: pointer;
}

.c-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

.c-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

以上です。完成データはこちらです。

See the Pen simple Tooltip by nagomi-753 (@nagomi-753) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSを使ってタブの見た目だけを作る

このような見た目のタブをHTMLとCSSで作成します。見た目だけです。

image.png

HTML

まずはHTMLから。

HTML
<!-- tab -->
<div class="c-tabs_wrap">
    <ul class="c-tabs_list">
        <li class="c-tabs_item is-current"><span>アクティブなタブ</span></li>
        <li class="c-tabs_item"><a href="">クリックできるタブ</a></li>
        <li class="c-tabs_item"><a href="">クリックできるタブ</a></li>
        <li class="c-tabs_item is-disabled"><span>使用できないタブ</span></li>
        <li class="c-tabs_item is-disabled"><span>使用できないタブ</span></li>
    </ul>
</div>
<!-- ./tab -->

ポイントは.is-current.is-disabledをつけるだけでタブの見た目を変えること。JSで制御しやすくなります。
c-tabs_wrapは今回は特に使用しませんが全体の余白の設定とかで使うと良いかもしれませんね。

CSS

タブ全体のレイアウト

まずはタブアイテムを横並びにします。
flexboxを使用するとタブアイテム内のテキストの行数に関係なく高さを揃えることができます。

CSS
/* タブアイテムを横並びにする */
.c-tabs_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

タブグループの下部にグレーの線をひきます。疑似要素を使って線を作り、z-indexの設定もしておきます。

CSS
/* タブグループの下部にグレーの線をひく */
.c-tabs_list::after {
    background-color: #8598a7;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

タブアイテムの基本デザイン(青い背景のやつ)

タブアイテムの基本デザインを設定します。
flexboxを使用しているのは、文字を常に上下中央に配置したいから。こうすることにより、もしタブ内のテキストが2行になっても大丈夫。

CSS
/* タブアイテムの形状を設定 */
.c-tabs_item {
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* タブアイテムのデザインを設定 */
.c-tabs_item a,
.c-tabs_item span {
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    background-color: #004bb1;
    border: 1px solid #004bb1;
    border-bottom-color: #fff;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    font-weight: 600;
    height: 100%;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.8em;
    min-width: 8em;
    padding: 0.3em 0.8em;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

リンクが貼られているタブアイテムにマウスオンした場合の設定も入れておきましょう。

CSS
/* マウスオン時の設定 */
.c-tabs_item a:hover {
    opacity: 0.6;
}

アクティブなタブのデザイン

アクティブタブのデザインの設定を行います。is-currentクラスを付与したときのデザインです。
z-indexの値を他の要素よりも大きくして、一番手前に持ってくることで、いい感じにグレーの下線を隠してくれますよ。

CSS
/* 要素を一番手前に持ってくる */
.c-tabs_item.is-current {
    z-index: 11;
}

/* タブのデザイン設定 */
.c-tabs_item.is-current::before {
    background-color: #004bb1;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.c-tabs_item.is-current span {
    background-color: #fff;
    border: 1px solid #8598a7;
    border-bottom-color: #fff;
    color: #004bb1;
}

使用できないタブ(グレーアウトしてるやつ)

最後に使用できないタブのデザインを設定します。

CSS
.c-tabs_item.is-disabled span {
    background-color: #dbe0e5;
    border: 1px solid #c7cfd8;
    border-bottom-color: #fff;
    color: #5f6368;
}

これで完成です。文字の長さや行数が変わっても大きく崩れることはありません。
HTMLはなるべくシンプルに、CSSはなるべく柔軟性をもたせて書くのが大事です。

このHTMLをもとに、さくっと切り替えができるJSもそのうち書こうと思います。以上です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Chromeで表示したCSSが反映されないときの対処法

Chrome上でWebデザインを調整している時、CSSを変更しても画面に反映されないときの対処法です。

反映させる方法

CSSのキャッシュが悪さをしている場合があります。なのでそのキャッシュを削除すればよいです。
まず画面上で右クリックを検証を押し、検証画面を開きます。その後、右上の回転矢印マークを右クリックして、キャッシュの消去とハードの読み込みを押します。 これでキャッシュが削除され、CSSが新たに適応されます。

cache.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Ruby on Railsでfont awesomeを使う方法

gemfileに追記する

下記をgemfileに追加する。

# font awesome
gem 'font-awesome-rails'
bundle install

application.cssへ追記する

下記をapplication.cssのコメントの中に追記する。

application.css
*= require font-awesome

sassのかたは、普通にコメント外のコードを書くところに下記のように記載。

application.scss
@import "font-awesome";

viewファイルにタグを追加

<i class="fa fa-アイコン名"></i>

参考記事

https://pikawaka.com/rails/font_awesome_rails

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

大学生がVue.jsを使って3日間でポートフォリオを作成してみた

Vue.jsでポートフォリオを作ったのでまとめました。

作ったサイト

https://mk-portfolio-site.netlify.app/

スクリーンショット 2020-06-30 10.35.54.png

スクリーンショット 2020-06-30 10.36.01.png

スクリーンショット 2020-06-30 10.36.10.png

スクリーンショット 2020-06-30 10.36.17.png

動機

今回サイトを作った動機は「自分のポートフォリオサイト持ってるのってなんかかっこいいよなぁ」と思ったからです。ちょうどいいアウトプットにもなりそうだったので作ることにしました。かかった期間は3日間。時間でいうと20時間くらいです。

1日目

サイトの構成を練る

ネット上で他の方が作ったポートフォリオを色々見まくって考えました。
内容は以下の4項目に決めました。他の学生のポートフォリオを見ていると、インターンの開発経験や研究の内容を盛り込んでいる人も結構いましたが、自分は書くことがなかったのでその項目は外しました。悲しい。。。

  1. Top(トップページ)
  2. About(プロフィール)
  3. Skills(使ってきた技術)
  4. Works(制作物)

デザインに関しても色々な方のポートフォリオを参考にしました。色やレイアウトはなるべくシンプルなものを目指しました。

使用技術の選定

基本的なレイアウトやデザインはHTML/CSS、動きをつけたりコンポーネントをまとめる部分でVue.jsを中心に使おうと決めました。Vue.jsを選択した理由は大きく2つ。1つ目の理由は他のライブラリやフレームワーク(ReactやAngularなど)と比べてとっつきやすいから、2つ目は人気そうだから、です(笑)。実際触ってみてかなり使いやすかったのでポートフォリオ作成したい人はVue.jsオススメです!

環境構築 & 大枠の実装

Vue.js を vue-cli を使ってシンプルにはじめてみる という記事を見ながらVue CLIを使ってプロジェクトを作成しました。
サイトの大まかなレイアウトやデザインを実装しました。細かいアニメーションやリンクの対応はまだできていない状態でした。

2日目

おしゃれなライブラリを導入

Vue.jsでポートフォリオを書くという記事に書かれていたvue-typerとsmoothScrollという2つのライブラリを導入しました。サイトに簡単な動作をつけたい人にはオススメです。

hover時の動作

ボタンや画像のhoverに応じた色の変化や表示非表示の切り替えなどの動作をつけていきました。この辺ができてくると動きが出てきて楽しい。

3日目

レスポンシブデザイン

今だとスマホで見る人が圧倒的に多いので、レスポンシブは必須かなと思い導入しました。レイアウトとフォントサイズの調整が主だったので割と簡単でした。1つ大変だったのがハンバーガーメニューです。ヘッダーにサイドバーを表示させるためのハンバーガーメニューを実装しました。Vue.jsのトランジションを取り入れて滑らかなアニメーションが実現できたかなと思います。(よかったらスマホで見てみてください...!)

サイト公開

デプロイはNetlifyを利用しました。GitHubと連携させて自動デプロイができるので超便利です。vue-cliとNetlifyで始めるお手軽サイトホスティングという記事を見れば簡単にホスティングできます。Github Pagesでもいいと思います。

もう少しやりたかったこと

ディレクトリ構成 & 単一ファイルコンポーネント

実際にプロジェクトを作成していく中でディレクトリ構成に悩みました。そこで Vue.js ディレクトリ構成 色々試してみた という記事を参考にModules & Pagesパターンを採用してプロジェクトに反映させようとしました。Modulesに再利用可能なコンポーネント、Pagesに基本的なページ構成を書いていく、という考え方です。Vue.jsには単一ファイルコンポーネントという考え方があります。これは部品の再利用性や可読性を高めるために、レイアウトを部品ごとに分けて実装しようという考え方です。ディレクトリ構成は考えたもののうまくコンポーネントをまとめられなかったので、この辺はもう少し勉強して改善したいところです。

アニメーション

CSSアニメーションやVue.jsのトランジションを絡ませてサイトに動きをつけようとしたのですが、結構大変でした。上の方でも触れているハンバーガーメニューの実装は頑張りましたが、他のアニメーションに関しては今回は諦めました。時間ができたらまた挑戦したいです。

まとめ

思っていたより楽に良さげなサイトを作ることができました。「お手軽にポートフォリオ作ってみたい!」という方はぜひVue.js使ってみてください。では!

参考記事

その他様々なポートフォリオサイトを拝見し、参考にさせていただきました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

大学生がVue.jsでポートフォリオを作成してみた

Vue.jsでポートフォリオを作ったのでまとめました。

作ったサイト

https://mk-portfolio-site.netlify.app/

動機

今回サイトを作った動機は「自分のポートフォリオサイト持ってるのってなんかかっこいいよなぁ」と思ったからです。ちょうどいいアウトプットにもなりそうだったので作ることにしました。かかった期間は3日間。時間でいうと20時間くらいです。

1日目

サイトの構成を練る

ネット上で他の方が作ったポートフォリオを色々見まくって考えました。
内容は以下の4項目に決めました。他の学生のポートフォリオを見ていると、インターンの開発経験や研究の内容を盛り込んでいる人も結構いましたが、自分は書くことがなかったのでその項目は外しました。悲しい。。。

  1. Top(トップページ)
  2. About(プロフィール)
  3. Skills(使ってきた技術)
  4. Works(制作物)

デザインに関しても色々な方のポートフォリオを参考にしました。色やレイアウトはなるべくシンプルなものを目指しました。

使用技術の選定

基本的なレイアウトやデザインはHTML/CSS、動きをつけたりコンポーネントをまとめる部分でVue.jsを中心に使おうと決めました。Vue.jsを選択した理由は大きく2つ。1つ目の理由は他のライブラリやフレームワーク(ReactやAngularなど)と比べてとっつきやすいから、2つ目は人気そうだから、です(笑)。実際触ってみてかなり使いやすかったのでポートフォリオ作成したい人はVue.jsオススメです!

環境構築 & 大枠の実装

Vue.js を vue-cli を使ってシンプルにはじめてみる という記事を見ながらVue CLIを使ってプロジェクトを作成しました。
サイトの大まかなレイアウトやデザインを実装しました。細かいアニメーションやリンクの対応はまだできていない状態でした。

2日目

おしゃれなライブラリを導入

Vue.jsでポートフォリオを書くという記事に書かれていたvue-typerとsmoothScrollという2つのライブラリを導入しました。サイトに簡単な動作をつけたい人にはオススメです。

hover時の動作

ボタンや画像のhoverに応じた色の変化や表示非表示の切り替えなどの動作をつけていきました。この辺ができてくると動きが出てきて楽しい。

3日目

レスポンシブデザイン

今だとスマホで見る人が圧倒的に多いので、レスポンシブは必須かなと思い導入しました。レイアウトとフォントサイズの調整が主だったので割と簡単でした。1つ大変だったのがハンバーガーメニューです。ヘッダーにサイドバーを表示させるためのハンバーガーメニューを実装しました。Vue.jsのトランジションを取り入れて滑らかなアニメーションが実現できたかなと思います。(よかったらスマホで見てみてください...!)

サイト公開

デプロイはNetlifyを利用しました。GitHubと連携させて自動デプロイができるので超便利です。vue-cliとNetlifyで始めるお手軽サイトホスティングという記事を見れば簡単にホスティングできます。Github Pagesでもいいと思います。

もう少しやりたかったこと

ディレクトリ構成 & 単一ファイルコンポーネント

実際にプロジェクトを作成していく中でディレクトリ構成に悩みました。そこで Vue.js ディレクトリ構成 色々試してみた という記事を参考にModules & Pagesパターンを採用してプロジェクトに反映させようとしました。Modulesに再利用可能なコンポーネント、Pagesに基本的なページ構成を書いていく、という考え方です。Vue.jsには単一ファイルコンポーネントという考え方があります。これは部品の再利用性や可読性を高めるために、レイアウトを部品ごとに分けて実装しようという考え方です。ディレクトリ構成は考えたもののうまくコンポーネントをまとめられなかったので、この辺はもう少し勉強して改善したいところです。

アニメーション

CSSアニメーションやVue.jsのトランジションを絡ませてサイトに動きをつけようとしたのですが、結構大変でした。上の方でも触れているハンバーガーメニューの実装は頑張りましたが、他のアニメーションに関しては今回は諦めました。時間ができたらまた挑戦したいです。

まとめ

思っていたより楽に良さげなサイトを作ることができました。「お手軽にポートフォリオ作ってみたい!」という方はぜひVue.js使ってみてください。では!

参考記事

その他様々なポートフォリオサイトを拝見し、参考にさせていただきました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

レスポンシブ対応するための書き方について

レスポンシブ対応とは

タブレット画面やスマホ画面で大きさが違うとき、デバイスによって見やすい表示に自動的に切り替わる仕組みを持つデザインをレスポンシブといいます。

メリット

1 見やすい

現在webサイトはスマートフォンで見られることが遥かに多くなったのではないでしょうか。
その時に文字が切れてしまったりと見づらくなってしまいます。

2 SEOで上位表示される(googleが推奨しているため)

SEO(検索エンジン最適化)とは、検索結果にて狙ったキーワードで自社サイトを上位表示させる対策のことです。

書き方

①Viewポートの設定

<!DOCTYPE html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

この一行を付け加えます。

②メディアクエリの設定 

メディアクエリとは、指定した画面のサイズの時にのみ使われるCSSの要素などを決めるものです。

@media (max-width: px / min-width: px)
{
  適応させるCSS
}

max-widthが最大幅、min-widthが最小幅を表します。
また、パソコンは1001px以上、タブレットは671px~1000px、スマホは670px以下が画面のpxです。
この値をブレイクポイントといいます。

③CSSの変更(%を使う)

%(パーセント)とは、親要素のサイズが100%としたとき子要素のサイズを親要素に対して何%で設定するか?を決められる指定方法です。
レスポンシブの時の要素の値は%で示します。
レスポンシブによって画面のサイズが変わった時、pxのまま値を固定していると画面の大きさに対応しないからです。
初めから意識していないと、後から直すのに苦労します、、(個人アプリの作成で今も苦労しています、、)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[CSS]アスペクト比固定で枠内に画像を収める

画像スライドショーなどで決まった枠内に複数の写真を入れたいが、
アスペクト比がバラバラなので、縦横どちらの最大幅を取れば良いのかと悩んだときに
見つけた方法が、
「なんで気づかなかったのー」「みんな知ってたのー」って感じの方法だったので、共有。

img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-width: 100%;
}

こう指定すると、枠をはみ出した=100%以上になった場合にmax100%で抑えてくれるので、
枠からははみ出すことはありません。
冷静に考えたら、簡単なのですが、気づかなかったので悔しい&嬉しいですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSで要素を中央に配置する

プログラミングの勉強日記

2020年6月30日 Progate Lv.148
ポートフォリオ作成中
縦横方向に中央揃えにする。

目標物

 下の写真のように要素を真ん中に配置したい。横方向で真ん中にするためにはtext-align: center;の方法があるが、今回は親要素に対してど真ん中に配置する。

0630.PNG

コード

 親要素にdisplay:flexjustify-content: centeralign-items: centerを追加する。

align-itemsプロパティ:フレックスアイテムの交差軸方向のアイテムの配置を制御する。
justify-contentプロパティ:フレックスアイテムの主軸の方向の揃え位置を指定する。

HTMLファイル
<div class="parent">
  <div class="children">
    <!-- コード -->
  </div>
</div>
CSSファイル
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む