カテゴリー: 未分類

  • [言語比較]変数の初期値(既定値)

    [言語比較]変数の初期値(既定値)

    Java, C#, Python

    初期化されていない変数を使うとエラーになります

    Lotus Script

    • 数値型: 0
    • 文字値型: ブランク
    • Boolean型: False
    • オブジェクト型: Nothing
    • Variant型: Empty
    • List型: 初期化されません。アクセスする前に Redim で初期化します

    注意
    Variant型変数を Empty に戻すには、未使用の Variant型変数を利用します
    例: Variant型変数 = 宣言したまま使用していない Variant型変数

    VbScript

    • Variant型: Empty

    注意
    Variant型変数を Empty に戻すには、Empty を使用します
    例: Variant型変数 = Empty

    Lotus 式言語

    • Variant型: Empty
  • [言語比較]””{}|| : 文字列定数をあらわす記号

    [言語比較]””{}|| : 文字列定数をあらわす記号

     文字列を囲う記号を整理してみましょう。

    Java

    • ”文字列値”

    C#

    • @”文字列値” : ¥をそのまま円マークとして扱う
    • ”文字列値”

    Python

    • r”文字列値” : ¥をそのまま円マークとして扱う
    • ”文字列値”

    PHP

    • ‘文字列値’
    • ”文字列値” : $から始まる変数を設定できます

    Lotus Script 言語

    • ”文字列値”
    • {文字列値}
    • |文字列値|

    VbScript 言語

    • ”文字列値”

    Lotus 式言語

    • ”文字列値”
    • {文字列値}

    {}(ちゅうかっこ)は””(ダブルコーテーション)に自動変換されます

  • [言語比較]Call : 関数を呼ぶ

    [言語比較]Call : 関数を呼ぶ

    Lotus Script 言語

    () は省略できることが多いです
    Call を省略するときは () も省略します
    Call だけ省略し () を付けると、意味が変わります
    次のとおり色々な書き方ができます

    受け渡し値がないとき

    • Call 関数名 ()
    • Call 関数名
    • 戻り値 = 関数名 ()
    • 戻り値 = 関数名
    • 関数名

    受け渡し値があるとき(関数側の ByVal/ByRef 設定どおり)

    • Call 関数名 (受け渡し値)
    • Call 関数名 受け渡し値
    • 戻り値 = 関数名 (受け渡し値)
    • 関数名 受け渡し値

    これはエラーになります

    • 戻り値 = 関数名 受け渡し値

    受け渡し値があるとき(常に ByVal を強制)

    • 関数名 (受け渡し値) ’ Call を省略して () を付けます

    VbScript 言語

    Call を付けるときは () も付けます
    Call を省略するときは () も省略します
    Call だけ省略し () を付けると、意味が変わります
    次のとおり色々な書き方ができます

    受け渡し値がないとき

    • Call 関数名 ()
    • 戻り値 = 関数名 ()
    • 関数名

    受け渡し値があるとき(関数側の ByVal/ByRef 設定どおり)

    • 戻り値 = 関数名 (受け渡し値)
    • Call 関数名 (受け渡し値)
    • 関数名 受け渡し値

    受け渡し値があるとき(常に ByVal を強制)

    • 関数名 (受け渡し値) ’ Call を省略して () を付けます

    クラスの値を受け渡すと動作が変わります(アクセス権がどうの)

    クラス名.パラメータ = 値
    関数名 (クラス名.パラメータ) ’ クラス名.パラメータの値は変化しません
  • [言語比較]New : クラスからオブジェクトをつくる

    [言語比較]New : クラスからオブジェクトをつくる

    New : クラスからオブジェクトをつくります

    Lotus Script 言語

    • Set 変数 = New クラス名 ()
    • Set 変数 = New クラス名 (値)
    • Set 変数 = New クラス名
       ※最初に実行される New 関数は値を受け取ることができます
       ※New クラス名へ値を渡さないときは括弧を省略できます

    VbScript 言語

    • Set 変数 = New クラス名
       ※最初に実行される Class_Initialize 関数は値を受け取ることができません
       ※クラス名のうしろに括弧をつけるとエラーになります

  • [言語比較]Const : 変更されない値に名前を設定

    [言語比較]Const : 変更されない値に名前を設定

    C#

    Const 名前 = 値;

    Lotus Script 言語, VBScript 言語

    Const 名前 = 値

    注意
    設定できる値部分には、計算式や変数を書くことができません
    Const に限りませんが、標準で Lotus Script は Private になり、VBScript は Public になります

  • [言語比較]List,Listtag : キーと値のペアで記憶する連想配列(辞書、ディクショナリー)

    [言語比較]List,Listtag : キーと値のペアで記憶する連想配列(辞書、ディクショナリー)

    Lotus Script 言語

    • 宣言 : Dim 変数名 List As 型
    • 辞書? : True または False = IsList (変数名)
    • キーを追加 : 変数名 (キー) = 値
    • 既にキーが存在する? : True または False = IsElement (変数名 (キー))
    • 値を取り出す : 値 = 変数名 (キー)
    • すべて取り出す :
    Forall 参照変数 In 変数
     キー = ListTag (参照変数)
     値 = 参照変数
    End Forall
     ※参照変数は Forall で有効な特別な変数で Dim で宣言しません
     ※参照変数を更新すると In に続く変数の値が更新されます

    Forall : 値の数だけ繰り返します

    • キーを削除 : Erase 変数名 (キー)
    • キーをすべて削除 : Erase 変数名
       ※キーは文字値になります
       ※一般的に List は配列よりも多くの値を保存できます

    VbScript 言語

    • 言語として連想配列の機能がありません
    • Set 変数名 = CreateObject (“Scripting.Dictionary”) として、オブジェクトで連想配列を使います

    Lotus 式言語

    連想配列の機能がありません

  • [言語比較]Class : クラスをつくる

    [言語比較]Class : クラスをつくる

     Lotus Scriptのクラスは、VBScriptと異なっているところが多いです。

    Lotus Script 言語

    Class クラス名 As 元クラス ’別のクラスから引き継ぐことができます

     ’最初に実行されます
     Sub New (変数名 As 型).元クラス (変数名 As 型) ’値を受け取ることができます
     End Sub

     ’最後に実行されます
     Sub Delete ()
     End Sub

     Public Sub 戻り値がない関数名 (変数名 As 型)
     End Sub
    ‘使うときは「Call クラスオブジェクト.関数名(値)」です

     Public Function 戻り値がある関数名 (変数名 As 型) As 型
      Me.戻り値がある関数名 = 戻り値 ’値を返します
     End Function
    ‘使うときは「値 = クラスオブジェクト.関数名(値)」です
    ‘または「Set 値 = クラスオブジェクト.関数名(値)」です

     Public Property Set プロパティ名 As 型 ‘ Lotus Script では Let は Set に統合されています
      変数名 = Me.プロパティ名 ’値を受け取ります
      (または) Set 変数名 = Me.プロパティ名 ’値を受け取ります
     End Property
    ‘使うときは「クラスオブジェクト.プロパティ名 = 値」です
    ‘または「Set クラスオブジェクト.プロパティ名 = 値」です

     Public Property Get プロパティ名 As 型
      Me.プロパティ名 = 戻り値 ’値を返します
     End Property
    ‘使うときは「値 = クラスオブジェクト.プロパティ名」です
    ‘または「Set 値 = クラスオブジェクト.プロパティ名」です

    End Class

     何も指定しないと Private、ByRef になります。
     現在のクラスのなかで現在のクラスで定義された関数・プロパティ・変数を使うには、名前の先頭に Me. をつければOKです

    VbScript 言語

    Class クラス名 ’独立したクラスとして作成します

     ’最初に実行されます
     Sub Class_Initialize () ’値を受け取れません
     End Sub

     ’最後に実行されます
     Sub Class_Terminate ()
     End Sub

    Sub 戻り値がない関数名 (変数名)
    End Sub
    ‘使うときは「Call クラスオブジェクト.関数名(値)」です

    Function 戻り値がある関数名 (変数名)
     戻り値がある関数名 = 戻り値 ’値を返します
    End Function
    ‘使うときは「値 = クラスオブジェクト.関数名(値)」です
    ‘または「Set 値 = クラスオブジェクト.関数名(値)」です

    Public Property Set プロパティ名 ’Set はオブジェクトを受け取ります
     Set 変数名 = プロパティ名 ’値を受け取ります
    End Property
    ‘使うときは「Set クラスオブジェクト.プロパティ名 = 値」です

    Public Property Let プロパティ名 ’Let はオブジェクト以外を受け取ります
     変数名 = プロパティ名 ’値を受け取ります
    End Property
    ‘使うときは「クラスオブジェクト.プロパティ名 = 値」です

    Public Property Get プロパティ名
     プロパティ名 = 戻り値 ’値を返します
    End Property
    ‘使うときは「値 = クラスオブジェクト.プロパティ名」です
    ‘または「Set 値 = クラスオブジェクト.プロパティ名」です

    End Class

     なにも指定しないと Public、ByRef になります。
     現在のクラスで定義されたプロパティをつかうときに、名前の先頭に Me. をつけるときがあります

    VBA (for Excel, Word など)

     VBAのクラスは Visual Basic Editor のメニューの挿入からクラスモジュールを選ぶことで作成できます。ひとつのページ(?)に複数のクラスを記述することができません
     クラスをエクスポートすると、次のようなヘッダーが付いてきます
     ここに記述したものすべては単一のクラス内のものとして扱われます

    VERSION 1.0 CLASS
    BEGIN
    MultiUse = -1 'True
    END
    Attribute VB_Name = "クラス名"
    Attribute VB_GlobalNameSpace = False
    Attribute VB_Creatable = False
    Attribute VB_PredeclaredId = False
    Attribute VB_Exposed = True
    
    (ここに関数ほかを記述します)
    ’最初に実行されます
    Private Sub Class_Initialize() ’値を受け取れません
    End Sub
    '使うときは「New クラス名」です
    ’最後に実行されます
    Private Sub Class_Terminate()
    End Sub
    '使うときは「Set クラス変数 = Nothing」です
    Public Sub 戻り値がない関数名(変数名) ' 複数の変数を指定するときはカンマ(,)で区切ります
    End Sub
    '使うときは「Call クラスオブジェクト.関数名(値)」です
    'または「Call クラスオブジェクト.関数名(変数名:=値)」です
    Public Function 戻り値がある関数名(変数名)
    	戻り値がある関数名 = 戻り値 ’値を返します
    End Function
    '使うときは「値 = クラスオブジェクト.関数名(変数名)」です
    'または「Set 値 = クラスオブジェクト.関数名(変数名)」です
    Public Property Get プロパティ名
    	プロパティ名 = 戻り値 ’値を返します
    End Property
    '使うときは「値 = クラスオブジェクト.プロパティ名」です
    Public Property Let プロパティ名(変数名) ’Let はオブジェクト以外を受け取ります
    	変数名 = プロパティ名 ’値を受け取ります
    End Property
    '使うときは「クラスオブジェクト.プロパティ名 = 値」です
    Public Property Set プロパティ名(変数名) ’Set はオブジェクトを受け取ります
    	Set 変数名 = プロパティ名 ’値を受け取ります
    End Property
    '使うときは「Set クラスオブジェクト.プロパティ名 = 値」です

  • [言語比較]& : 文字列連結演算子

    [言語比較]& : 文字列連結演算子

    Java

    • 文字値 = 文字値 + 文字値;

    C#

    • 文字値 = 文字値 + 文字値;
    • 文字値 += 文字値;
    • 文字値 = $”文字値{変数名}文字値”;

    Python

    • 文字値 = 文字値 + 文字値
    • 文字値 += 文字値

    Lotus Script 言語

    • 文字値 = 値 & 値
    • 文字値 = 文字値 + 文字値

    &(アンド)は異なる意味でも使われますので、半角空白を使わずに詰めて書くとコンパライラに誤解されることがあります

    注意
    & は両辺が null のときに null を返します
    + は片方が null のときに null を返します
    + は数値とあわせて使うと、数値に変換できる文字値を数値へ変換して加算することがあります

    演算子ではないところで使用される&記号
    変数名や値の末尾に&を付けると、Long型ですよという意味になります(接尾辞)
    &B、&O、&H は、それぞれ2進数、8進数、16進数ですよという意味になります(接頭辞)
    演算子として&記号を書くときは、コンピューターが困惑しないように、&の前後に空白をはさむとよいでしょう

    VbScript 言語

    • 文字値 = 値 & 値

    注意
    & は両辺が null のときに null を返します

    演算子ではないところで使用される&記号
    &O、&H は、それぞれ8進数、16進数ですよという意味になります
    演算子として&記号を書くときは、コンピューターが困惑しないように、&の後に空白をはさむとよいでしょう

    Lotus 式言語

    • 文字値 = 文字値 + 文字値
  • [言語比較]ArrayAppend : 値をまとめて新しい配列へ

    [言語比較]ArrayAppend : 値をまとめて新しい配列へ

    Lotus Script 言語

    • 動的配列 = ArrayAppend (配列, 単数値または配列)

    エラーになる例
    ArrayAppend (単数値, 単数値または配列)

    動的配列とは
    Lotus Script の配列は2種類あります
    ひとつは Redim で値の数を変更できる動的配列、もうひとつは値の数を変えられない静的配列です

    既存の配列に値を追加する方法
    動的配列に入る値の数を変更するには Redim Preserve 配列名 (上限値) を使用します
    初期値では下限値が 0 となっているため、上限値を 1 にすると配列の値の数は (0) と (1) の2つになります
    Preserve キーワードを忘れると、配列の値が初期化されます
    新しく増やした部分に値を入れるには 配列名 (Ubound (配列名)) = 値 とします

    VbScript 言語

    Lotus Script 言語の既存の配列に値を追加する方法でおこないます

    Lotus 式言語

    • 配列 = 単数値または配列 : 単数値または配列
  • [言語比較]Rem : コメント

    [言語比較]Rem : コメント

    Lotus Script

    ' 行末までコメント
    
    Rem 行末までコメント
    
    %REM
    複数行コメント
     注意 : %REM と %END REM は行の先頭から記載します
    %END REM

    VbScript

    ' 行末までコメント
    
    Rem 行末までコメント

    Lotus 式言語

    REM {括弧で囲んだ範囲がコメント};
    
    REM "括弧で囲んだ範囲がコメント";
  • [言語比較]Boolean,True,False : 論理型

    [言語比較]Boolean,True,False : 論理型

    Lotus Script 言語

    • False は 数値の 0 と表すこともできます
    • True は 数値の -1 と表すこともできます
    • True と False を反転させるには Not を使います
    • Boolean型は False に初期化されます

    注意
    論理型を数値に置き換えると紛らわしいです
    True や False を数値に置き換えることはできますが控えたほうが無難です

    等しい

    等しくない
    <>, ><

    VbScript 言語

    • False は 数値の 0 と表すこともできます
    • True は 数値の -1 と表すこともできます
    • True と False を反転させるには Not を使います

    等しい

    等しくない
    <>

    Lotus 式言語

    • @False は 数値の 0 と表すこともできます
    • @True は 数値の 1 と表すこともできます (Lotus Script 言語と異なります)
    • @True と @False を反転させるには !(びっくりマーク) を使います

    反転(Not, !, ~しない, ~ではない)
    重ねて使うと、否定の否定って何!?って、何だかわからなくなりそうです

    等しい

    等しくない
    <>, ><, !=, =!

  • [言語比較]Asc,Uni,String,Chr,UChr,UString : 一文字を文字コードへ、またはその反対へ

    [言語比較]Asc,Uni,String,Chr,UChr,UString : 一文字を文字コードへ、またはその反対へ

    Lotus Script 言語

    • 数値 = Asc (プラットフォーム固有の文字値)
    • 数値 = Uni (ユニコード文字値)
    • プラットフォーム固有の一文字値 = Chr (数値)
    • プラットフォーム固有の一文字値 = String (1, 数値)
    • ユニコードの一文字値 = UChr (数値)
    • ユニコードの一文字値 = UString (1, 数値)
      Asc,Chr で扱う数値の範囲は 0 ~ 255
      String は一バイト文字または二バイト文字のコードのどちらでも使用できます
      Uni,UChr,UString で扱う数値の範囲は 0 ~ 65,535

    エラーになる例
    Asc (長さがゼロの文字値)
    Asc (Null値)
    UString (1, -1)
    UString (1, 65536)

    VbScript 言語

    • 数値 = Asc (文字値)
    • 一文字値 = Chr (数値)

    Lotus 式言語

    • 文字値 = @Char (数値)
    • 文字の複数値 = @Char (数の複数値)
    • 改行 = @Char (10)
    • タブ = @Char (9)
      数値の範囲は 0 ~ 255

    注意
    @Ascii は Asc とは異なります
    @Ascii はロータスマルチバイト文字セット (LMBCS) を ASCII文字にする関数です

  • [言語比較]Abs : 数値を符号のない絶対値へ

    [言語比較]Abs : 数値を符号のない絶対値へ

    Lotus Script 言語, VbScript 言語

    • 数値 = Abs (数値)
    • Null値 = Abs (Null値)

    エラーになる例
    Abs (複数値)
    Abs (文字値)

    Lotus 式言語

    • 数値 = @Abs (数値)
    • 数の複数値 = @Abs (数の複数値)
  • [C API]文書が開かれたり保存されたりするときに呼び出されるDLL

    [C API]文書が開かれたり保存されたりするときに呼び出されるDLL

     notes.iniに『NSF_HOOKS=①DLL名』と指定すると、文書が開かれたり保存されたりしたときにDLLが呼び出されるようになります。
     呼び出されるDLLファイル名は、ノーツプログラムディレクトリに配置される多くの*.exeファイルと同じように先頭が『n』から始まるようにします。
     notes.iniに記載する①DLL名はDLLファイル名の先頭の『n』と拡張子『.DLL』を取り除いたものになります。

     もし『NSF_HOOKS=①DLL名』の記載があって、該当のDLLファイルが存在しないときどうなるでしょうか?
    試したところ…設定が無視されるだけで、エラーが発生したりサーバーがクラッシュすることはありませんでした。

     NSF_HOOKSから呼び出されるDLLのサンプルはC API Toolkit for Notes/Dominoのsample/admin/trackerにあります。

    https://note.com/notesdomino/n/nbb372fc27daa

    https://note.com/notesdomino/n/n6e674c879c5d

  • [Python]name ‘pip’ is not defined

     Python(パイソン)でpip install ○○』と入力したとき、pipって何?というエラーがでました。
    なぜでしょうか?

    name 'pip' is not defined

     昔インストールした古いパスが残っていることがあります。
    Windowsのスタート画面で『環境変数を編集』と検索し、検索結果を開きます。
    画面上部にユーザー環境変数が、画面下部にシステム環境変数が表示されます。どちらにも『Path』があります。
     Pathに設定された値を確認します。『Python』を含むものを見つけましょう。そのパスが示すフォルダはあるでしょうか?なければ削除しましょう。これで治ったのではないかとおもいます。

  • [PHP]お問い合わせフォームをつくりました

     HTMLとPHPをつかって、お問い合わせ内容をメールで送信するものをつくりました。

    HTML

    <form action="PHPファイル名.php" method="post">
    <p>ご返信先メールアドレス<br>
    <input name="email" type="email" size="40"></p>
    <br>
    <p>ご用件を教えてください<br>
    <textarea name="body" required cols="40" rows="6" placeholder="ウェブサイト作成のご依頼ほか"></textarea></p>
    <p><input type="submit" value="送信"></p>
    </form>

    PHP

    <!doctype html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <main>
    <?php
    $email = $_POST['email'];
    $body = $_POST['body'];
    mb_language("Japanese");
    mb_internal_encoding("UTF-8");
    $headers = "From: $email";
    mb_send_mail($email, "お問い合わせ", $body, $headers);
    print ("お問い合わせありがとうございます");
    ?>
    </body>
    </html>

  • [PHP]if-else分岐

    IF文での分岐は次のようになります。

    if(条件) {
    式;
    }

    if(条件) {
    式;
    } elseif {
    式;
    } else {
    式;
    }

  • [PHP]ブックマークから開いたときの前のページ

     前のページのURLを調べるときは、PHPで『$_SERVER[‘HTTP_REFERER’]』を使います。
    直接URLを開いたり、ブックマークから開いたりしたとき、『$_SERVER[‘HTTP_REFERER’]』はどんなURLになるでしょうか。
    試してみたところ空っぽでした。

     ちなみに<a href=””></a>と、hrefにブランクを渡すと現在のURLへのリンクになっていました。

  • [PHP]文字列を囲う記号は何ですか

     『”(ダブルコーテーション)』で囲まれた文字列に『$(ドルマーク)』を含むと、$より後ろの文字は変数名として扱われます。
    変数名を含まない文字列を書くときは、文字列を『’(シングルコーテーション)』で囲むことができます。

     記号を普通の文字だよっと指示するときは、『\(エンマーク)』を付けます。
    例えば。。。
    $(ドルマーク) → \$
    “(ダブルコーテーション) → \”
    ‘(シングルコーテーション) → \’
    \(エンマーク) → \
    ((開きかっこ) → (
    )(閉じかっこ) → )
    (改行) →\r\n

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

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

    <pre>値<pre>

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

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

    display: none;

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

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

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

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

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

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

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

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

  • [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]CSS・スタイルの書きかた

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

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

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

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

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

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

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

  • [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]タブのように等間隔で横並び

     カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の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="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;
    }
  • [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);

  • [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')