吹き出しボックス

ここに文章


<div class="box24">
<p>ここに文章</p>
</div>

.box24 {
position: relative;
padding: 0.5em 0.7em;
margin: 2em 0;
background: #7fff00;
color: #5c98d4;
font-weight: bold;
width:10%;
}
.box24:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #7fff00;
width: 0;
height: 0;
}
.box24 p {
margin: 0;
padding: 0;
}
ボックスの配置方法 static->配置方法指定なし relative->通常の位置を基準にした距離で
              位置を指定すると相対配置となる
              absolute->ブラウザーの表示領域の左上 fixed-> ブラウザーの表示領域の左上端を基準にした絶対配置
              ウィンドウをスクロールしても移動しない
ボックスのパディングの幅をまとめて指定
              値1 全ての辺に同じ値が適用 値2 1つ目が上下辺、2つ目が左右の辺に適用
              値3 1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用

図形の作成

.triangle {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #ee4f16;
}
.triangle {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
border-left: 50px solid #ee4f16;
}

■ポイント1
widthとheightの値を0に指定。
上下左右それぞれのボーダーの太さ(border-width)によって、三角形の大きさが決まります。
上図で左側が30pxで 右側が50pxの長さに指定した図形
■ポイント2
上下左右それぞれのボーダーの色。
上記サンプルコードでは、[上][下][右]のボーダーの色を透明にしています。(transparent トランスペアレント)
widthとheightの値を0に指定し、上下左右それぞれのボーダーのを付けてみました。

 

width: 0;
height: 0;
border-top: 30px solid #4EA9D5;
border-right: 30px solid #29c195;
border-bottom: 30px solid #e49910;
border-left: 30px solid #ee4f16;
上下左右それぞれのボーダーの重なる部分が斜めの境界線を基に分割されています。
この仕様によって三角形を実現させることができます。
では、上記の結果の状態から手順を追って実際に三角形を作っていきます。
左以外のボーダーの色をひとつずつ透明にします。(transparent->透明)
まず、上ボーダーの色を透明にします。

width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid #29c195;
border-bottom: 30px solid #e49910;
border-left: 30px solid #ee4f16;
続いて、右ボーダーの色を透明にします。

width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #e49910;
border-left: 30px solid #ee4f16;
さらに、下ボーダーの色を透明にします。

width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #ee4f16;
三角形が完成しました。
三角形の大きさや形状は上下左右のボーダーの太さで決まります。
■[上][右][下]ボーダーの色が透明の場合
三角形の幅:[左]ボーダーの太さ
三角形の高さ:[上下]ボーダーの太さの和
■[右][下][左]ボーダーの色が透明の場合
三角形の幅:[左右]ボーダーの太さの和
三角形の高さ:[上]ボーダーの太さ
■[上][下][左]ボーダーの色が透明の場合
三角形の幅:[右]ボーダーの太さ
三角形の高さ:[上下]ボーダーの太さの和
■[上][右][左]ボーダーの色が透明の場合
三角形の幅:[左右]ボーダーの太さの和
三角形の高さ:[下]ボーダーの太さ
下の場合(triangle5)だと、高さが30px、幅が60pxの三角形となります。

.triangle5 {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 60px solid transparent;
border-bottom: 15px solid transparent;
border-left: 60px solid #ee4f16;
}

応用

三角形の作り方を理解したところで、これを利用してリストマーカーを作ってみます。
:before, :after 擬似要素で三角形を作ります。
まずは :before 擬似要素を使用します。
次は :beforeに加えて、 :after 擬似要素も使用し矢印型のリストマーカーを作ります。

<ul class="list">
  <li class="list-item">ダミーテキスト</li>
  <li class="list-item">ダミーテキスト</li>
</ul>

.list-item {
position: relative;
padding-left: 10px;
}
.list-item:before, .list-item:after {
content: '';
display: inline-block;
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 0;
height: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 6px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid #ee4f16;
}
.list-item:after {
z-index: 1;
margin-left: -3px;
border-left-color: #f8f8f8;
}
まず同じ形の三角形を2つ作ります。
片方の三角形の色を背景の色に合わせます。
この三角形をもう片方の三角形と比べて、少し位置をずらし、前面に配置することで、矢印の形を実現しています。
デモでは、:after 疑似要素を”margin-left: -3px;”で左に3pxずらし、”z-index: 1;”により、前面に配置しました。

