Share Code Quickly

What is Harigami?

Harigami is a simple source code sharing service. You can share source code by an URL which is issued after submission.
You can also run your source code online such as Python, Ruby, JavaScript and so on.
For free.Use for code review.

Enter code which you want to share Select language

Check to hide your code on timeline Preferences

12 3 4 5…330 331

これでcssの外部スタイルシートがあたりません。なぜでしょうか？

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5833778420892403"
     crossorigin="anonymous"></script>
     <link rel="stylesheet" href="style.css">   
</head>
<body>
  <h1 class="ddd">こんにちわです</h1>
</body>
</html>

No title

HTML

<!DOCTYPE html>
<html>
<body style="
    background-image:url('https://pbs.twimg.com/profile_banners/1009939154/1651644315/1500x500');
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    background-position:center;
  "
>

<h1 style="color:#FFF">ねむぐま</h1>

</body>
</html>

No title

PHP

Nvhhri https://newfasttadalafil.com/ - Cialis Propecia Laake <a href=https://newfasttadalafil.com/>Cialis</a> Womspd https://newfasttadalafil.com/ - cialis generic 5mg

No title

Can You Snort Cephalexin 500mg https://newfasttadalafil.com/ - Cialis Xrtmtf Xrwrtr <a href=https://newfasttadalafil.com/>Cialis</a> Discount Generic Provera With Free Shipping Real Cujryz Hydrochlorothiazide Mastercard Discount No Script Needed https://newfasttadalafil.com/ - is generic cialis available

No title

CSS

/*  コモン  */

body {
    overflow-x: hidden;
    font-family: 'Noto Sans JP', 'Montserrat', sans-serif;
    color: #302D2C;
}

/* ヘッダーセクション */

header {
    background-color: #F5F4F8;
    width: 100vw;
    height: 100vh;
    position: relative;
    /* z-index: 0; */
}

.fv-img {
    background-image: url(../images/portfolio_nenga_1c.webp);
    background-size: cover;
    width: 61.5vw;
    height: 73vh;
    position: absolute;
    bottom: 0;
    right: 0;
    /* z-index: 0; */
}

header h1 img {
    width: 72vw;
    position: fixed;
    z-index: 1;
}

/* ドロワー */

#drawer-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    margin: 50px;
    display: flex;
    right: 0;
    top: 0;
    z-index: 100;
}

#drawer-btn span {
    background-color: #302D2C;
    width: 50px;
    height: 4px;
    position: absolute;
    transition: 0.2s;
}

#drawer-btn span:nth-of-type(1) {
    top: 0;
}

#drawer-btn span:nth-of-type(2) {
    top: 18px;
    background-color: #CE1D14;
}

#drawer-btn.open span {
    width: 50px;
    top: 0;
}

#drawer-btn.open span:nth-of-type(1) {
    transform: rotate(225deg);
}

#drawer-btn.open span:nth-of-type(2) {
    transform: rotate(-225deg);
}

/* ナビゲーション */

.gl-navi {
    position: absolute;
    background-color: #f5f4f8d4;
    transition: right 0.5s;
    right: -100%;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-navi li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(3rem, 1.8rem + 6vw, 12rem);
    line-height: clamp(10rem, 3rem + 8vw, 17rem);
    letter-spacing: 1rem;
}

.gl-navi li:hover {
    color: #CE1D14;
    transition: 0.2s;
}

.gl-navi.nav-open {
    right: 0;
}

No title

HTML

    <header>
        <h1><img src="./images/kk_logo.svg" alt="#"></h1>
        <div class="fv-img"></div>
        <div id="drawer-btn">
            <span></span>
            <span></span>
        </div>
        <nav class="gl-navi">
            <ul>
                <li>ABOUT</li>
                <li>SKILLS</li>
                <li>WORKS</li>
                <li>KAKERA</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>

No title

CSS

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

MACD

TypeScript

study(shorttitle = "MACD 4C", title = "4 colour MACD")
fastMA = input(title="Fast moving average", type = integer, defval = 12, minval = 7)
slowMA = input(title="Slow moving average", type = integer, defval = 26, minval = 7)
lastColor = yellow
[currMacd,_,_] = macd(close[0], fastMA, slowMA, 9)
[prevMacd,_,_] = macd(close[1], fastMA, slowMA, 9)
plotColor = currMacd > 0 
    ? currMacd > prevMacd ? lime : green 
    : currMacd < prevMacd ? maroon : red
