HTML&CSS研究
どりーみー
どりーみー
Author:Dreamy
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽｀*)ゝ
カテゴリー
| recent comment |
|
|
| 最新の記事 |
|
|
| recent trackback |
|
|
| ブログ内検索 |
|
|
| RSSフィード |
|
*最新記事のRSS *最新コメントのRSS *最新トラックバックのRSS
|
| TB_People |
|
|
| カレンダー | ||||||||||||||||||||||||||||||||||||||||||
|
|
| ブロとも一覧 |
|
|
| ブロとも申請フォーム |
|
|
| リンク |
|
|
Masonryを使用時「flexbox」で2カラムレイアウト更に幅狭ではプルダウンに変化させる
floatに代わってページをレイアウトするのに「flexbox」を使うととても短いコードでできると知りました。スタイルシートは.container { display: flex;}.left { width: 300px;}.contents { flex: 1;}だけだそうです。ほんとにびっくりです。詳しくはfloatより辛くない「flexbox」でざっくりレイアウト高さの違うアイテムを隙間なく並べてくれるjQuery プラグイン Masonry を使用時、2カラムにするとMasonryの部分がcontai.... 2018/11/28/カスタマイズ
Read More
%による3カラム
container100%をwrapper75%(赤枠)とright23%（pink背景色）に分け。wrapper(赤枠)を100%と考えleft24%（yellow背景色）main74%空色背景色に分ける。demoはこちら.... 2018/11/16/ html
Read More
カテゴリ別スタイルシート
一つのBlogでカテゴリによってまるで違うBlogを見ているようにスタイルシートを変えることができるそうです。参考にさせていただいたのは Glim.さま・・・最後のあがき・・・・・です。ありがとうございます。テンプレートの設定からhtmlの編集＜ink href="style.css" rel="stylesheet" type="text/css" /＞という部分を＜link rel="stylesheet" type="text/css" href="スタイルシートファイルが置かれているサーバーアドレス/cte.... 2018/10/03/カスタマイズ
Read More
パソコン画面の全てが大きい
ウィンドウズ8.1ですが急にパソコン画面のすべてが大きくなってしまいました。デスクトップのアイコンもすごく大きくて所狭しと全面を陣取り、さいとをみてもものすごく大きい。いろいろと試したけど治らない。最後にですくとっぷの何もないところを右クリック画面の解像度を開き1600Ｘ９００となっていたところを以前のように１９２０Ｘ１０８０としたところｒなおりました.... 2018/05/29/パソコン2
Read More
Windowsが正しく読み込まれませんでした
2018年になってすぐ更新プログラムを陰で自動的にアップするよう設定してあるにもかかわらず「更新して再起動」が現れそれをすると「回復 Windowsが正しく読み込まれませんでした」と言う青い画面が現れ、何とか回復するにはシステムの復元をするしかなく、もうこのパソコンはだめなのかと店にパソコンを見に行ったりしていたんですが、1月17日にやっと解決策が見つかりました。https://dynabook.com/assistpc/faq/pcdata3/018440.... 2018/03/16/パソコン2
Read More
リフレッシュ
パソコンが調子が悪くリカバリかリフレッシュしか道がないのではじゅめてリフレッシュしてみた。使いがってよくしていたのに殆ど設定し直しだ。ただファイルやお気に入りは残されたので、少しはよかった.... 2018/01/13/パソコン2
Read More
boxの中で一番上と一番下に文字を入れるには
CSS#box{position:relative;height:400px;border : 1px solid #ccc;}p.btm{position:absolute;bottom:0px;left:0px;}HTML<div id="box"><p>ああああ</p><p class="btm">ああああ</p></div>.... 2016/03/27/css2
Read More
ページ全体を自動スクロール
昔作ったホームページで空から降りてくる女の子がずっと下の方まで行くというのがなぜか動かなくなっていました。きょう、直そうとしたら、どうやったのか全く分からなくなっていました。四苦八苦の末やっと直せました。ほんとにこれは書き留めておかなくてはなりません。ページ全体を自動スクロールさせる方法です。HEADタグの中に<SCRIPT LANGUAGE="JavaScript"><!--var count = 0;var max = 100;function autoScroll().... 2015/01/26/javascript
Read More
すごいやつ display
ｃｓｓにおいてdisplayを使うといろいろとすごいことが起きる。display:block;１．これだと確実に改行されます。２．aに設定すると 文字だけではなく全体がクリック可能に３．そしてコンテンツの表示それに対しdisplay: none;では非表示使い方としては@media screen and (max-width: 960px) {｝@media screen and (max-width: 360px) {｝などとウインドウの幅を設定するスタイルシートで960pxでは表示 360pxでは非表示。またはそ.... 2015/01/24/css2
Read More
3カラムでウィンドウの幅が狭くなると左右のメニューがプルダウンメニューに変わる
DEMOは←こちらPC表示サイズのカラムが崩れる幅 960pxが切れるときブルタウンメニューにしました。ブルタウンメニューの幅はMOBILE用に310pxにしてみました。いかがでしょうか？2015年1月19日現在表示の当blog ではさらに1200pxの表示まで設定してあります。jQueryscriptはheadのなかに貼ります。<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <.... 2015/01/19/javascript
Read More
fc2blogで<head>の<title>を個別ページでは「記事タイトル」トップページでは「Blog名」にする
＊このタイトルというのは お気に入りに入れようとすると「名前」のところに出てくるもののことです。IEではアドレスバーの横か下に出ているもの、またソースの<title>〜</title>のところです。blogのトップページindex_areaでは 「Blogの名前」 だけ個別ページpermanent_areaでは 「記事のタイトル」 だけそのほかのページでは 「Blogの名前＋記事のタイトル」 という風にしてみました。エリアごとに分けるこ.... 2015/01/16/fc2blog
Read More
phpで作る簡易掲示板
phpの使えるサーバーでは簡易掲示板が各ページに設置できます。ページの好きなところへ<form method="POST" action="/pinkbaby/index.php">お名前<input type="text" name="personal_name"><br>コメント<textarea name="contents" rows="3" cols="30"></textarea><br><input type="submit" name="btn1" value="投稿する"></form>と書きます。ページの拡張子は 「.php」とします.... 2015/01/15/php
Read More
ホームページ作成その１ 初めてホームページを作るにはメモ帳から始めます
私の環境はInternet Explorer11 （インターネット エクスプローラー11）windows8.1です。先ず、メニューからメモ帳を選びます。<html></html>と書きます。htmlとは HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略語だそうです。意味はウェブページ記述のためのマークアップ言語。とのこと。ちょっとわからないけど、まぁ良いですよね。<html>で始まり「/」を付けた</html>.... 2015/01/14/HTML作成の基礎
Read More
fc2Blog「新しく記事を書く」ページでオリジナルアイコンの入力「ブックマークレット」を実行し別小窓からタグをコピー
ｆｃ２Blogでコメント欄に絵文字入力はstrollblogさんに教えていただいて以前やったことがあり、たくさんの掲示板にも、他社のいくつものBlogにも設置できたことがあり現在も使わせていただいています。その時記事欄にも絵文字入力支援というスクリプトがあるとは知っていましたが、その時はしないでいました。今回友達から頼まれてお天気アニメを作りましたので、それをBlogの記事の初めに今日の天気として挿入したくなりました。.... 2015/01/13/ブックマークレット
Read More
TABLEを重ねてすっきりした掛け線風なTABLEを作る
TABLEを作る時TABLE border とすると左のようなTABLEができます。なぜか線が二重になっています。先日少しTABLEをいじっているとき、TABLEの中にまたTABLEと訳が分かりませんでしたが、その訳の一つがわかりました。TABLEを重ねることによって最初のTABLEの背景が視覚的に見えることになるんだそうです。二重のTABLE My Blog いつつば検索エンジン Yahoo!,Google 見える線の太さを調整するために中側のTABLEに 「cellpadding="10.... 2015/01/12/table
Read More
横並びのDIVはウインドウサイズで変化
tebleタグでは「width:100%;」など指定が必要ですがDIVタグ では[float:left;]で横並びさせているのに、ウィンドウサイズが狭くなれば、ひとりでに縦並びになるようです。DEMO12345HTML<div class="box">1</div><div class="box2">2</div><div class="box">3</div><div class="box2">4</div><div class="box">5</div><br clear=left>CSSはdiv.box {float: lef.... 2015/01/09/css2
Read More
ウインドウサイズに合わせたTABLE、max-widthも指定
以前はＴＡＢＬＥタグを使ってホームページを作ったこともありましたが、近年はＤＩＶタグを使うことがほとんどなんです。ところが既存のショッピングカートをウインドウサイズに合わせたものにしようと思ったら、ＴＡＢＬＥの中にＴＡＢＬＥ、またその中にＴＡＢＬＥまたその中にもＴＡＢＬＥと際限なくＴＡＢＬＥが作られていて参りました。私も作ったことは有るので解るのですが、作るときは割と簡単なのですよね。できているＴ.... 2015/01/07/table
Read More
リンク文字の背景領域でもクリック可能にする
エントリータイトルなどリンクの文字だけではなく背景も含めてクリックできるようにするにはHTML＜h2＞エントリータイトル＜/h2＞CSSh2 {font-size:20px;}h2 a{display:block;border-left: 20px solid #ccc;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;background: #f0f8ff;padding: 10px;}DEMO水色のところ全体がクリックできるDEMO エントリータイトル DEMO.... 2015/01/03/css2
Read More
ｃｓｓを使って「文字にマウスオーバーで画像を現わす」
「ブログ上の文字」という文字にマウスオーバーすると画像が現れます。ブログ上の文字いつつばのクローバースタイルシートにcssを書き込んで記事を書いていると時の経過と共にどれがこのためのcssか解らなくなってしまいます。ここにＨＴＭＬとＣＳＳを関連して記しておきます。HTMLは<a class="thumbnail" href="リンク先のアドレス">ブログ上の文字<span><img src="画像のアドレス" /><br />ここに画像.... 2014/12/29/css2
Read More
パソコンでスマホサイズ「google chrome」リサイズウィンドウ
パソコンを初めて持った時windows98でした。ＸＰ、 Vistaを経て今はwindows8.1動画も見ようと大きな画面を購入したのですが、ふと気が付くとなんと世はスマホ時代、大きなパソコンで作った画面サイズはＸＰ、 Vistaで見ると横スクロールしないと全部が表示されません。機種によってはパソコンで見るのと同じように見えるのもあるらしいのですが、なんといっても私はスマホを持っていませんので確かめることができません。初めはス.... 2014/12/27/パソコン
Read More
CSSを使ったタブメニュー
よくトップページなどに使われているタブメニューをｃｓｓだけで作ってみました。この例ではHPを４ページ作ってそれぞれリンクを貼りました。ｃｓｓで.box .box2それぞれを float:left; で横並びにし.box2の下線をなくしてそれぞれのページのメニューのリンクに当てます。DEMO この部分はインラインフレームを使用しています。 続きはそれぞれのページです.... 2014/12/24/css2
Read More
windows8日本語でアカウント作っちゃった時
私は一年ちょっと前に・・・正確には昨年の10月にwindows8を買い、マイクロソフトにアカウントを作りました。その時、何も考えず漢字の名前を入れてしまいました。それは本名ではなかったのですが、そのことで別に困ったこともなく使っていました。その後windows8.1にアップしました。しかしそれから二ヵ月後の12月になんとパソコンを物理的に壊してしまいました。画面にヒビが入ってしまったのです。保証も効かないということで、.... 2014/12/22/パソコン
Read More
Windows8.1でデスクトップに「シャットダウンボタン」
パソコンをいじるのが好きで一日中何かをしている私はパソコンから呆れられてかたまにデスクトップのスタートボタン.... 2014/12/21/パソコン
Read More
fc2blogでウィンドウの幅が狭くなると、横並びのメニューがプルダウンメニューに変わる
アクセス解析を見ていると最近はスマートフォンでホームページを見ている人が多くなってきました。そこで「ウィンドウの幅が狭くなると、横並びのメニューがプルダウンメニューに変わる」というのをやってみました。デスクトップでやってみるとできたのでfc2blogテンプレートに挿入しようとしたところIE 11でメニューが変わりませんでした。google chromeやfirefoxでは幅を狭めるとプルダウンメニューに変わるのにIFだけはどうして.... 2014/12/20/fc2blog
Read More
前のページに戻る
ホームページなど作っていると、どうしても前のページにあるlinkなどのために戻ってほしいときがあります。この例はブラウザの戻るボタンと同じ機能ですので、絶対に必要というものでもないですが、ページの下の方に設置すれば少し役立つかもしれません。以下をメモ帳などにコピーandペーストします。出来たら戻る理由も書き足すといいですね。<P><CENTER><A HREF="javascript:history.back()">前のページに戻る.... 2014/12/15/javascript
Read More
画像にマウスオーバーで画像を重ねる
cssはbox a { position: relative; } .box a:hover:after { content: url(重ねる画像.png); position: absolute; bottom: 0; left: 0; } ＨＴＭＬは＜div class="box"＞＜a herf="#"＞＜img src="表示される.jpg"＞＜/a＞＞は英数字小文字DEMO.... 2014/10/02/css
Read More
画像だけを真ん中に
記事を書いていると文章は左寄りにしたいが、画像だけを真ん中にしたい時があります。あらかじめ文章はtext:align:left;としてｃｓｓに img{display:block;margin:auto;}例ちなみに指定しないと下のようになる。.... 2014/08/12/css
Read More
画面に一瞬出る黒い四角
先日、ネットバイキングでお金をだまし取られた人はインターネットの更新をしてなかったからだというようなニュースをやっていました。特にＪＡＶＡと言ってたような…今日久しぶりにそれが現れたので更新しました。再起動から帰ってくると。パソコンがとても変でした。前に設定してあるのに、フォルダが一回のクリックで開かなくなり、ページを開こうとするとユーザーアカウントの承認が・・・というようなメッセージがでて、ペー.... 2014/04/17/パソコン2
Read More
Windows8.1でロック画面をスルー
Windows8.1を開いたときいちいちパスワードを入れるのは面倒ですよねそこで検索して次の設定をしました。1.Windowsマーク（田） ＋ R で開いた画面に netplwiz を入力してOK2.ユーザーを選択し、「…パスワードの入力が必要」のチェックを外してOK3.自動ログインさせるユーザのパスワードを保存してOK.... 2014/03/21/ html
Read More
どりーみー(12/19)
どりーみー(10/11)
りんご(10/10)
どりーみー(10/03)
りんご(10/03)