下向き三角形

width: 0;
height: 0;
border-style: solid;
border-width: 200px 100px 0 100px;
border-color: #007bff transparent transparent transparent;

 

<上向き三角形>

width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px; 
border-color: transparent transparent blue transparent;

 

ボーダー線のみ 長さ200px 太さ50px(実際は2倍の太さ)

<p style="width:200px; border:50px solid red"></p>

 

border-left:50px lime border-right:50px red border-bottom:50px blue
左に緑の四角を表示 右に四角の赤 下の青が赤と緑をつぶす形で表示する
三角を逆にするには、border-bottom を border-top にすればよい
border-right: 50px solid red;
border-left: 50px solid lime;
border-top: 50px solid blue;

三角形を右向きの場合 top を追加して
border-top: 50px solid lime;
border-right: 50px solid red;
border-bottom: 50px solid black;
border-left: 50px solid blue;

ここでは::afterという疑似要素を使っています。
この疑似要素は、要素の(ここでは「.triangle」)の直後に内容を追加します。
内容というのはcontentの部分ですがここでは空になっています。
このような書き方はCSSでよく出てくるので知っておきましょう。
それぞれ、「.test_3」では長方形の部分を、「.test_3::before」では三角形の部分を作っています。 長方形の部分でborderを使っていないじゃないかと思う方もいるかもしれませんが、
ここではbackground-colorで要素そのものの背景として適用させています。
.test_3{
display: inline-block;
position: relative;
width: 50px;
height: 40px;
background-color: black;
top: 30px;
}
.test_3::after {
position: absolute;
content: "";
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid red;
left: 50px;
top: -30px;


 

 

角丸

width:200px;
height:29px;
border:1px solid blue;
background: blue;
border-top-left-radius:80px 30px; /* 最初の値を小さくすると鈍角になる
border-bottom-left-radius:80px 30px;/* 半径(radius)を上に合わせる
padding-top:10px;
padding-left:7px;
float: left;
margin: 0px;
font-size: 80%;
padding-top: 0.7em;
text-decoration: none; /* リンク下線がある場合 下線を消す
text-align:center;
color:white;

角丸のテスト

 

 

箱形リンクのテスト

雑メモ

曜日を求める
ローカル時刻を取得するには  my ($sec, $min, $hour, $mday, $mon, $year, $wday, $yday, $isdst)= localtime;

$sec=秒 $min=分 $hour=時 $mday=日 $mon=月 $year=年 $wday=曜日 $yday=年内の通し日数 $isdst=夏時間が無効であれば 0 の値が得られる
※月は0~11 よって+1にする 曜日は0~6で日~土 年は1900年から取得(2019年の場合119の値となる) よって+1900にする
日->0 月 -> 1 火 -> 2 水 -> 3 木 -> 4 金 -> 5 土 -> 6
@weeks = ("日","月","火","水","木","金","土");
my @weeks = qw(日 月 火 水 木 金 土);
$week = @weeks[$wday];
$week = $weeks[$wday];
他の方法では
(y+y/4-y/100+y/400+(13×m+8)/5+d) % 7
1月と2月の場合 年(y)をー1 月(m)を+11で計算、除算は整数
例 2020/1/1
$week = (2019 + 2019/4 - 2019/100 + 2019/400 + (13*13 + 8) / 5 + 1) % 7
(2019 + 504 - 20 + 5 + 177 / 5 + 1) % 7 = 3
よって 2020/1/1は水曜日となる
スクリプトの場合 getDay()で求める
var weekdays = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"];
var today = new Date(); 今日の場合
var yobi = today.getDay();
document.getElementById("youbi").value = weekdays[yobi]; テキストボックスに表示
です。
因みに 日は   です

年齢計算(script)

過年度
(現在のYYYYMMDD)-(生まれのYYYYMMDD)÷10000
例: 18 = (20191130 - 20001201) / 10000
※ 月数の1~9の場合 0を付ける必要がある 文字列で0と数字をつなげてから数値型にする
  例 2019年1月3日生まれの場合 20190103とする

生年月日を入力して計算します

YYYY年 MM月 DD日生まれ 

生存日数は本日で 日で、 ケ月と 日です

「整数Math.floor() 数値 parseInt() 文字 String()」
ymd_a = (365*y)+Math.floor(y/4)-Math.floor(y/400)
ymd_b = (30*m)+Math.floor((m+1)*3/5)+d-33
現在 a = ymd_a + ymd_b
過去 b = ymd_1 + ymd_2
生存日数 a - b (初年度加算の場合[数え年]で、初年度を含まない場合は -1とする 通常は初年度を含めない)
日数 c = (a+b) + 1
ただし、1月と2月の場合、年からマイナス1とし月をプラス12として計算
何年何か月の月計算
現在の月ー過去の月
現在の月<過去の月 の場合 年をマイナス1 月をプラス12
上記計算で 過去から現在までの 何年、何か月、何日を算出

うるう年の計算

うるう年の判定は
A 4で割り切れる年はうるう年
B 例外として100で割り切れたら平年
C 例外として400で割り切れたらうるう年

perl で簡単なソース
#!/usr/bin/perl
my $year = 2100;
print "Content-type: text/html; charset=utf-8\n\n";
if (($year % 4 == 0 && $year % 100 != 0) || ($year % 400 == 0)) {
print "閏年\n";}
else {
print "平年\n";}
exit;
参考プログラム 閏年・平年の確認

ボックスの影を付ける
box-shadow: ① ② ③ ④ ⑤
①水平方向の影のオフセット距離 正の値を指定すると右へ、負の値を指定すると左へ影が移動する
②垂直方向の影のオフセット距離 正の値を指定すると下へ、負の値を指定すると上へ影が移動する
③ぼかしの距離 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となる。負の値は指定なし
④広がりの距離 正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小する
⑤影色の値を指定

影のテスト

.kage{
width:300px; height:50px;border:solid 1px blue;
box-shadow:2px 5px 7px 1px blue;}
テキストボックスのスタイル

input {
box-shadow:  0 0 7px #3498db;
border: 1px solid #3498db;
}

ホバー時(カーソル)に文字を拡大表示する

HTML
<a class="my-parts" href="#">テキスト</a>
css
.my-parts {
display: inline-block;
transition: all .3s ease 0s;
text-decoration: none;
}
.my-parts:hover {
cursor: pointer;
transform: scale(1.2);
}

jcode


jcode.pl に変わる、jcode.pm
code.plからの移行
1."require 'jcode.pl';" となっている箇所をすべて "use Jcode;"に
2."jcode::" となっている箇所を "Jcode::"に
ほとんどの場合、これで十分なはず。

&jcode'convert(\$val, "sjis"); # 変数$valをSJISに変換

$str2 = Jcode::convert( $str1 , "sjis", "utf8" );
上記は、UTF-8な文字列をSHIFT-JISに変換する

Windowsでcgiを起動させるには

an httpd

apache httpd サーバーは各設定が複雑なため an httpdに変更しました。

(an httpd と perl はインターネットからインストールします。)

設定方法
httpdを起動 ー> オプション ー> 一般

ドキュメントルート 作業するフォルダ 例 c:\www  ※ htmlファイルのあるフォルダ
ポート: 80
デフォルトインデックス: 例 index.html
CGIを実行する にチェックを入れる
下欄の拡張子 v .pl,.cgi を選択して 編集ボタンをクリック

「実行プログラム」が開くので

実行する にチェック
拡張子:ドット.から始める pl,cgi を入力
実行プログラム にパールのフォルダを入力 例 C:\Perl64\bin\perl.exe  ※ perlをインストールしたフォルダ
一般パスでも実行する にチェック
OKボタン
オプションメニューでOKボタン で設定終了

ブラウザでアドレスを localhost/??????.htmlと入力して実行確認


起動しない場合は設定の再確認 設定が正しいのに起動しないときは

プログラムファイルの httpd.exe を右クリックしてプロパティをクリックします
互換性タブを選択して 設定 の
管理者としてこのプログラムを実行する にチェックマークを付けてOK
ボタンをクリックしてからhttpdを再起動する。

設定後、実行しない場合は

コントロールパネル
システムとセキュリティ
システム
システムの詳細設定
詳細設定タブの
パフォーマンスの設定をクリック
データ実行防止タブ
次に選択するものを除くすべてのプログラムおよびサービスについてDEPを有効にする をチェック
追加ボタンで
httpdを追加してチェックを付ける
適用ボタン OKボタンで起動する