初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS

CSS Firefoxでリンクの点線を消す

Firefoxでネットを閲覧しているとリンクボタンに点線が かかっていることがあります。Firefox Chrome ちょっとしたことですがこれを消す方法がありますので記述します。 a:link, a:visited, a:active, a:hover { /* FireFox リンク選択時の点線を消す */ ove…

CSS 透過の調整とIE対応についての注意

CSSで透過の調整をするときのお話です。CSS3での透明化 セレクター { opacity:0.7; } これだけで最新のブラウザでは不透明度を調整できるはずです。 昔のIEで透過の調整する場合にはopacityは効きませんので 下記の記述が必要になります。注意点:hoverなど…

CSS 可変で要素を中央に寄せる方法

可変した時に左右の幅が均等に分かれる記述方法を書きます。 body{ max-width:一番大きな値を入力 margin:0 auto; } #container { margin:0 auto; position:relative; }

HTML CSS Javascript スマフォサイトナビをクリックすると表示・非表示にする

<html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <link rel="apple-touch-icon" href="touch-icon.png"> </link></meta></meta></meta></head></html>

Javascript CSS3 ハンバーガーボタンを作成する

画像などは使わず、CSS3とjavascriptでハンバーガーボタンを作成してみます。 クリックすると×に変わります。 <body> <div class="item"> <button class="cmn-toggle-switch cmn-toggle-switch__htx"> <span>toggle menu</span> </button> </div> </body> </html> /* ============================================================================= DEMO STUFF ======…

CSS CSS3でグラデーションをかけてみる

以前作成した切り抜き画像を使ってCSS3でグラデーションのように 光らせてみます。http://bellsmarket.hatenablog.com/entry/2015/04/13/194100bellsmarket.hatenablog.com CSS3での「animation」はかなり重くなるのでスマートフォンだと 動かなくなる可能性…

HTML CSS バックグラウンドに動画を使用する

最近動画がバックグラウンドに流れていてなおかつコンテンツを 見せるサイトが多々あるかと思います。その作り方を記述します。HTML5のvideoタグを使用します。動画を用意します。 下記が無料でクオリティーが高い動画が ダウンロードできます。poster属性は…

CSS 高さを%で指定する

幅はCSSで簡単に%で指定できますが高さは普通に%で指定してもうまくいきません。そこでうまく%表示する方法を記述します。 html,body { height:100%; } この記述を加えるとブラウザで表示されている高さを100%と 認識してくれます。 これでこの後に記述する…

CSS3 文字や画像を拡大する

文字や画像にhoverした時にその対象物を拡大する方法を記述します。 <body> <div id="box1"></div> </body> </html> 拡大する #box1{ width:200px; height:200px; margin:50px auto; background:blue; -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linea…

CSS 写真の角を丸くする

CSSで写真の角を丸くする方法を記述します。 この記述もCSS3になります。 img { border-radius:100px; } 画像の他にborderで記述したdivやbackgroundで色をつけたdivなどにも適応します。 border-collapseプロパティの値にcollapseが指定されたtable要素を除…

CSS 画像を回転させる

画像を回転させる場合には通常、前もって角度をつけた画像を用意しますが CSS3から画像の角度を変更できるようになりました。 その方法を記述します。任意で画像を用意しましょう。画像に下記のCSSを記述するだけで角度が変わります。 角度は【数字+deg】を…

CSS 文字を隠し文字にする

HTMLでマークアップしている際に <h1></h1> にロゴの画像を使用したい場合があるかと思います。 画像だけ貼って文字を入力しないと文書構造的にも あまりよくありません。 画像も文字も入力すると下記の画像のようになってしまいます。 そんな時に文字を入力して隠し…

CSS 文字を選択した時に色を変更する

文字を選択する時に選択した文字の色を変更する方法を記述します。 <style> .color_red::selection { color: red; } .color_red::-moz-selection { color: red; } li.background::selection { background: aqua; } li.background::-moz-selection { background: aqu…

CSS display:inline-block li要素を均等に配置する

昨日に引き続きdisplay:inline-blockシリーズです。横並びにした後に要素を均等に配置する方法を書いてみます。 例のごとく複数ボックスを作り色分けしておきましょう。HTMLは下記のように記述します。 <div id="container"> <ul> <li class="box1"><a href="#">box1</a></li> <li class="box2"><a href="#">box2</a></li> <li class="box3"><a href="#">box3</a></li> <li class="box4"><a href="#">box4</a><…</li></ul></div>

CSS display:inline-blockの隙間をなくす

本日はdisplay:inline-bloc kを使って横並ぶにした際の隙間をなくす方法をいくつか記述します。 まず複数ボックスを作り色分けしておきましょう。 HTMLは下記のように記述します。 <ul> <li class="box1">box1</li> <li class="box2">box2</li> <li class="box3">box3</li> <li class="box4">box4</li> </ul> CSSは下記のように記述します。 ul, li{ margin:0; p…

HTML CSS positionを使ったレイアウト 実践編

先日記述したpositionを実際に使ってレイアウトしました。positionの練習のため使わなくてもいいところまで使っていますが 練習ということでご了承ください。 素材も起きましたので実践してみたい方は是非練習してみてください。素材置き場HTML <html> <head> <meta charset="utf-8"> <title>デザート</title></meta></head></html>…

HTML CSS ヒーローヘッダーを作成する

色々なサイトで見受けられる大きな画像が画面いっぱいに広がり スクロールしても写真が動かず他の部分が動くレイアウトがあります。 一般的にこういったレイアウトをヒーローヘッダーと呼ばれるそうです。 HTMLとCSSでヒーローヘッダーを簡単に記述すること…

CSS 横メニューの作り方

CSSで横メニューについて作り方について記述します。 先日と同じ下記のbody要素で記述します。 <body> <div id="nav"> <ul> <li><a href="#">Rock</a></li> <li><a href="#">Jazz</a></li> <li><a href="#">Blues</a></li> <li><a href="#">funk</a></li> <li><a href="#">soul</a></li> </ul> </div> </body> CSSの記述手順 いつも通りhtmlファイルを新規で作成し任意のフォルダに保存し基本を入力 メニューを複…

CSS 縦メニューの作り方

縦メニューの作り方をメモしておきます。 今回は画像ではなくHTMLとCSSだけで書けるタイプです。 画像で作るナビは違う日に記述します。 HTMLのbody要素内を下記で作成します。 <body> <div id="nav"> <ul> <li><a href="#">Rock</a></li> <li><a href="#">Jazz</a></li> <li><a href="#">Blues</a></li> <li><a href="#">funk</a></li> <li><a href="#">soul</a></li> </ul> </div> </body> htmlファイルを…

CSSに触れてみる。

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で ウェブページのスタイルを指定するための言語です。 ではどのような事が出来るか昨日のブログで書いたHTML文書をCSSで装飾してみます。 ①文書の中にCSSを記述するスペースを作りま…

topへ戻る