HTML&CSS研究

どりーみー

 Home  Prev

Dreamy

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

カテゴリー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

11 | 2018/12 | 01
- - - - - - 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 31 - - - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

 

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ですが急にパソコン画面のすべてが大きくなってしまいました。デスクトップのアイコンもすごく大きくて所狭しと全面を陣取り、さいとをみてもものすごく大きい。いろいろと試したけど治らない。最後にですくとっぷの何もないところを右クリック画面の解像度を開き1600X900となっていたところを以前のように1920X1080としたところrなおりました...
. 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

川辺の桜

友だちに写真に川を入れるといい感じと教わりました。...
. 2017/05/08/花
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

cssにおいてdisplayを使うといろいろとすごいことが起きる。display:block;1.これだと確実に改行されます。2.aに設定すると 文字だけではなく全体がクリック可能に3.そしてコンテンツの表示それに対し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

ホームページ作成その1 初めてホームページを作るにはメモ帳から始めます

私の環境はInternet Explorer11 (インターネット エクスプローラー11)windows8.1です。先ず、メニューからメモ帳を選びます。<html></html>と書きます。htmlとは HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略語だそうです。意味はウェブページ記述のためのマークアップ言語。とのこと。ちょっとわからないけど、まぁ良いですよね。<html>で始まり「/」を付けた</html>...
. 2015/01/14/HTML作成の基礎
Read More

fc2Blog「新しく記事を書く」ページでオリジナルアイコンの入力「ブックマークレット」を実行し別小窓からタグをコピー

fc2Blogでコメント欄に絵文字入力は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も指定

以前はTABLEタグを使ってホームページを作ったこともありましたが、近年はDIVタグを使うことがほとんどなんです。ところが既存のショッピングカートをウインドウサイズに合わせたものにしようと思ったら、TABLEの中にTABLE、またその中にTABLEまたその中にもTABLEと際限なくTABLEが作られていて参りました。私も作ったことは有るので解るのですが、作るときは割と簡単なのですよね。できているT...
. 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を書き込んで記事を書いていると時の経過と共にどれがこのためのcssか解らなくなってしまいます。ここにHTMLとCSSを関連して記しておきます。HTMLは<a class="thumbnail" href="リンク先のアドレス">ブログ上の文字<span><img src="画像のアドレス" /><br />ここに画像...
. 2014/12/29/css2
Read More

パソコンでスマホサイズ「google chrome」リサイズウィンドウ

パソコンを初めて持った時windows98でした。XP、 Vistaを経て今はwindows8.1動画も見ようと大きな画面を購入したのですが、ふと気が付くとなんと世はスマホ時代、大きなパソコンで作った画面サイズはXP、 Vistaで見ると横スクロールしないと全部が表示されません。機種によってはパソコンで見るのと同じように見えるのもあるらしいのですが、なんといっても私はスマホを持っていませんので確かめることができません。初めはス...
. 2014/12/27/パソコン
Read More

CSSを使ったタブメニュー

よくトップページなどに使われているタブメニューをcssだけで作ってみました。この例ではHPを4ページ作ってそれぞれリンクを貼りました。cssで.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; } HTMLは<div class="box"><a herf="#"><img src="表示される.jpg"></a>>は英数字小文字DEMO...
. 2014/10/02/css
Read More

画像だけを真ん中に

記事を書いていると文章は左寄りにしたいが、画像だけを真ん中にしたい時があります。あらかじめ文章はtext:align:left;としてcssに img{display:block;margin:auto;}例ちなみに指定しないと下のようになる。...
. 2014/08/12/css
Read More

画面に一瞬出る黒い四角

先日、ネットバイキングでお金をだまし取られた人はインターネットの更新をしてなかったからだというようなニュースをやっていました。特にJAVAと言ってたような…今日久しぶりにそれが現れたので更新しました。再起動から帰ってくると。パソコンがとても変でした。前に設定してあるのに、フォルダが一回のクリックで開かなくなり、ページを開こうとするとユーザーアカウントの承認が・・・というようなメッセージがでて、ペー...
. 2014/04/17/パソコン2
Read More

Windows8.1でロック画面をスルー

Windows8.1を開いたときいちいちパスワードを入れるのは面倒ですよねそこで検索して次の設定をしました。1.Windowsマーク(田) + R で開いた画面に netplwiz を入力してOK2.ユーザーを選択し、「…パスワードの入力が必要」のチェックを外してOK3.自動ログインさせるユーザのパスワードを保存してOK...
. 2014/03/21/ html
Read More

カテゴリー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

11 | 2018/12 | 01
- - - - - - 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 31 - - - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク