ウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

ウェブデザイナーのための情報サイト超厳選2サイト

一時期はなん十サイトもRSS購読していましたが、絞りに絞って最終的にこの2サイトがのこりました。どちらもCSSの技術だけではなく最新のウェブデザインニュースを網羅しています。ウェブデザイナーはこの2サイトを購読していればOKでしょう。

Codrops

https://tympanus.net/codrops/

Webdesigner Depot

https://www.webdesignerdepot.com/
スポンサーサイト



フッターを最下部に置く最小CSS felx

基本構造はbodyの中の子はメインコンテンツ用とフッター用2つを並列に。

html

<html>
<body>
    <div class="maincontent">
        メインコンテンツ
    </div>
    <footer>
        フッター
    </footer>
</body>
</html>

css

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.maincontent{
    flex: 1;
}

CSSだけでフェードイン

jqueryとはおさらば

animation の基本系をメモ

js不要でページローディングしたらコンテンツをフェードインさせるCSS

html

<div class="main">
    content
</div>

css

div.main{
  animation-name: fadeInA;//名前をつける
  animation-duration: 3s;//秒数
}
@keyframes fadeInA {
    0% {opacity:0;}
    100% {  opacity:1;}
}

PC/タブレット/iphone縦横対応media queryのかき分け

単純にある程度PCとスマホだけを切り替える

@media screen and (min-width: 721px) {/*PC*/
}
@media screen and (min-width: 0px) and (max-width: 720px) {/*SP*/
}

細かく分ける

@media screen and (min-width: 1025px) {/*PC*/

}
@media screen and (min-width: 769px) and (max-width: 1024px) {/* tablet 横*/

}
@media screen and (min-width: 737px) and (max-width: 768px) {/* tablet */

}
@media screen and (min-width: 668px) and (max-width: 736px) {/* 6 Plus 6s Plus 7 Plus 8 Plus 横*/

}
@media screen and (min-width: 569px) and (max-width: 667px) {/* 6 6s 7 8 横 */

}
@media screen and (min-width: 481px) and (max-width: 568px) {/* iphone 5 横*/

}
@media screen and (min-width: 415px) and (max-width: 480px) {/* iphone 3-4 横 */

}
@media screen and (min-width: 385px) and (max-width: 414px) {/* 6 Plus 6s Plus 7 Plus 8 Plus */

}
@media screen and (min-width: 376px) and (max-width: 384px) {/* Google Nexus 4 */

}
@media screen and (min-width: 321px) and (max-width: 375px) {/* iPhone X */

}
@media screen and (min-width: 0px) and (max-width: 320px) {/* - iphone 5*/

}

:after でfloat をclearする方法

.clearとはおさらば

clearするたのめHTMLを書く必要なし

html

<div>
    <p>left content</p>
    <p>right content</p>
</div>

css

div:after{
	clear:both;
	content: "";
	display: table;
}

CSS効かないあるあるまとめ

table にCSSで指定したwidthが効かない

table か td に以下のコード

table-layout:fixed;
参照 [テーブルのセルの幅を指定したにもかかわらず、意図したセル幅にならない]

z-indexが効かない

positionを指定する

画像の下にはいる謎の空白

img{vertical-align: bottom;}

iOSでinput,selectにCSSが効かない

input,select {-webkit-appearance: none;}

横並びのメニューを3等分、7等分、何等分でもうまく収めるCSSテク

課題:このようなメニューを横並びにする。レスポンシブデザインにしたいので横幅の固定はできない。

<ul>
	<li><a href="#">RED</a></li>
	<li><a href="#">GREEN</a></li>
	<li><a href="#">BLUE</a></li>
</ul> 

答え

やり方その1 table-cell

li{
	display: table-cell;
	width: 1%;
}

やり方その2 flex

ul{
	display:flex;
}
li{
	flex:1;
}

最小限のリセットCSS