plot(currMacd, style = histogram, color = plotColor, linewidth = 3)
plot(0, title = "Zero line", linewidth = 1, color = gray)

PDFからテキスト出力してcsv化

Python

# ファイル名　print_pdf_textboxes_csv.py
import sys
import csv
import os

from pdfminer.converter import PDFPageAggregator
from pdfminer.layout import LAParams, LTContainer, LTTextBox
from pdfminer.pdfinterp import PDFPageInterpreter, PDFResourceManager
from pdfminer.pdfpage import PDFPage

’’’
python print_pdf_textboxes_csv.py [pdfのパス]のようにコマンドプロンプトから実行する
’’’

# 再帰的にテキストボックス（LTTextBox）を探して、テキストボックスのリストを取得する
def find_textboxes_recursively(layout_obj):

    # LTTextBoxを継承するオブジェクトの場合は1要素のリストを返す
    if isinstance(layout_obj, LTTextBox):
        return [layout_obj]

    # LTContainerを継承するオブジェクトは子要素を含むので、再帰的に探す
    if isinstance(layout_obj, LTContainer):
        boxes = []
        for child in layout_obj:
            boxes.extend(find_textboxes_recursively(child))

        return boxes

    # その他の場合は空リストを返す
    return []


# Layout Analysisのパラメーターを設定縦書きの検出を有効にする
laparams = LAParams(detect_vertical=True)

# 共有のリソースを管理するリソースマネージャーを作成
resource_manager = PDFResourceManager()

# ページを集めるPageAggregatorオブジェクトを作成
device = PDFPageAggregator(resource_manager, laparams=laparams)

# Interpreterオブジェクトを作成
interpreter = PDFPageInterpreter(resource_manager, device)

csv_data = []

if len(sys.argv) == 1:
  print('パスを指定してください')
else:
  # 本来、パラメータがファイルパスであるかとか存在確認とかしないといけないが割愛
  pdfpath = sys.argv[1]
  base = os.path.splitext(pdfpath)[0]
  newpath = base + ".csv"

  # ファイルをバイナリ形式で開く
  with open(pdfpath, "rb") as f:

      # PDFPage.get_pages()にファイルオブジェクトを指定して、PDFPageオブジェクトを順に取得する
      # 時間がかかるファイルは、キーワード引数pagenosで処理するページ番号（0始まり）のリストを指定するとよい
      for i, page in enumerate(PDFPage.get_pages(f), start=1):

          # ページを処理する
          interpreter.process_page(page)

          # LTPageオブジェクトを取得
          layout = device.get_result()

          # ページ内のテキストボックスのリストを取得する
          boxes = find_textboxes_recursively(layout)

          # テキストボックスの左上の座標の順でテキストボックスをソートする
          # y1（Y座標の値）は上に行くほど大きくなるので、正負を反転させている
          boxes.sort(key=lambda b: (-b.y1, b.x0))

          for box in boxes:
              # ページ数、X座標、Y座標、テキスト
              csv_data.append([i, box.x0, box.y1, box.get_text().strip()])

  # 文字コードがUTF-8 With BOMだと、エクセルで開いたときに文字化けしません
  # テキストで開くと文字化けする・・・
  # BOM(byte order mark) Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのこと
  # encoding="utf_8_sig"とすることでBOM付きのUTF-8でCSVファイルを書き出すことが出来る
  with open(newpath, "wt", encoding="utf_8_sig") as fw:
      writer = csv.writer(fw, lineterminator="\n")
      writer.writerows(csv_data)

hoverで回転

CSS

<!DOCTYPE html>
/* 回転軸からずれてるように見えます。何故？ */
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>hoverで回転</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      .rotate_test {
        transform: rotateX(0deg); /* 軸を基準点に回転する */
      }
      .rotate_test:hover {
        transform: rotateX(180deg); /* 軸を基準点に回転する */
      }
      .rotate_test , .rotate_test:hover {
        transition: transform 1s linear;
        transform-origin:10 0;
        display:inline-block;
      }      
    </style>
  </head>
  <body>
    <div class="rotate_test">
      <span>
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="200" height="200" fill="aqua"/>
        <line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(0,0,0);stroke-width:1"></line>
        <line x1="100" y1="200" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"></line>
      </svg>
      </span>
    </div>
  </body>
</html>

12 3 4 5…330 331