Sticky Footer作ってみる

・メインのコンテンツにflex-grow:1を指定することでコンテンツが足りなくても最大高さまで伸びる

.parent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: white;
}

header {
    flex-shrink: 0;
    height: 50px;
    background-color: #EF9912;
}

main {
    flex-grow: 1;
    background-color: #482D1C;
}

footer {
    flex-shrink: 0;
    height: 50px;
    background-color: #5E9C3B;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <header>header</header>
                <main>
                    main
                </main>
                <footer>footer</footer>
            </div>
        </>
    )
}

結果

Web制作をしているなかで、こんな風に連番をつけたいときってないですか？

よく採用の流れ・業務の流れ等ででてくるかなと思います。
いままでは、普通にhtmlやcssに直接数字を書いていたんですが、CSSに便利なものがありました。

counter-incrementの使い方

今回使うcssのプロパティはcounter-incrementと言うものです。
まずは、htmlを準備します。今回は、リストを作成するのでulタグliタグを使用します

index.html

  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>

次に、連番をつけるために必要なCSSプロパティを付与します。

style.scss

ul{
  list-style: none;
  li{
    counter-increment: test;
    &::before{
      content: counter(test);
    }
  }
}

counter-increment:testは連番表示をさせるための繰り返しの要素にcontent:counter(test)は連番表示をさせたい要素のbefore要素に。
ここまででどのように表示されるかをみてみます。

See the Pen counter-increment練習1 by TakahiroOkada (@okalog) on CodePen.

では、さらにみやすくCSSを当てていきます。

See the Pen counter-increment完成 by TakahiroOkada (@okalog) on CodePen.

このように、数字を直接書かなくても連番表記ができるようになりました。
一桁の数字指定ぐらいであればめんどくさくないかもしれませんが、ちょっと便利なCSSですね。
わたしも、案件で使おうとしたんですが、結局画像でいいよーって話になったので使用はしませんでしが、覚えておくとどっかで役に立つかもしれません。

サイドバーレイアウト作ってみる

.parent {
    display: flex;
    height: 100vh;
    color: white;
}

aside {
    width: 30%;
    background-color: #2A66DB;
}

main {
    background-color: #322B29;
    flex: 1;
    overflow: scroll;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <aside>aside</aside>
                <main>main aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</main>
            </div>
        </>
    )
}

結果

高さが均等になるように要素を並べる。

・flex: 1を使うことで各要素の高さが均等になる

.parent {
    display: flex;
    justify-content: center;
}

.item {
    display: flex;
    flex-direction: column;
    background-color: cadetblue;
    margin: 0 8px;
    padding: 8px;
}

.item p {
    flex: 1;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaa<br />aaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaa<br />aaaaaaaa<br />aaaaaaaaaaa</p>
                    <button>button</button>
                </div>
                <div className="item">
                    <p>aaaaaaaaaaaaaaaaa</p>
                    <button>button</button>
                </div>
            </div>
        </>
    )
}

結果

聖杯レイアウト作成してみる

.container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

nav {
    height: 50px;
    background-color: gray;
    text-align: center;
    vertical-align: middle;
}

main {
    display: flex;
    flex-direction: row;
    flex: 1
}

.bottom {
    height: 100px;
    background-color: wheat;
    text-align: center;
}


.left {
    width: 300px;
    background-color: coral;
}

.middle {
    flex: 1
}

.right {
    width: 300px;
    background-color: teal;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="container">
                <nav>navigation</nav>
                <main>
                    <div className="left">left</div>
                    <div className="middle">middle</div>
                    <div className="right">right</div>
                </main>
                <div className="bottom">bottom</div>
            </div>
        </>
    )
}

結果

はいどうも！
某プログラミングスクールに通い始めた37歳のおっさんです。
プログラミングは完全に未経験。
そんなおっさんが転職するまでの軌跡（奇跡？）をぼちぼち綴っていこうと思います。

先日、中間試験なるものを受けてみたところなんと、44点という結果・・・
学生時代に受けたテストでもこんな点数は取った記憶がなかった。
問題文を見ても何を求められているかわからないし、そもそもコードを読んでてもわからない部分が多すぎて理解ができない。
あれ？これってもしかして記憶力がだいぶ悪くなってる？
そう、気付き始めてしまったのです。
同期の人々よりも時間をかけて自分なりにわかる説明をしてくれる記述を手繰り寄せてなんとか消化する。
google先輩の力でなんとかやってきました。
自分がスペックとして他人に勝てるのは①「情熱」と②「モチベーション」この二つだと思ってます。
①他人が休んでる時にしっかり学習して
②他人が学習しているときに倍の密度で学習する
①も②も関係ないやないかーい！
というツッコミはおいておいて。

