What's New Qiita

20200928のHTMLに関する記事は3件です。

  • 投稿日：2020-09-28T21:54:03+09:00

【初心者でもわかる】簡単！ラベルデザインの作り方

どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。

まずは見本をどうぞ。

mihon.png

このように画像やブロック要素に目立たせる用のラベルデザインをCSSで付けていきます。
運用・使い方のイメージは、特定のクラス名が付いたものだけラベルが付くようにします！

作り方

index.html
<div class="box sale">
    <img src="sample.png" alt="画像名">
</div>
style.css
.box {
  width: 160px;      /* 表示する横幅 */
  height: 160px;     /* 表示する高さ */
  position: relative;/* 基準の位置とする */
}

.box img {
  width: 100%; /* boxの幅いっぱいに画像を表示 */
}

.sale::before {
  content: ""; /* こっちは空 */
  width: 0;    /* 三角形を作るため0 */
  height: 0;   /* 三角形を作るため0 */
  position: absolute;  /* 位置を絶対指定 */
  top: 0;              /* 上から0pxの位置 */
  left: 0;             /* 左から0pxの位置 */
  border: solid 20px #f00; /* 赤色のborderを↓ */
  border-right-color: transparent; /* 左上付けの↓ */
  border-bottom-color: transparent;/* 三角形に見せる */
}

.sale::after {
  content: "sale"; /* 文字を入れる。画像も可 */
  color: #FFF;     /* 文字色を白にする */
  font-size: 14px; /* 文字サイズを決める */
  font-weight: bold; /* 文字を太文字にする */
  position: absolute;/* 位置を絶対指定 */
  top: 2px;        /* 入れる文字や位置によって微調整してください */
  left: 2px;       /* 入れる文字や位置によって微調整してください */
  transform: rotate(-45deg); /* 斜めに文字を回転 */
}

kansei.png

解説

疑似要素を使い、三角形の部分と文字の部分を分けて重ねて表現しています。

::beforeには、borderで三角形を作り、左上寄せに配置します。
そして::afterには入れたい文字をcontentに入れ、今回はtransform: rotate(-45deg)を使って、文字を斜めにしました。

まとめ

beforeとafterにあえて分けたことで、カスタマイズしやすい作り方かなと思います。
いろいろ自由に変えて使ってもらえればうれしいです。

おそまつ！

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-28T16:44:33+09:00

【改訂】Gatsbyでページごとに個別にCSSを読み込む方法

はじめに

HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。

以前、Gatsbyでページごとに個別にCSSを読み込む方法という記事を書きました。
しかし、その後作業を進めていくうちに、こちらの方法では問題を解決できないことがわかりました。
今回は改めて対策方法を検討したので、共有します。

前回の内容

前回はこのような方法でページごとに個別にCSSを読み込むことができると言いました。

    import React from "react"

    export default () => (
           require("style.css")
    )

しかし、この内容でNetlifyにアップロードしたところ、うまくいきませんでした。
個別ページで読み込んだハズのCSSが、全てのページで読み込まれてしまい、上書きされてしまうという現象が再発してしまいました。

Gatsby Develop と Gatsby Serve の違い

原因を調べると、上記の方法は gatsby develop ではうまく動作するものの、
gatsby serve したものではうまく動作していませんでした。
Netlifyにアップロードされるのは gatsby serve の方です。

新・ページごとに個別にCSSを読み込む方法

とういうことで、gatsby serve でもうまくいく方法を紹介します。

  1. 既存のCSSの拡張子.cssを.scssに変更する
  2. ファイルを開き、先頭と末尾をhtml.hoge{}で囲む
hoge.css
        #header{
          background-color:red;
        }
hoge.scss
        html.hoge{
            #header{
               background-color:red;
            }        
        }

3.読み込みたいページ（例：hoge.js）でimportする

hoge.js
        import React from "react"
        import "../css/home.scss"

        export default () => {
             return(

               //ページの処理
               <header id="header">ヘッダー</header>

             )
        }

4.「Helmet」を使ってhtmlタグにhogeというクラス名を付ける

