投稿者: ume

  • [Excel]ワークシート名を取得

     ウェブやモバイルのエクセルでは CELL関数 がサポートされていないそうです

    ワークシート名を取得する関数

     Excelのワークシート名をセルに表示するためにCELL関数を使います。CELL関数の戻り値にはファイルパスとワークシート名を含むため、ワークシート名を抽出する必要があります

    =CELL("filename")
     または
    =CELL("filename",A1)
    
     ↓
    "https://・・・/一部のフォルダ名/[ファイル名.xls]シート名"

     上の式にある『A1』は範囲を表します。現在のワークシートのA1セルという意味です。A2でもB1でもOKです。現在のワークシートのどこかを指していれば何でもOKです
     範囲を省略することもできますが、別のワークシートで同じ式が使われると、こちらの計算結果も別のワークシートのものと同じになるそうです。きっとキャッシュが絡んだ問題なのでしょう

    現在の Excel ファイルの名前、パス名、またはワークシート名をセルに挿入する - Microsoft

    CELL 関数 - Microsoft

    文字列からワークシート名を抽出

     CELL(“filename”)の戻り値に含まれる最後の角括弧(])より右側がワークシート名になります

    簡易に最初の角括弧より右側をとる式はこちら
    =LET(FN,CELL("FILENAME",A1),MID(FN,FIND("]",FN)+1,LEN(FN)))
    
    きちんと最後の角括弧より右側をとる式はこちら
    =LET(FN,CELL("FILENAME",A1),IF(ISERROR(FIND("]",FN)),"",MID(FN,FIND(決して使われない記号,SUBSTITUTE(FN,"]",決して使われない記号,LEN(FN)-LEN(SUBSTITUTE(FN,"]",""))))+1,LEN(FN))))
     ※注:「決して使われない記号」はパスやワークシート名に含まれない1文字

     きちんと最後の角括弧より右側をとる式はとても長いです。何をしているか説明します

    1. CELL(“FILENAME”,A1)」で、ワークシート名を含む値を取得して値の名前をFNにします
    2. IF(ISERROR(FIND(“]”,FN)),””,」で、FN値に角括弧が含まれていないときはブランクを返して終わります
    3. LEN(FN)-LEN(SUBSTITUTE(FN,”]”,””))」で、角括弧の数を調べます。角括弧をすべて取り除いたFN値の長さと、元のFN値の長さを比べることで、角括弧の数を調べています
    4. SUBSTITUTE(FN,”]”,決して使われない記号,角括弧の数)」で、一番最後の角括弧を決して使われない記号に置き換えます
    5. FIND(決して使われない記号,一番最後の角括弧を決して使われない記号に置換したFN値)」で、一番最後の角括弧の位置を特定します
    6. MID(FN,一番最後の角括弧の位置+1,LEN(FN))」で、一番最後の角括弧よりも右側を取得します

    感想

     こういった関数型の言語は「ローコード」とか言われて簡単に使えそうな雰囲気を醸し出すのに成功しています。でもこのように長いコードになると「読めない・理解できない」です。

  • [Excel]年齢の計算

    [Excel]年齢の計算

     年齢に関しては『年齢のとなえ方に関する法律』『年齢計算ニ関スル法律』と『民法 第百四十三条』に記載があります。
     生まれた日が0歳になりますので、次の誕生日は1歳になります。
     そして生まれた時刻は関係ありません。日付がかわる深夜00:00から誕生日が始まります。

     これらの法律の条文を読んでいる限りではわからなかったのですが、『年齢の計算に関する質問主意書 平成十四年七月二十五日』の1項には「法律上の満年齢計算では誕生日の前日に年齢を加算する」と記載があります。つまり4月1日生まれのひとは3月31日に年をとることになります。

     これを踏まえて、年齢を求めるエクセルの計算式は次のようになりました。

    =DATEDIF(誕生日-1,TODAY(),"Y")
     または
    =DATEDIF(DATE(誕生日の年,誕生日の月,誕生日の日)-1,TODAY(),"Y")
    日付に整数を加減算することの意味

     日時値の整数部分は日付を表し、小数部分は時刻を表します。例えば日時値から1を差し引くと前日になります。

  • [Windows]コマンドと同じ名前のbatを作らないこと

     Windowsでbatファイルをつくるとき、最も気を付けなければならないのはファイル名でしょう。
     ファイルの検索はカレントディレクトリが最優先されるため、命令を実行したつもりがバッチを実行してしまって???となることがあります。

  • [Linux]lsで取得したファイル一覧をTSV形式に変換して表計算ソフトに取り込みました

    [Linux]lsで取得したファイル一覧をTSV形式に変換して表計算ソフトに取り込みました

     lsコマンドでファイルの一覧を取得できますが、表計算ソフトに貼り付けられるようなテーブルではありません。使い勝手を良くするためにCSVまたはTSV形式のファイルに変換してみましょう。

     lsコマンドの結果は次のような規則があります。
     「/」で始まる行はディレクトリをあらわします。ここからディレクトリの情報が表示されるという意味です。
     「-(ハイフン)」で始まる行はファイルです。

     では、ノーツ(開発プラットホーム)のアクションボタンでCSVやTSVに変換するプログラムをコーディングしてみましょう。
     ※最初はC#で変換しようとしましたが、ノーツの手軽さに負けました。

     次は、Windows OS のドキュメントフォルダの source.txt ファイルを読み込んで result.tsv を作成するプログラムになります。コーディングの手間を減らすためにファイル名を固定にしています。

    Option Declare
    
    Const SOURCE_FILE = {source.txt}
    Const CHAR_SET = {UTF-8}
    Const RESULT_FILE = {result.tsv}
    Const PathPartition0 = {/}   ' 初期値
    Const PathPartition1 = {\}   ' 選択値
    
    Sub Click(Source As Button)
    	Dim RESULT_SEPARATOR As String
    	RESULT_SEPARATOR = Chr (9)
    	
    	Dim sourcefolder As String
    	Dim pathpartition As String
    	Dim sourcefilepath, resultfilepath As String
    	Dim scriptshell As Variant
    	Dim sourcefile, resultfile As Integer
    	
    	On Error Resume Next
    	Set scriptshell = CreateObject ({WScript.Shell})
    	sourcefolder = scriptshell.SpecialFolders ({MyDocuments})
    	On Error Goto 0
    	If 0 = Len (sourcefolder) Then
    		Print {MyDocuments フォルダが不明}
    		Exit Sub
    	End If
    	pathpartition = PathPartition0
    	If 0 < Instr (1, sourcefolder, PathPartition1) Then
    		pathpartition = PathPartition1
    	End If
    	sourcefilepath = sourcefolder + pathpartition + SOURCE_FILE
    	
    	
    	sourcefile = Freefile ()
    	Err = 0
    	On Error Resume Next
    	Open sourcefilepath For Input As sourcefile Charset = CHAR_SET
    	On Error Goto 0
    	If 0 < Err Then
    		Print {ファイルが見つかりません : } + sourcefilepath
    		Exit Sub
    	End If
    	resultfile = Freefile ()
    	resultfilepath = sourcefolder + pathpartition + RESULT_FILE
    	On Error Resume Next
    	Open resultfilepath For Output As resultfile
    	On Error Goto 0
    	If 0 < Err Then
    		Print {ファイルを作成できません : } + resultfilepath
    		Close sourcefile
    		Exit Sub
    	End If
    	
    	Dim sourceline, currentdirectory As String
    	currentdirectory = {}
    	Do Until True = Eof (sourcefile)
    		Line Input #sourcefile, sourceline
    		Select Case Left (sourceline, 1)
    		Case {/}
    			Select Case Right (sourceline, 1)
    			Case {:}
    				currentdirectory = Left (sourceline, Len (sourceline) -1)
    			End Select
    		Case {-}
    			Dim columns (1) As String
    			Dim position, beforeposition, column As Long
    			columns (0) = currentdirectory
    			beforeposition = -1
    			column = 1
    			For position = 1 To Len (sourceline)
    				Select Case Mid (sourceline, position, 1)
    				Case { }
    					If (beforeposition + 1) <> position Then
    						column = column + 1
    					End If
    					beforeposition = position
    				Case Else
    					If (beforeposition + 1) = position Then
    						If 8 = column Then
    							columns (1) = Mid (sourceline, position)
    							Exit For
    						End If
    					End If
    				End Select
    			Next
    			Print #resultfile, Implode (columns, RESULT_SEPARATOR)
    		End Select
    	Loop
    	Close resultfile
    	Close sourcefile
    End Sub

      表計算ソフトを開いて、メニューの[開く]から result.tsv を選択して、区切文字をタブに指定して読み込めば完了です。
     ls で / 以下すべてを取得しているとき、result.tsv の中身を表計算ソフトへコピペするとメモリ不足エラーが表示されることがあるため注意です。

  • [Windows]古いファイルをまとめて削除

     コンピューターのファイルには、動作記録(ログ)や破棄されなかった一時ファイル(ワーク)が含まれます。長く動いているコンピューターにはこれら多くのファイルが残ります。ほおっておくと記憶領域(ハードディスク)の多くを占めるようになるかもしれません。
     更新日時が古いものを削除するには、次のようなWindowsバッチ(*.bat)をつくって動かします。毎月とか毎年など定期的に動かせば安心ですね!

    forfiles /P "パス" /S /D -猶予日数 /C "cmd /C if false==@isdir (echo delete @file @fdate @ftime @fsize byte & del @path)"
    rem 『パス』の末尾は¥マークで終わらないこと!
    rem 『猶予日数』は0から32768の範囲で指定します

    forfiles | Microsoft Docs

  • [Ubuntu]別名を設定

    はじめに

     例えばLaravelで使う[sail]ですが、フルパスを付けると[/home/○/○○/vendor/bin/sail]となります。毎回使うことを考えると、もっと短くしたいと考えるでしょう。
     ※○や○○には環境によって異なる値が設定されます。

    フルパスを調べる

     今どこにいるのか、カレントディレクトリを調べましょう。Ubuntuで次の命令を入れます。

    pwd

     うまく /home/○/○○/vendor/bin/sail の○部分を調べることができたでしょうか?

     次にUbuntuの設定ファイルに追記します。Ubuntuで次の命令を入れて、テキストエディターを起動します。

    vi ~/.profile

     コンソールにファイル内容が表示されたとおもいます。
    キーボードで「i」キーを押して、挿入モードにします。カーソルはファイルの先頭位置にあるとおもいます。その位置で次の行を挿入します。[○]部分は、先に調べたパスで置換してください。

    alias sail='[ -f sail ] && bash sail || bash /home/○/○○/vendor/bin/sail'

     次に[Enter]キーを押して改行します。そして[ESC]キーを押して挿入モードを終えます。
    ファイルを保存して閉じるために次の命令を入力して[Enter]キーを押します。

    :wq

     更新したファイルを反映させるために、Ubuntuへ次の命令を入力します。

    source ~/.profile

     これで別名の設定は終了です。[sail]と入力したらsailのヘルプが出てくるようになりましたか?

  • [Windows]Show-NetFirewallRule

     ファイアーウォールの設定を全量表示するときに、PowerShellでShow-NetFirewallRuleコマンドを使います。

     Show-NetFirewallRuleコマンドに先立ってDateコマンドを実行すると、Show-NetFirewallRuleの出力内容が要約されるようです。RemoteAddress部分が長いとき、Dateコマンドのあと(直後でなくてもよい)にShow-NetFirewallRuleコマンドを実行すると、RemoteAddressの値が{IPアドレス IPアドレス…}と省略されます。

  • [CGI]わかりやすさを目指して

    [CGI]わかりやすさを目指して

     カミュプリィの『西暦・年齢・和暦・干支対照表』CGIを書くときに気を付けたところは「コードのわかりやすさ」です。

    どのようにわかりやすくしたか?

     CGIはHTMLの内容を出力するプログラムです。表示された『西暦・年齢・和暦・干支対照表』でマウス右ボタンをクリックして「ページのソースを表示」で表示されたものを出力する処理をおこなっています。

     それならCGIが出力するHTMLの内容をそのままファイルに保存しておくのが、もっとも全体がわかりやすくなるとおもい、ざっくり次の内容でテキストファイルを保存しました。

    <!doctype html>
    <html dir="ltr" lang="ja" prefix="og: https://ogp.me/ns#" >
    <head>
    	<meta charset="utf-8">
    	<title>西暦・年齢・和暦・干支対照表</title>
    </head>
    <body>
    	<table>
    		<caption>西暦・年齢・和暦・干支対照表</caption>
    		<thead>
    			<tr>
    				<th>西暦</th>
    				<th>年齢</th>
    /* HEADER CREATE */
    				<th ID="ETO">干支</th>
    			</tr>
    		</thead>
    		<tbody>
    /* TABLE CREATE */
    		</tbody>
    	</table>
    <div class="indent">
    </div>
    </body>
    <footer>
    /* COPYRIGHT CREATE */
    </footer>
    </html>

     『/* HEADER CREATE */』『/* TABLE CREATE */』『/* COPYRIGHT CREATE */』部分のHTMLが足りていませんので、干支や和暦の情報をもとにCGIが補います。CGIには静的なHTMLが一切含まれないことで、読みやすくなっています。

    甲子 (きのえね)
    乙丑 (きのとのうし)
    丙寅 (ひのえとら)
     ・・・
    2019/05/01,令和
    1989/01/08,平成
    1926/12/25,昭和
     ・・・

     このCGIはPythonで作成しましたが、他の言語でも同様の工夫はできるのではないかとおもいます。

  • [CGI]サーバーをいたわってキャッシュを付けました

    [CGI]サーバーをいたわってキャッシュを付けました

     ユーザーのブラウザーから要求がある度にCGIを動かしていたらサーバーの生産性が低いです。特にカミュプリィの『西暦・年齢・和暦・干支対照表』CGIは1年に1回更新すればよい表ですので、要求の度にCGIを動かしていたら、、、うん、無駄よね。

    CGIの対応

     CGIですので実行結果は標準出力へHTMLの内容を出します。また、HTMLの内容をそのままキャッシュファイルにも書き出します。こうしてCGIを動かす度にキャッシュファイルが更新されるようにしました。

    HTTPサーバーの対応

     CGIを置いたディレクトリに「.htaccess」設定ファイルを作成します。URLの指定がディレクトリ止まりであれば、キュッシュファイルを優先して開くようにしました。
     次の例では「まるまる.html」キュッシュファイルが優先で、Pythonで書いた「まるまる.cgi」CGIが劣後になりましす。

    DirectoryIndex まるまる.html まるまる.cgi

     これで、普段はCGIを置いたディレクトリを呼び出すと、「まるまる.html」キャッシュファイルがクライアントに渡されます。
     キャッシュファイルがないときは「まるまる.cgi」CGIが呼び出されます。キャッシュファイルがないのは最初だけなので、ディレクトリを呼び出してCGIを実行するのは最初の1回だけですね、この設定は不要かもしれません。

    OSの対応

     タイマーで定期的にプログラムを開始できるクーロン(cron)で、毎年1月1日に「まるまる.cgi」CGIを呼び出します。

    管理者の対応

     年号が変わったときは、年号ファイルの設定を変更してから、CGIのファイル名を含めたURL「https://www.commuply.co.jp/tools/wareki/まるまる.cgi」をブラウザーから呼び出します。
     CGIのプログラム内容を変更したときもCGIのファイル名を含めたURLをブラウザーから呼びます。

  • [HTTP Server]httpからhttpsへの強制リダイレクト

     誰かが http://www.commuply.co.jp/ へアクセスしようとしても、必ずセキュリティ付きの https://www.commuply.co.jp/ を表示するように設定することができます。

     サイトの全体を変更するには、サイトの一番ルート部分にある .htaccess ファイルに次のおまじないを記載します。

    RewriteEngine on
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

  • [DNS]メールサーバをDNSへ登録します

     インターネットメールが着信するように、メールサーバをDNSに登録します。

    (空欄) MX メールサーバ名 10

     ※最後の10は優先順位です。メールサーバがひとつしかないときは重要ではありません。

  • [Python]拡張子.pyのままCGIとして動かす方法

    .htaccessファイルに次の行を追記します。

    AddHandler cgi-script .py

  • [Python]CGIが外部ファイルを指定するときのパスの書き方

    CGIはサーバ上で動かすものなので、http のパスではなく、FTPでアクセスするときのパスで書きます。

  • [Python]先頭に書くコマンドパス

    Pythonプログラムの先頭に書くコマンドパスは次のようにします。

    !/usr/bin/python3.6

    StarServerでは次のようにすると動きませんでした

    !/usr/bin/env python

  • [Python]文字コードや改行コード

    StarServerに配置するPythonのCGIは、文字コードUTF-8、改行コードLFにしないと動きませんでした。

  • [Python]このプログラムのパス

     CGIとして呼ばれるPythonプログラムをつくって、Cronからも呼び出すようにしました。
    Pythonプログラムから、プログラムと同じディレクトリにある別のファイルにアクセスするようにしました。この実行中のプログラムファイルの絶対パスを取得しようと試行錯誤したのですが、結果はダメでした。仕方なくプログラムの絶対パスを定数としてプログラムに埋め込みました

     カレントディレクトリを取得する方法は次のようなものですが、CGIから呼び出されるときはプログラムのあるディレクトリと同じでした。Cronから呼び出すとプログラムとは異なるディレクトリになりました。

    import os
    カレントディレクトリ = os.getcwd()

    または

    import os
    カレントディレクトリ = os.path.abspath('./')

  • [Edge]ファイルを更新したのにブラウザが更新されない

     サーバに乗っけたCSSや.htaccessファイルなどを更新したのに、ブラウザで開いてみると更新されないってことが多々ありませんか?
    WindowsならMicrosoft Edgeの設定を変更して、ブラウザを閉じて開きなおせば最新のファイルを再読み込みしてくれるようにできます。

    まずMicrosoft Edgeを開きます。
    画面右上にある 『・・・』 から『設定』を選び、『プライバシー、検査、サービス』を開きます。
    『閲覧データをクリア』欄にある『ブラウザーを閉じるたびにクリアするデータを選択する』を開き、『キャッシュされた画像とファイル』をオンにします。

     これでMicrosoft Edgeを開きなおすたびに変更内容が反映されます。

  • [FTP]サーバへ保存するファイルは英数字にします

     ファイル名が日本語のファイルをFTPでアップロード/ダウンロードすると文字化けします。
    ファイル名は英数字にするようお願いします。

  • [HTML]テンプレート

     HTMLの書き方は人それぞれ多種多様ではないかとおもいます。
    しかしながら初めてHTMLを書こうと思い立ったひとは、やることが多すぎて困ってしまうのかなとおもいます。
    そんなわけでこんな感じでどうでしょうか?というテンプレートをつくってみました。

    <!doctype html>
    <html lang=”ja”>
    <head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width,initial-scale=1″>
    <meta name=”description” content=”ページの要約”>
    <meta name=”keywords” content=”キーワード1,キーワード2″>
    <title>ページのタイトル</title>
    <link rel=”shortcut icon” href=”./favicon.ico”>
    <link rel=”stylesheet” href=”./スタイルシートのファイル名.css”>
    <script type=”text/javascript” src=”./スクリプトのファイル名.js”></script>
    <meta property=”og:site_name” content=”サイト名”>
    <meta property=”og:type” content=”website”>
    <meta property=”og:url” content=”サイトのパス”>
    <meta name=”twitter:card” content=”summary”>
    <meta name=”twitter:domain” content=”サイト名”>
    </head>
    <body>
    <header>
    /* ここにページの上部を書く */
    </header>
    <main>
    /* ここにページの本文を書く */
    </main>
    <footer>
    <small>Copyright &copy; 2022 <a href=”著作者のサイトのパス”>著作者名</a></small>
    </footer>
    </html>

  • [DNS]wwwなしをwww付きURLへリダイレクト

     カミュプリィのウェブサイトwww.commuply.co.jpは、wwwなしのcommuply.co.jpでもアクセスできるように、DNSで同じIPアドレスを設定しています。
    ウェブサイトはwww付きのhttps://www.commuply.co.jp/ですよ!とご案内してますので、wwwなしでアクセスしてきたときはwww付きへ自動変換しています。

    (空欄) A IPアドレス
    WWW A IPアドレス

    参考にしたページはつぎのものです。
    【.htaccess】httpからhttpsへリダイレクト、wwwありなし統一、index.html(php)ありなし統一の設定方法&記述内容の意味

  • [Python]日本語対応するために

     Pythonのプログラムを日本語対応するために次のコードを追加します。

    import sys
    sys.stdin = open(sys.stdin.fileno(), 'r', encoding='UTF-8')
    sys.stdout = open(sys.stdout.fileno(), 'w', encoding='UTF-8')
    sys.stderr = open(sys.stderr.fileno(), 'w', encoding='UTF-8')

  • [JavaScript]Copyrightの年を常に今年に書き換えます

     ページの末尾にCopyrightを記載したサイトを見かけます。ちなみに『©』は『&copy;』と書くことで表示できます。

    Copyright © 2022 カミュプリィ (Commuply Inc.)

    年が入っているため更新しないでおくと、何年もサイトを更新していないように思われてしまいます。
    自動更新できないかなぁと考えました。

    HTML

     htmlのhead部分に使用するジャバスクリプトのファイルを記載します。

    <head>
    <script type="text/javascript" src="./loadevent.js"></script>
    </head>

     つぎに、実際に表示される年の数字部分に『currentyear』と名前を付けます。この名前をつけた部分をジャバスクリプトで書き換えます。

    <span class="currentyear">2022</span>

    JavaScript

     『currentyear』を今年へ書き換える関数を書きます。

    function updateyear() {
    let currentyear = document.getElementsByClassName(‘currentyear’);
    for(var i = 0, len = currentyear.length|0; i < len; i = i + 1|0) {
    currentyear[i].textContent = (new Date()).getFullYear();
    }
    }

     つぎに、htmlが表示されたときに『updateyear』を呼び出す設定をします。

    window.addEventListener('load', updateyear);

  • [CSS]左寄せ・右寄せで横に並べます

     カミュプリィのホームページの上部にある『カミュプリィ』は左寄せ、『個人情報保護方針』は右寄せになっています。

    HTML

    <div class="top">
    <div class="commuply"><a href="./index.html">カミュプリィ</a></div>
    <div class="privacypolicy"><a href="./aboutus/privacypolicy.html">個人情報保護方針</a></div>
    </div>

    CSS

    .top {
    display: flex;
    justify-content: space-between;
    }

    .top div {
    margin: 0 1rem; /* 外側の余白: 上下左右*/
    list-style: none;
    height: 2rem;
    line-height: 2rem;
    text-align: center; /* 文字の位置: 中央寄せ */
    }

    .top .commuply {
    text-align: left;
    }

    .top .privacypolicy {
    text-align: right;
    }
  • [CSS]タブのように等間隔で横並び

     カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の4つのタブを等間隔で並べています。

    HTML

    	<div class="menu">
    <div class="current"><a href="./index.html">ホーム</a></div>
    <div><a href="./site-create/index.html">ウェブ</a></div>
    <div><a href="./system-keep/index.html">維持</a></div>
    <div><a href="./aboutus/index.html">ついて</a></div>
    </div>

    CSS

    .menu {
    display: flex;
    justify-content: space-between;
    }

    .menu div {
    list-style: none;
    width: 25%;
    height: 2rem;
    line-height: 2rem;
    text-align: center; /* 文字の位置: 中央寄せ */
    border: 1px solid white; /* 枠線 */
    background-color: #f7b977cc; /* 背景色 */
    }

    .menu div:hover {
    background-color: #f7b97777; /* 背景色 */
    }

    .menu a {
    display: block;
    color: black; /* 文字色 */
    text-decoration: none;
    }

    .current a {
    border: 2px solid; /* 枠線 */
    border-color: black white white black;
    background-color: #f7b977ff; /* 背景色 */
    }
  • [CSS]リストの後ろを隠す・開く

     長いリストのうしろのほうを隠しておき、ボタンが押されたら開くようにします。

     ↓ボタンが押されると展開します。

    HTML

    <div class="cp_box">
    <input id="cp01" type="checkbox">
    <label for="cp01"></label>
    <div class="cp_container">
    <p>0000/00/00(日)<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>
    /* ここに複数行を書く */
    <p>0000/00/00(日)<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>
    </div>
    </div>

    CSS

    .cp_box label {
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%; /* グラデーションの幅 */
    height: 6em; /* グラデーションの高さ */
    cursor: pointer;
    text-align: center; /* ボタン内の文字の位置 */
    background: linear-gradient(to bottom, #FFFFFF00 0%, #FFFFFFFF 100%); /* 背景をサイトに合わせる */
    }
    .cp_box input:checked + label:after {
    content: '閉じる'; /* ボタンの名前(開いたとき) */
    }
    .cp_box label:after {
    z-index: 2;
    content: '続きをよむ'; /* ボタンの名前(閉じたとき) */
    position: absolute;
    line-height: 2.5em; /* ボタンの高さ */
    bottom: 0;
    left: 50%;
    width: 16em;
    transform: translate(-50%, 0);
    letter-spacing: 0.05em;
    border-radius: 20px;
    color: #FFFFFF; /* ボタンの文字色 */
    background: #5AA25A; /* ボタンの背景色 */
    }
    .cp_box {
    position: relative; /* ボタンの位置を内容にあわせる */
    }
    .cp_box input:checked + label {
    background: inherit; /* 開いた時にグラデーションを消す */
    }
    .cp_box input {
    display: none;
    }
    .cp_box .cp_container {
    overflow: hidden; /* 閉じているときに下の部分を隠す */
    height: 20em; /* 閉じているときの高さ */
    }
    .cp_box input:checked ~ .cp_container {
    height: auto; /* 開いたり閉じたりするときに高さが変更されるようにする */
    padding-bottom: 2.5em; /* 閉じるボタンを下へ調整 */
    }
  • [CSS]CSS・スタイルの書きかた

     タグのなかにstyle=”設定”と書く方法、<html>の<head>内に<style>~</style>と書く方法、別のファイルに書いて<html>の<head>内に<link rel=”stylesheet” href=”ファイル名.css”>と書く方法の3種類があります。
     いずれにしても、①どこへ適用するのか、②どの設定か、③どんな値かということを書いていきます。改行をいれて見やすくすることができますが必須ではありません。

    ①適用範囲 { ②設定: ③値; }

    ①適用範囲(セレクタ―)

     タグ名はそのまま入力します。クラス名は先頭に『.(ピリオド)』を付けます。アイディ名は先頭に『#(シャープ)』を付けます。全要素にするときは『*(アスタリスク)』です。
     複数の名前を空白で区切ると[または(OR)]という意味になり、適用範囲を広げられます。
     複数の名前を『,(カンマ)』で区切ると[かつ(AND)]という意味になり、適用範囲を小さくします。
     区切記号は他にも『>(不等号記号)』『+(プラス)』『~(チルダ)』があります。
     そして『[](角括弧)』や『:(コロン)』でさらに条件を付けることができます。

    ②設定(プロパティ)、③値(バリュー)

     設定できる項目は決まっています。

    CSS の基本 – ウェブ開発を学ぶ | MDN

  • [CSS]色を設定します

     CSSで色を指定できるところは、文字色(color:)、背景色(background-color:)、枠の色(border-color:)があります。
     カミュプリィのホームページではみかん色(#F08300)やあんず色(#F7B977)を多く使用しています。CSSでの指定は『color: #f08300』のようになります。

    色の番号は色見本のサイトで調べることができます。

    WEB色見本 原色大辞典


     同じ色の濃淡が必要なときは『color: #f08300cc』『color: #f0830077』のように濃さ(透過)の設定を加えます。透過を指定しない『color: #f08300』は『color: #f08300FF』と同じです。
     色の設定とは別に、濃さ(透過)のみ(opacity:)を設定することができます。画像の透過に役立てそうです。値は0から1までの数値か、0%から100%までの割合で設定できます。1または100%が透過しないという意味になります。

  • [CSS]文字の太さを設定します

     つぎのようにすると文字を太字にすることができます。本当は細かく太さを設定できるのですが、実際には普通と太字しか表示できないようです。

    font-weight: bold;  /* 太字 */
    font-weight: normal; /* 標準 */

  • [CSS]いちぶを隠します

     CSSを使用してHTMLの一部分をかくすことができます。

    display: none;

     状況にあわせて内容を表示するのに使えるかもしれませんね。

  • [HTML]改行をそのまま表示します

    改行を含んだ値を、そのまま表示するには次のようにします。

    <pre>値<pre>