実際勝てる方法はこれしかないと思ってます。
そして、後がない。
同年代は役職に就いて、レベルアップした内容の仕事をして、家も買ってetc
人生というストーリーで見たらきっといい結末が待っているんじゃないかなと思える内容を歩んでいるわけです。
年齢という取り返せない条件で負けている以上、自分に何か付加価値がないと同じスタートラインに立った時にかなり後ろからスタートしなければいけないわけです。
人よりできないぶん、時間をかける
人より遅いぶん、密度を濃くする
この二つで対応していくのが絶対条件なんじゃないかなと思っています。
そりゃあ負けたら悔しいですよ。
だけど悔しがったってしょうがない。
もう結果として出てしまっているんだから受け止めるしかない。
考えなければいけないのは、じゃあこれからどうするか？っていうところだと思います。
負けた→もういいや→向いてなかった！goodbye！
この流れは簡単です。誰でもできる。
ここから反発してどれだけできるかだと思うんですよね。

「諦めたらそこで試合終了ですよ」
有名なバスケットボールの監督が言ってましたね(ちょうど世代)
この言葉を胸に胸に刻んで明日からも頑張ります。

ちなみに
「〜していきます」って希望的欲求感に聞こえませんか？
「〜します」って言い切ると決断なんだなって聞こえますよね。
決断すると自分がその目標に向かって行くんですよ。
○○ザップのコミットメント、と同じですよね。
言ったからにはやらなきゃいけない。
良い意味で自分を追い込んで頑張る。
その背中が他の人に勇気を与えられたらいいなって思います。

三回目に受けた試験でようやく突破したおっさんより
それではでは

n番目の子要素の色を変える。

・nth-child(?)を使う
・nthは1th,2th,...からくるnth

.item {
    background-color: white;
    margin: 10px;
}

.item:nth-child(even) {
    background-color: gray;
}

export const Hoge = () => {
    return (
        <>
            <ul>
                <li className="item">aaaa</li>
                <li className="item">aaaa</li>
                <li className="item">aaaa</li>
                <li className="item">aaaa</li>
            </ul>
        </>
    )
}

結果

この画像のところなのですが、tableの部分がtext-align: center;としても反映されません。
試したこと、margin: auto; text-align: center;

一通りすべてのクラスタにmarginとtext-alignを指定したのですができませんでした。
僕の書いたコードは下の画像です。
勉強初めて10日ほどなのおそらくめちゃくちゃなコードだと思うのですが
どこをなおしたらいいのかわかりません。

インラインスタイルシートにも書いてみたりしたのですができませんでした。
どなたか教えていただかると嬉しいです。
よろしくお願いします。

jQueryでスマホ用メニューをクリックした際にメニュー以外の領域をクリックした際にメニューを閉じるようにしたい。

このサイトで✕ボタンでしかメニューが閉じないのは不便。

メニュー以外をクリックした際にこんな感じで閉じたい。

実装

今回のサイトはWordPressで作っていたため、テーマにのっとってコードを追記する必要があります。

そこで、devモードでコードを見ると、ハンバーガーメニューをクリックするとmenu-toggleクラスにactiveクラスが付与されるようにしていて、activeクラスがある場合はメニューがひらっきぱなしになるように組まれていました。

//メニューが閉じてるとき
<div class="menu-toggle">

//メニューを開いてるとき
<div class="menu-toggle active">

というわけで、メニュー外をクリックしたら、menu-toggleの部分からactiveを取り除くコードを記載すればOKです。

  jQuery(document).ready(function($) {
    var nav = $('.menu-toggle');
    $('.main-section').click(function() {
     //ここでnavの部分がactiveクラスを持っているか確認
      if(nav.hasClass('active')) {
        $('.menu-toggle').removeClass('active');
      }
    });
  });

jQuery(document).ready(function($)としているのは、サイトのHTMLを完全に読み込んでからこのjQueryを実行させたいからです。

WordPressは強力なCMSですが、わずかな調整によりWebサイトにアクセスできなくなる場合があります。ただし、WordPressの問題の解決策を見つけるのは非常に簡単です。WordPressユーザーが直面する最も一般的な問題のいくつかあります。例えば内部サーバーエラーまたはデータベース接続の確立エラーなどです。そして、ほとんどのWordPressユーザーがいつか直面するもう1つの一般的な問題は、WordPressの投稿が404エラーを返すことです。この記事では、404エラーを返すWordPressの投稿を修正する方法を紹介します。

---

通常、ユーザーはブログのメインページであるWordPress管理エリアにアクセスできますが、単一の投稿にアクセスすると、404 Notfoundエラーが発生する場合があります。そういった場合でもほとんどの場合、慌てる必要はありません。そういった時の原因は主に２つです。

①htaccessファイルが削除された
②書き換えルールに問題が発生した

そこで行うべきアクションはパーマリンク設定を修正することです

「設定」⇨「パーマリンク」に移動し、「設定を保存」をする。ただこれだけ。

これにより、パーマリンク設定が更新され、書き換えルールがフラッシュされます。ほとんどの場合、このソリューションはWordPressの投稿404エラーを修正します。ただし、それが機能しない場合は、.htaccessファイルを手動で更新する必要があります。

FTPを使用してサーバーにログインし、/ wp-content /や/ wp-includes /などのフォルダーと同じ場所にある.htaccessファイルを変更します。最も簡単な方法は、アクセス許可を666に変更して、ファイルを一時的に書き込み可能にすることです。次に、元の解決策を繰り返します。権限を660に戻すことを忘れないでください。次のコードを.htaccessファイルに手動で追加することもできます。

BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

ローカルサーバーの修正

多くの場合、デザイナーや開発者は、テスト目的でローカルサーバーを使用してコンピューターにWordPressをインストールします。綺麗なパーマリンクを使用したい場合は、MAMP、WAMP、またはXXAMPのApache構成でrewrite_moduleを有効にする必要があります。

以上が404エラーに対しての処理になります。もしよろしかったらコメント待っています。

GoogleDriveの画像リンクをimgタグに貼り付けて、web上で表示させる方法！！！

①画像の共有を『リンクを知っている人全員にする。』

②画像リンクを取得する。
　　『画像を右クリック->画像リンクを取得する』

③コピーした画像リンクを加工する

加工前
https://drive.google.com/file/d/画像により異なる文字列/view?usp=sharing
↓
加工後
https://drive.google.com/uc?export=view&id=画像により異なる文字列


uc?export=view&id=　　　これを追加するだけ！

これでweb上でGoogleDriveの画像が表示される。

リンクの先頭はhttpsでもhttpでも可能だけど、個人的には警告出ないhttps推奨。

完成形

今回は下記のような立体感のあるボタンを作成します！

HTMLで<button></button>タグを追加しボタンを作成する

index.html

    <!-- CSSでスタイルを設定するためclass="btn"を追加しておく -->
    <button class="btn">ボタン</button> 

下記のようなボタンが作成されます

CSSでボタンにスタイルを追加する

style.css

.btn {
    border-radius: 2px; 
    padding: 15px 40px;
    background-color: #60daf0;
    cursor: pointer;
    box-shadow: 0 4px #2693b4;
    border: none;
    outline: none;
}

すると下記のようなボタンが作成できます！

ボタンを押下した際の動きをつける

先ほどの手順ではボタン自体は作成できましたが、押下した際の動きはまだありません。
「active」ディレクティブで押下している間適用されるスタイルを追加しましょう！

style.css

.btn {
    border-radius: 2px; 
    padding: 15px 40px;
    background-color: #60daf0;
    cursor: pointer;
    box-shadow: 0 4px #2693b4;
    border: none;
    outline: none;
}

/* ボタンを押下している間のスタイルを追加 */
.btn:active {
    box-shadow: none;
    position: relative;
    top: 4px;
}

★Point　ボタンを押下した際にボタンの位置を下げる

①box-shadowの2番目に指定している「4px」で影の高さを指定
②押下時は4px位置を下げるというスタイルを適用することで、押下時の立体感を出すことが可能
　※「position: relative;」とセットで適用してください。

style.css

.btn {
    border-radius: 2px; 
    padding: 15px 40px;
    background-color: #60daf0;
    cursor: pointer;
    box-shadow: 0 4px #2693b4; /* ①2番目に指定している4pxで影の高さを指定 */
    border: none;
    outline: none;
}

.btn:active {
    box-shadow: none;
    position: relative; /* position: relative;とセットで適用してください。 */
    top: 4px; /* ②押下時は4px位置を下げるというスタイルを適用することで押下時の立体感を出すことが可能*/
}

色の変化や、影の高さをアレンジするなど使い道がありそうです！

網掛けのborderを使う

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sample {
    border: 2px dashed #5b8bd0;
    width: 350px;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="parent">
                <div className="sample">
                    <ul>
                        <li>ああああああああああ</li>
                        <li>ああああああああああ</li>
                        <li>ああああああああああ</li>
                        <li>ああああああああああ</li>
                    </ul>
                </div>
            </div>
        </>
    )
}

