CSS
海外のかっちょいいサイト見てる時に、このcssどうなってるんだろうーと思ってcssでふと見かけた、 「text-transform」 ごめんなさい、今まで見たことあるけど無視してました。 コーディングぺーぺーなのに無視してすみませんでした・・・ ってことで調べて…
▼ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; テキストが自動的に多く表示されないようにする。 例えばHTML側でｐに あああああああああああああ と書いたとしても、 「あああ・・・」と省略して表示してくれる！！ ※3つで1セット！…
display: inline; 横に並ぶ、縦横の幅指定がきかない。 display: block; たてに並ぶ display: inline-block; 横に並びながらブロック要素になる ※他にもいろいろあるが、この３つしか基本使わない！ 例） CSS <style> .box { width: 200px; height: 200px; backgrou</style>…
以外とわからなくなるpositionを使った真ん中にする方法。 シンプルです！！ 例）div class がboxの長方形、 縦100px 横200pxの場合。 .box { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } ポイントとしては、「真ん中…
CSS3を使ったアニメーションのバナーを作成。 まず、Photoshopで素材を作ります。 わたしはこんな感じのを作りました。 ※文字をくりぬき、または画像の一部を切り抜いてすけるようにします。このとき、pngで保存を忘れずに！！ これは文字と香水の液の部分を…
CSS３で縦がきに出来る！実践してみます。 ですが、これはなぜかChromeとIEには対応していて、Firefoxには対応していません。 なので、なんとか見栄えが良くなるよう、振り仮名を振って横書きでも見やすいようにします。 まずHTMLで <ruby></ruby> <rt></rt> <rp></rp> を使って以下のように…
■section■ <body> <header> <h1>私のブログ</h1> </header> <article> <h1>私のブログの投稿</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <aside> </aside></article></body>
liは、floatでなくても横並びに出来ます★ 『 inline 』を使います！！ ▼やり方 div#footer（BOX）にulでli書き出す ■HTML■ <div id="footer"> <p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p> <ul class="nav"> <li><a href="#">トップページ</a></li> <li><a href="#">ソリューション</a></li> <li><a href="#">実績紹介</a></li> <li></li></ul></div>
今日は、バイト休み！！やった！！ とりあえずちゃんとサイトを仕上げる事を目標にがんばります 今回は サイト制作をしていく中でわからない事がありすぎて調べまくったことをかいていきたいと思います ▼opacity / RGBa 要素に透過度をしていするプロパティ …
こんばんわ！ 今日、授業中に進めたCSSやHTMLをですね、上書きして消してしまうという、泣きたくなるような大失態をおかしました。笑 笑い事ではない。笑 はあ、泣きたい。消したものはしょうがない。。。引きずってもしょうがないので、いや、引きずるけど…
text-transform : 英語も大文字、小文字表示 を指定する際に使用。 ※単語の先頭文字だけを大文字表示することも可能。 値 ） : none 初期値！記述したとおり表示。 : capitalize 単語の先頭文字を大文字で表示。 : lowercase すべてを小文字で表示。 : upper…
昨日の続きです！ 今日は、パララックスを実際にうって表示してみます。 ▼HTML 本当にシンプルな、ヘッダー、フッター、コンテンツ３つをくっつけただけです。 ▼CSS reset 全体 ※このとき、positionを使っていることを意識する！ positionを使うときは必ず、…
さて、今日から本格的にサイトの制作が始まりました。 右も左もわからず、すごく先が不安ですw 気合いがあれば乗り越えられる！一生懸命、自分ができることをします。 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 今日は、フルスクリーンで表示する方法を調べた…
今日は昨日に引き続き、ウェブサイト制作で使えそうなbox-shadow,グラデーションでいいと思ったのをのせていきたいと思います。 ■box-shadow■ ■グラデーション■ HTML
■mozilla系ブラウザ（firefox） -moz-linear-gradient( 方向, 開始色, 終了色; ) 例）background: -moz-linear-gradient( top, #990, #066 ); ※top:上から下／left:左から右／left top:左上から右上 ■webkit系ブラウザ（safari/chromeなど） -moz-linear-gra…
今回は、 授業でやった内容だけでなく、自分でいいなあと思ったjquery PlugIn!!してみます。 ■animate-textshadow■ 今回はtextにhoverしたときにshadowをつける。 ▼Download animate-textshadow.js - Animated CSS text shadows with jQuery | Alex Peattie <head></head>…
こんばんわ！！ 今日は帰り雨．．．というか風がすごくて自転車で家までがすごくつらかったです（笑） まあ、こんな日もあるでしょうw 明日は晴れたらいいな．．．梅雨に向けてカッパ買わなきゃ★ では、 本題に入ります ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ …
こんばんわ！ 今日帰り雨にずぶ濡れになって帰ってきました・・・ もう梅雨かなあ 誕生日の月だけど、なんか梅雨やだなあ（笑） ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ さて、 今日は授業５時間みっちり使って”企業のWebページ制作”をしました。 その前に『…
こんばんわ！！ 今日はバイトでした。今日もユニクロは忙しかった、、、w 忙しいのは充実してますねっ ただ、今週なんとTOEICがあるのです。 げげ（笑） Webの勉強と両立していかなきゃ！！ 今日は、復習をかねて 『文字をきれいに見せる』やり方を書きます★…
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 久しぶりの更新になってしまいました。 ウェブって奥が深いなあと思うのと同時に、自分には向いてはいないのではないかとついマイナス思考になり、毎日の勉強するたび落ち込みそうになる井上です。（笑） ブログの…