hoge.js
        import React from "react"
        import { Helmet } from "react-helmet"
        import "../css/home.scss"

        export default () => {
             return(
                <div>
                    <Helmet>
                       <html className="hoge"  lang="jp" />
                    </Helmet>

                    //ページの処理
                    <header id="header">ヘッダー</header>

               </div>
             )
        }

以上です。
Helmetの使い方は「Gatsby Helmet」などで調べてみてください。

おわりに

今回のやり方はかなり邪道な方法です。
お気づきかもしれませんが、このやり方はページ毎に個別に読み込んではおらず、
結局全てのCSSを読み込んでしまっています。
単純に、SCSSのネストでセレクタを指定することで、ページごとに適応するものを変えているだけです。
Gatsbyが提唱するサイトの高速化の手法をあえて無視するようなやり方です。

今回はとりあえず、一般的な HTML, CSS, JavaScript で組まれたWEBサイトを
あまり手を加えずにGatsbyにコンバートすることを試してみました。
ですが、その作業がこんなにも大変だとは思いませんでした。

WordPressみたいに、最初は静的ファイルでテストページを作成して、その後CMS化する
という手法はあまり馴染まないのかもしれないですね。

ある程度初期の段階から、Gatsbyで組み上げていったほうが早いかもしれません。
次回は、GatsbyでjQueryを使う方法（邪道）を書きたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-28T12:01:52+09:00

懐かしい？もう使われなくなったHTMLタグたち

私はたまにですが古き良き時代のHP(いい意味で)をみたくなります。
ものすごく色が派手で、チカチカ点滅していたり、無駄に動いたり、いきなり音楽が流れたりなど、ある意味面白い時代だったと思います。
あの頃はあれが一番のアイキャッチだったのかもしれませんね。
そこでそういえばあのタグって今どうなってるんだろうと思って調べたらやっぱりHTML5になって廃止になってるものばかりでした。
最近の人は知らないかもしれないので少しでも古き良き時代の今は使われなくなったHTMLタグを一部ですがご紹介できればなと思いまとめてみました。

<blink> タグ 　- テキストの点滅 -

これは昔はよくありました。
現在も同じように表現するにはCSSのanimationを使えば同じように点滅させることができます。

blink.html
<span class="blink">文字が点滅します</span>
blink.css
.blink {
  animation:blink 0.2s ease-in-out infinite alternate;
}

@keyframes blink {
  0% { opacity: 1.0; }
  100% { opacity: 0; }
}

<marquee> スライドタグ　

これも昔はよくありました。
文字がスライドしてくるタグです。
HTML5ではもちろん廃止されています。
現在同じように文字をスライドさせるにはCSSのmarqueeを使うとできます。

marquee.html
<div class="marquee" >
 <p> 動くテキスト </p>
</div>
marquee.css
.marquee p {
 margin: 0; 
 padding-left: 100vw; 
 display: inline-block; 
 white-space: nowrap;
 animation-name: marquee; 
 animation-timing-function: linear;
 animation-duration: 15s;
 animation-iteration-count: infinite;
}

@keyframes marquee {
 from   { transform: translate(0%); } 
 99%,to { transform: translate(-100%); }
}

<bgsound> タグ　- 音楽再生 -　

BGMを再生するタグです。
IE全盛期のもので、IE独自の仕様だったため使われなくなったようです。
今では<audio>タグで応用することができます。

<strike> タグ　- 打ち消し線 -

打ち消し線
現在残っているタグでいうと<s>や<del>のことです。
ちなみに<s>は訂正のときに使い、<del>は削除のときに使います

<center>　- 中央揃え -

これは文字通り中央揃えするタグです。
装飾するものは基本CSSで記述するということになりましたのでHTML5では廃止されています。
現在でやるするとCSSで text-align: center; 中央揃えができます。

ちなみに

昔ながらのサイトがまだいくつかあったようなのでご紹介します。
※ものすごくチカチカするのでご注意して下さい。

:sunny: 激安　格安　爆安ホームページ制作屋
http://tonys.k-free.net/

:sunny: ナイトウ薬局
http://hm.aitai.ne.jp/~naitonet/

:sunny: 愛の妖精ぷりんてぃん
http://www.takamagahara.com/printin/

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

日付別

タグ一覧