結果

ヘッダーを追従させるcss

・position: fixedを使って位置を固定する
・ヘッダーの後ろに他の要素が回り込まないようにbodyにヘッダーの高さだけmarginを入れる

body {
  margin: 50px 0 0 0;
}

.header {
    background-color: coral;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
}

.dummy {
    width: 250px;
    height: 250px;
    margin-bottom: 30px;
    background-color: wheat;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="header">
            </div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
        </>
    )
}

結果

・transform: rotate(1turn);というアニメーションを使うと要素が1回転する

.parent {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.anim {
    background-color: aqua;
    width: 100px;
    height: 100px;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

import React from 'react'
import './AnimPage.css'

export const AnimPage = () => {
    return (
        <>
            <div className="parent">
                <div className="anim"></div>
            </div>
        </>
    )
}

結果

flex-direction: column を使ってみる

↓これと同じものを作ってみる

https://atom.io/

とりあえず要素を並べる

.parent {
    flex-direction: column;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <ul className="parent">
                <li>ATOM</li>
                <li>1.53.0</li>
                <li>macOS</li>
                <a href="">Download</a>
            </ul>
        </>
    )
}

形を整える

.parent {
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid #4e4b4d;
    list-style: none;
    display: inline-flex;
    padding: 0;
    text-align: center;
    color: #efdab9;
}

.item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em;

}

.item a {
    text-decoration: none;
    color: #efdab9;
}

.parent li+li {
    border-top: 1px solid #4e4b4d;
}

body {
    background-color: #343233;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <ul className="parent">
                <li className="item">ATOM</li>
                <li className="item">1.53.0</li>
                <li className="item">macOS</li>
                <li className="item"><a href="">download</a></li>
            </ul>
        </>
    )
}

どうも7noteです。タップしたら電話がかけられるようにする方法。PCは反応させないようにします。

ヘッダーやフッターなどに電話番号を掲載した際に、タップで電話をかけられるようにする方法です。
お問い合わせ窓口のページなどにも使いますね。

実はけっこう簡単に実装することができるのですが、対策をしないとPCから見たときにも反応してしまうので、その対策方法も合わせて実装します。

ソース

index.html

<a href="tel:00012345678">000-1234-5678</a>   <!-- href属性に「tel:」と「電話番号」を記載する。 -->

style.css

/* 750px以上の幅（PC等）がある時だけ */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;  /* カーソルイベントを無効 */
  }
}

解説

aタグのhref属性に、「tel:」と「電話番号」を書くことで動作します。
必ずaタグでなければいけない事と、番号の前に「tel:」をつける必要性があります。
「tel:」の後の電話番号はハイフン(-)ありでもなしでも動作するので好きな方が使えます。

スマホのみ対応にする方法

style.cssに書いているようにaタグのhref属性が「tel:」から始まるものは、pointer-events: none;で無効にすることができます。
@media screen and (min-width: 768px)の指定でPCにだけこれを無効にすることで、スマホからタップした時にだけ反応するようにできる仕組みです。

おまけ（国際電話の場合）

<a href="tel:+81-90-0000-0000">090-0000-0000</a>

国コードの入力が必要！！

参考：https://webliker.info/65145/

まとめ

簡単に実装できますし、aタグなのでテキストだけでなくボタンのようなデザインを作って「お電話はこちら！」というようなボタンにすることも可能です。
PCの時に誤ってクリックできてしまうと、無駄なアラートがでるのでしっかりと無効化の処理も忘れずに入れること！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