body{margin:0;font:normal 14px/1.6em Meiryo;color:#333;}
ul,li{margin:0;padding:0;list-style:none;}
a{color:#f00;}

table をスマホ対応CSS

スマホサイトでよく使う

th,td{
   box-sizing: border-box;
    display: block;
    width: 100%;
}

参照 [CSSで出来るレスポンシブ対応を考えた table レイアウト]

はみ出す文字を...で省略するCSS

スマホサイトでよく使う

p{
  width: 100px;/*幅を固定*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
参照 [CSSだけで幅を超えた文字列を...で省略する]

CSSでラジオボタンをスマホブラウザでiPhoneっぽいボタンに

ラジオボタンをiPhoneのボタンっぽく!スマホのウェブブラウザでちゃんと動くように。そこが肝心!


HTML

<ul>
    <li>
        <input type="radio" id="male" name="sex" value="男性" />
	<label for="male">男性</label>
    </li>
    <li>
        <input type="radio" id="female" name="sex" value="女性" />
        <label for="female">女性</label>
    </li>
</ul>

CSS

原理はラジオボタンの選択範囲を広げ透明にする。最低限必要なものは以下のコード。

li{
    float: left;
    position: relative;
    width: 70px;
}
li input {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

このやり方ではじめてスマートフォンでも動く。

チェックが入ったらlabelの背景色を変える。デザインはお好みで。

li input + label{
    color:#333;
    display:block;
    text-align:center;
    padding:5px 0;
    border: 1px solid #ddd;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#EEEEEE));
    background:-moz-linear-gradient(#F9F9F9,#EEEEEE);
}
li:first-child input + label{
    border-radius:4px 0 0 4px;
}
li:last-child input + label{
    border-radius:0 4px 4px 0;
    border-left:none;
}
li input:checked + label{
    background-image:-webkit-gradient(linear,left top,left bottom,from(#5393C5),to(#6FACD5));
    background: -moz-linear-gradient(#5393C5, #6FACD5);
    border: 1px solid #2373A5;
    color:#fff;
}

jQuery不要 CSS3でトグルTOGGLE

原理:通常時はheight:0; overflow: hidden;でコンテンツを隠しチェックボックスにチェックが入った時にスタイルでコンテンツを表示。 機能だけをシンプルにデモを作りました。スタイルはお好みで。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

<input id="toggle" type="checkbox" name="whatever" />
<label for="toggle">CLICK HERE TO TOGGLE</label>
<p>ここにコンテンツ </p>

デフォルトで開示状態にしたい場合はname="whatever"を削除

CSS

input {
display: none;
}
input:checked + label {//チェックボックス選択時
color:red;
}
label{
cursor: pointer;
display: block;
}
input:checked + label + p{//チェックボックス選択時のコンテンツ
height:55px;
}
p{
height:0;
overflow: hidden;
-moz-transition: height 0.5s ease-in-out 0s;
}

背景画像を使わないマウスオーバーで画像入れ替えリンク

cssを変更するのが面倒な仕様のサイトには便利なやり方。
用意する画像はメインとなるものと半透明にしたpng画像。
##
html:画像のタグは改行しないで続けてかくこと
<a href="#">
  <img src="jpg" alt="メイン画像" /><img src="png" class="imghover" alt="オーバー時用" />
</a>
css:平常時に二つ目の画像が隠れて上にかぶさっているのがマウスオーバー時にあらわれる仕組み。CSSでTooltipやプルダウンメニューを作る時と同じ要領。
img.imghover{
margin-left:-560px;/*画像の幅*/
margin-top:-300px;/*画像の高さ レイアウトによって不要の場合あり*/
display:none;
}
a:hover img.imghover{
display:inline;
}

マウスオーバーで拡大しても文章レイアウトを崩さないスタイル

カーソルを合わせたときにpadding を大きくしその分marginをマイナスで調節。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a:hover{
-moz-transform:scale(1.25);
background:black;
color:white;
margin:-0.25em -0.5em;
padding:0.25em 0.5em;
}

貝殻HTML

空っぽのHTMLマークアップ生成ツールを作りました。

貝殻HTML

クリック時の点線枠を消す Firefox対策

スタイルを書ける前のリンクbefore。クリックした瞬間に点線がでます。テキストリンクだけでなく画像やブロック要素リンクにも点線がでる。
スタイルを書けた後のリンクafter。IEはサポートしていません。
クリックをした瞬間のactive時に出る外枠の点線を消す方法はいくつかあります
* focus{
outline: none;
}
a:focus{
outline: none;
}
a{
-moz-outline-style: none;
}

input, textarea 選択時に使える css

フォーム内を選択で色が変化
input:focus{
background: #f4caff;
}
対応ブラウザ
Firefox, opera, safari, chrome, internet explorer 8

テキスト選択時帯の色を変える selection

文字選択時の帯色を変えるスタイル。safari,chromeとfirefoxのみ対応
::selection {/* Safari and Chrome*/
background: #99CC00;
color:white;
}
::-moz-selection { /* Firefox */
background: #99CC00;
color:white;
}

カテゴリー

広告

最近の記事

便利ツール