Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 「セキュリティで保護されたコンテンツのみ表示」


httpsでページを作っているとき
「セキュリティで保護されたコンテンツのみ表示」と出て上手く表示されないときがあります
jqueryのjsを呼び込んでいるとき
自分の他サイトのhttpからですとこの表示が出るそうです。
そこでこのfc2blogのhttpsのサイトの場合はその同じファイルのアップロードに
jqueryのjsをアップすると
上手く表示されるようになりました。

但し、fc2blogでは(.)や(/)のついたファイルはアップできません。と出てアップできませんでした。
そこで(.)や(/)を(-)に変えてアップしましたところ上手くいきました。

【2021/04/21 11:44】 html | トラックバック(0) |
コメント(0)

 beforeとafter


cssにbeforeとafter があるということで
直前の記事、クリックすると+になるをクリックすると+がーになるをお勉強です。
今度もチェックボックスを使います。

クリックすると+がーになりますよね。
ここまでのHTMLとCSSです
HTMLは
<body>
<input type="checkbox" id="check1" class="hiraku-hidden">
<label for="check1" class="hiraku-open">ありがとう</label>
</body>

CSSは
<style>
.hiraku-hidden {
display: block;;/* チェックボックス、今は表示*/
}
.hiraku-open {
display: block;
padding: 10px;
width:400px;/* 高さ不要 */
border:1px solid #ccc;
background: #fff;
cursor: pointer;/* ポインターが手の形 */
position: relative;/* 親に相対的位置 */
}
.hiraku-open::before,.hiraku-open::after {
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
*/content: '';が不明ながら ― になる。beforeとafterで同じ所に二つある */
}
.hiraku-open::after{
transform: rotate(90deg);
*/afterで一本を90度回転させる。*/
}
/* クリッされたら縦棒を横棒にして-にする */
.hiraku-hidden:checked + .hiraku-open:after {
transform: translateY(-30%) rotate(0);
}
</style>>

何をしたいかというと
クリックで展開するメニューなどです。

追記に記載
【More Open】
【2021/04/20 11:31】 css | トラックバック(0) |
コメント(0)

 before and after1


最初にbefore and afterを学習しました。


このように ありがとう とだけ書いた文字の
最初がbefore後がafterだとわかりました。



<p class="example">ありがとう</p>
<style>
.example:before{
content: 'あ';
color: skyblue;/*色を変える*/
}
.example:after{
content: '』';
color: red;/*色を変える*/
}
</style>

ちなみに
閉じているときは+
開くとーは
beforeとafter絶対的位置で同じにしてそのうちの一本を90度回転させると解りました。
【2021/04/19 15:28】 css | トラックバック(0) |
コメント(0)

 チェックボックス


cssでtransformという物を使うと与えられた要素を回転、拡大縮小、 傾斜、移動することできると言うことで
やってみました。
transform: rotate(90deg)ですと90度回転するという。
マウスが乗っているとき、またクリックしている間などあるけれど
クリックしたらまたクリックするまでそのままというのがやりたかったので
調べるとチェックボックスを使う方法が見つかった。

親に
position: relative;を指定し
..check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
visibility: hiddenを書かないとチェックボックスが出る。
有っても動きは同じです。

htmlで
wrapをdivにしたら機能しないので
調べたら
labelを使うといいらしい。

<label class="wrap">
『LABELとは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。 関連付けを行うことにより、ブラウザでラベル(もしくはラベルのアクセスキー)をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。』
とのこと

なるほど

css
<style>
.wrap {
position: relative;
}
.check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
.translate{
margin-top: 100px;
padding: 10px 20px;
border: 1px solid #59b1eb;
background: #59b1eb;
text-align: center;
color: #fff;
width: 320px;
height: 30px;
transition: all 1s ease;/*これでゆっくり*/
  cursor: pointer;;/*これでカーソルが手の形*/
}
input:checked ~ .translate{
transform: rotate(90deg);
}
.translate2{
margin-top: -52px;
padding: 10px 20px;
border: 1px solid pink;
background: pink;
text-align: left
color: #fff;
width: 160px;
height: 30px;
}

</style>

HTMLは

<label class="wrap">
<input class="check" type="checkbox">
<div class="translate">translate</div>
</label>
<div class="translate2">translate2</div>

水色の四角をクリックしてみてください。


【2021/04/17 00:00】 css | トラックバック(0) |
コメント(0)

 カーソルがtext


クリックしたくなるよう指や手の形にしたいのに
textというそうですが | のような縦の線が出ているとき
cssに
cursor: pointer;


また画像の場合

<img style="cursor: pointer;" id="close_2" src=

とすると手の形になった
【2021/04/15 18:07】 css | トラックバック(0) |
コメント(0)






| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

03 | 2021/04 | 05
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

03 | 2021/04 | 05
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview