1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

初心忘れるべからずということです。

Last updated at Posted at 2021-11-04

試したことを記録。

以下記事にて実装
投稿日:2021/11/04
「何食べたい?」に対して「なんでもいい」以外の言葉、探してみませんか?
カラーコード
WEB色見本 原色大辞典 - HTMLカラーコード

#Web上の画面再読み込み
Web上で再読み込みボタンを作る
HTMLとCSSの記述のみで実装可能

参考
See-SS

HTML
``a href=""``の``""``は「再読み込み」を行う指示 ``a href=""``を``"#"``にすると「ページ上部へ戻る」の指示になる やりたいことによって記述が変わるので注意。
    <a href="" class="button-19">他の料理も見たい場合は押してください</a>
CSS
.button-19 {
  position: relative;
  padding: 0.5em 1.6em;
  font-size: 0.8em;
  color: #8b4513;
  text-decoration: none;
  user-select: none;
  border-top: 1px #8b4513 solid;
  border-bottom: 1px #8b4513 solid;
  transition: 0.3s;
}

.button-19:hover {
  opacity: 0.5;
}

.button-19::after,
.button-19::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #8b4513;
}

.button-19::after {
  top: 2px;
}

.button-19::before {
  bottom: 2px;
}

#背景グラデーション
CSSの記述のみで実装可能
ごめんなさい。参考元がわからなくなってしまいました・・・

CSS
/*背景グラデーション*/
body {
  overflow: visible !important;
  background: -webkit-linear-gradient(45deg, #fffacd 10%, #ffa500 90%);
  background: -moz-linear-gradient(45deg, #fffacd 10%, #ffa500 90%);
  background: -ms-linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
  background: -o-linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
  background: linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
 }

#気になるサイト
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
CSSで表現する背景パターン51種+【コピペで簡単!/アニメーション有】
コピペでできるCSSボタンプロデザインをコピペで実装! 【 グラデーション・カラフル系 】
【CSS】使える背景パターン、実装サンプル25選(コピペで簡単です)
CSSで見出しをデザイン!コピペできるおしゃれな見出しデザインまとめ
かわいい系デザインに使えるCSSいろいろ

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?