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

最新の記事

月別アーカイブ

recent trackback

 white-space CSSだけで改行


HTMLソースに書く場合

改行は<br>などと書きますが、

<pre>~</pre>の中に書いた文字列はソースに書いてある通りに改行されますよね。

でも借りているスペースなどでHTMLはいじれないけどCSSだけは許されている場合
スタイルシートに

white-space:pre

と書くと改行されるそうです。



【2011/06/05 10:09】 css | トラックバック(0) |
コメント(0)

 CSSしかいじれないBlogなどの優先順位を逆転 !important


CSSしかいじれないBlogなどの編集でどうしても変えることができない時は、元々の優先順位が影響しているらしいのでCSSに[ !important]を追加そのスタイルを最優先にすることができるそうです。


font-size:12px !important;

しかし、連発では意味がなくなるので、最小限にとどめるほうがいいということです。
【2011/06/13 07:02】 css | トラックバック(0) |
コメント(0)

 画像だけを真ん中に


記事を書いていると文章は左寄りにしたいが、画像だけを真ん中にしたい時があります。
あらかじめ文章は
text:align:left;
として
cssに
img{
display:block;
margin:auto;
}



2009-10-1-23.jpg

ちなみに指定しないと下のようになる。
2009-10-1-23.jpg
【2014/08/12 06:51】 css | トラックバック(0) |
コメント(0)

 画像にマウスオーバーで画像を重ねる


cssは


box a {
position: relative;
}
.box a:hover:after {
content: url(重ねる画像.png);
position: absolute;
bottom: 0;
left: 0;
}
HTMLは
<div class="box">
<a herf="#"><img src="表示される.jpg"></a>

>は英数字小文字
DEMO
【2014/10/02 12:54】 css | トラックバック(1) |
コメント(0)

 拍手ボタンの設定


FC2blogの拍手ボタンの画像
エントリーの記事の中に有るため、エントリーの画像の大きさをcssで設定すると
ものすごく大きくなってしまう
そんな時は
【More Open】
【2020/05/23 21:54】 css | トラックバック(0) |
コメント(0)

 CSSのflexで中央揃えにする方法


.container{
display: flex;
justify-content: center;
background: #ccc;
flex-wrap: wrap;
}

.box{
width: 200px;
margin: 10px;
background-color: #66b6d5;
}

.box2{
width: 800px;
margin: 10px;
background-color: #66b6d5;
}

htmlは
<div class="container">
< div class="box2">
box2
</div>
< div class="box">< /div>
</div>


demoはこちら

参考にしたサイト
【2020/05/24 19:21】 css | トラックバック(0) |
コメント(0)

 スマホでオンマウスは


ホームページを見ている人は80%位出そうですね。
オンマウスはマウスが載った時のイベントですが
タッチするスマホにはマウスがありません

編集時
<div class="yes_ontouchstart" ontouchstart="">
を加えるとできるそうです。

参考
【2020/06/12 18:14】 css | トラックバック(0) |
コメント(0)

  listをflexで横並びをウインドウ幅で折り返す


listをflexで横並びさせているとき
永遠に(?)横並びしているのをウインドウ幅にあわせて折り返すためには

ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist {
display: flex;
flex-wrap: wrap;/* ウィンドウ幅で折り返す */}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:260px 2px 0 2px;
width:220px;
color:#999;
border:1px solid #ccc;
}
display: flex;と共に
flex-wrap: wrap;を指定する。

感動的です。
【2021/03/16 08:03】 css | トラックバック(0) |
コメント(0)

 カーソルがtext


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


また画像の場合

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

とすると手の形になった
【2021/04/15 18:07】 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)

 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)

 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)






| ホーム |
ブログ内検索

RSSフィード

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

TB_People

カレンダー

05 | 2021/06 | 07
- - 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

カレンダー

05 | 2021/06 | 07
- - 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