CSS – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[BlumaCSS] ul liで黒点を表示

			<ul>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
			</ul>

これだけだと、黒点が表示されないので、class=”content”で囲む

			<div class="content">
			<ul>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
				<li><a href="">2021/12/10</a></li>
			</ul>
			</div>

なるほどー

[BlumaCSS] paginationを実装したい

blumaでpaginationを実装したい

			<nav class="pagination is-centered" role="navigation" aria-label="pagination">
				<a class="pagination-previous">Previous</a>
				<a class="pagination-next">Next page</a>
				<ul class="pagination-list">
					<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
					<li><span class="pagination-ellipsis">&hellip;</span></li>
					<li><a class="pagination-link"aria-label="Goto page 3">3</a></li>
					<li><a class="pagination-link is-current" aria-label="Page 4" aria-current="page">4</a></li>
					<li><a class="pagination-link"aria-label="Goto page 5">5</a></li>
					<li><span class="pagination-ellipsis">&hellip;</span></li>
					<li><a class="pagination-link" aria-label="Goto page 7">7</a></li>
				</ul>
			</nav>

CSSを一切書かずに事足りてしまうのが凄い

goでどうやって書くのかわからんが、まあ進みましょう。

HTML内でソースコードをhighlightさせたい

// header
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">

// footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

bluma cssを使っていると、paddingが設定されているので、0で!importantで設定する

pre {
  margin: 0 0; 
  padding: 0 !important; 
  border-radius: 0px; 
  white-space: pre-wrap;
  max-width: 100%;
}

### 使い方
preとcodeで囲う

        <h6 class="has-text-weight-medium">Result</h6>
        <pre><code>{
  "data": {
    "speech": {
      "id": 2,
      "text": "  びっくりしました。\n",
      "time": "2021/11/01 15:04:12"
    }
  }
}
        </code></pre>

highlightの箇所があってませんが、まあそれらしく表示されているのでOKとしましょう。

[CSS] width 100%で縦横比を固定

heightを0にして、padding-topを%で指定する

Sass

.v-box {
	width: 100%;
	height: 0;
	padding-top:75%;
	background-color: gray;
}

html

<div class="columns">
				<div class="column">Ch1<br><div class="v-box"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
				<div class="column">Ch2<br><div class="v-box"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
				<div class="column">Ch3<br><div class="v-box"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
			</div>

なるほど

bluma CSSでヘッダー&メニュー作成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
</head>
<body>
	<div id="app">

	<nav class="navbar" role="navigation" aria-label="main navigation">
  	<div class="navbar-brand">
	    <a class="navbar-item" href="/home" style="font-size:1.5em;font-weight:bold;">
	      <!-- <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> -->
	      Speech Recognition Demo
	    </a>

	    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="">
	      <span aria-hidden="true"></span>
	      <span aria-hidden="true"></span>
	      <span aria-hidden="true"></span>
	    </a>
	</div>

  	<div id="" class="navbar-menu">
    <!-- <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>
      <a class="navbar-item">
        Documentation
      </a>
    </div> -->

	    <div class="navbar-end">
	      <div class="navbar-item">
	      	<div class="navbar-item has-dropdown is-hoverable">
	        <a class="navbar-link">
	          Language
	        </a>

	        <div class="navbar-dropdown">
	          <a class="navbar-item">
	            English
	          </a>
	          <a class="navbar-item">
	            Chinese
	          </a>
	          <a class="navbar-item">
	            Japanase
	          </a>
	        </div>
	      </div>
	        <div class="buttons">
	          <a class="button is-light">
	            Logout
	          </a>
	        </div>
	      </div>
	    </div>
	  </div>
	</nav>

	<section class="main-content columns is-fullheight">
	<aside class="column is-3 is-narrow-mobile is-fullheight section is-hidden-mobile">
    <p class="menu-label is-hidden-touch">MENU</p>
    <ul class="menu-list">
      <li>
        <a href="/home" class="">
          <span class="icon"><i class="fa fa-home"></i></span> Home
        </a>
      </li>
      <li>
        <a href="#" class="">
          <span class="icon"><i class="fa fa-table"></i></span> Channel
        </a>

        <ul>
          <li>
            <a href="#">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Ch1
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Ch2
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Ch3
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="">
          <span class="icon"><i class="fa fa-id-card"></i></span> MyPage
        </a>
      </li>
      <li>
        <a href="#" class="">
          <span class="icon"><i class="fa fa-file-alt"></i></span> Document
        </a>
      </li>
      <li>
        <a href="#" class="">
          <span class="icon"><i class="fa fa-comments"></i></span> Chat room
        </a>
      </li>
    </ul>
  </aside>
	

	<div class="container column is-9">
		<div class="section">
			<div class="card">
				<div class="card-header"><p class="card-header-title">Header</p></div>
				<div class="card-content"><div class="content">Content</div></div>
			</div>
			<br>

			<div class="card">
				<div class="card-header"><p class="card-header-title">Header</p></div>
				<div class="card-content"><div class="content">Content</div></div>
			</div>
			<br>

			<div class="columns">
				<div class="column">Column1</div>
				<div class="column">Column2</div>
				<div class="column">Column3</div>
			</div>
		</div>

	</div>

	</section>
	<footer class="footer is-hidden">
		<div class="container">
			<div class="content has-text-centered">
				<p>Hello</p>
			</div>
		</div>
	</footer>
	</div>
	<script src="bundle.js"></script>
</body>
</html>

うん、いい感じです

bluma CSSでLoginページを作成

<div class="hero is-fullheight is-primary">
		<div class="hero-body">
			<div class="container has-text-centered">
				<div class="column is-8 is-offset-2">
					<h3 class="title has-text-white">Speech Recognition Demo</h3>
					<hr class="login-hr">
					<p class="subtitle has-text-white">Login</p>
					<div class="box">
						<!-- <div class="box">
							<img src="img/login.png">
						</div> -->
						<div class="title has-text-grey is-5">Please enter your email and password.</div>
						<form>
							<div class="field">
								<div class="control">
									<input class="input is-large" type="email" placeholder="Email" autofocus="">
								</div>
							</div>
							<div class="field">
								<div class="control">
									<input class="input is-large" type="password" placeholder="Password">
								</div>
							</div>
							<button class="button is-block is-danger is-large is-fullwidth">Login</button>
						</form>
						<br>
						<p class="has-text-grey">
							<a href="">Sign Up</a> &nbsp;&nbsp;
							<a href="">Forgot Password</a> &nbsp;&nbsp;
							<a href="">Need Help?</a>
						</p>
					</div>
				</div>

			</div>
		</div>
	</div>

bootstrapにはない体験ができますね。

動画背景のHTML・CSSを作る

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hpscript</title>
	<meta name="description" content="Hpscript provides comprehensive software services of full commitment to help you achieve your goals at any stage.">
	<link rel="stylesheet" type="text/css" href="css/video-styles.css">
	<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
	<header id="header">
		<h1>Hpscript</h1>
		<div id="video-area">
			<video id="video" src="audio/video.mp4" webkit-playsinline playsinline muted autoplay loop></video>
		</div>
	</header>
</body>
</html>

@charset "utf-8";

#header {
	position: relative;
	height: 100vh;
}

#video-area {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
}

#video {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.77777778vh;
	height: 56.25vw;
	min-height: 100%;
	min-width: 100%;
}
h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color: #fff;
	text-shadow: 0 0 15px #666;
}
a {
	color: #fff;
}

よっしゃあ、次はreactやな

marguee.jsを使わずCSSで文字を動かす

HTML

<div class="video">
      <div class="narrate">
        <p class="ticker" data-duplicated='false'>The Boston Celtics have signed center Robert Williams III to a contract extension, the team announced today. </p>
      </div>
    </div>

CSS

html {
	height: 100%;
}
body {
	height: 100%;	
}
.video {
	height: 100%;
	background: url(../img/nba.jpg) no-repeat;
	background-size: 80% auto;
	background-position: center;

}
.narrate {
	position: absolute;
	bottom: 10px;	
	overflow:hidden;
}
p {
	display: inline-block;
  	color: #ffffff;
  	font-size: 36pt;
  	letter-spacing: 4px;
  	text-shadow: 
       2px  2px 0px #003366,
      -2px  2px 0px #003366,
       2px -2px 0px #003366,
      -2px -2px 0px #003366,
       2px  0px 0px #003366,
       0px  2px 0px #003366,
      -2px  0px 0px #003366,
       0px -2px 0px #003366; 
	font-size: 15px;
	animation: flowing 15s linear 1;  
	transform:translateX(100%);  
}

@keyframes flowing {
100% {
transform:translateX(-100%); 
}

jQueryのmarquee.jsを使う場合

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="js/marquee.js"></script>
    <script>
       $(function(){
         var $mq = $('p.ticker').marquee();

       });
    </script>

これでもmarqueeの動きはするが、margueeの文字がループ処理されるので、結局CSSを採用することに。
.bind(‘finished’, function(){} と $*.marquee(‘destroy’);で色々書いてみたんだが、どうやってもループになってしまう。

うーん　難しいね

[CSS] 画像を重ねて表示

	<style>
		.good {
			width: 50px;
			height: 50px;
			color: #ffffff;
			background-color: #2779bd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			border-radius: 50%;
			cursor: pointer;
		}
	</style>
	<h1>画像を重ねて表示</h1>
	<img src="img/bridge1.jpg">
	<div class="good">
    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
	</div>

		.sample-box {
			position: relative;
			width: 300px;
		}
		.good {
			width: 50px;
			height: 50px;
			color: #ffffff;
			background-color: #2779bd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			border-radius: 50%;
			cursor: pointer;

			position: absolute;
			top: 85%;
			left: 140%;
		}

position absoluteで、top, leftは%で表示する。

なるほど、これをTシャツでやりたい。

なるほど

[position:fixed;] ヘッダー固定

<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>
	<div class="main">
	<img src="butterfly.jpg">
	<h1>Butterfly</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
</body>

* {
	margin:0; padding:0;
}
.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
	margin-top: 0px;
	position: fixed;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
.main {
	width: 80vw;
	padding-top: 170px;
	margin: 0px auto;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}
ul.footer-menu li {
	display: inline;
}

レポジトリに登録しておこう。