透明のガラス

要素(div等)を透過させるCSS

2017年3月19日

色がついたボックス(=div等)を透過させるCSSです。
近頃あらゆるサイトでよく使われているのを目にします。CSS3の機能がそれだけ一般的に認知されてきたのでしょうね。
デザイン的になんだかモッサリしてていまいちだなー
って時にとりあえず使ってみるとそれだけでオシャレに見えるのでとても便利です。……
回転する風車

CSSのみで画像をその場で回転させたり、大きな円を描くように回転させる方法

2017年3月5日

近年は画像を動的に動かすサイトも以前より少なくなってきました。
時代の流れによってGif画像やFlashが淘汰されてきた影響が大きいのではないかと思われます。
ただそれでもたまに画像を動かしたいって思うことってありますよね。……
背景

レスポンシブWEBデザインで、CSSで画像を背景に設定した際に下方に固定する方法

2017年1月25日

最近の主流はもっぱらレスポンシブWEBデザインです。Googleはモバイルフレンドリーに続き、モバイルファーストインデックス(MFI)の実装を予告したりとこの流れはもう止めることは出来ません。スマホに対応させることが大変重要になってきますし、そうなると管理が楽なレスポンシブWEBデザインが最も適していると言えます。……
2つのスマホの違い

input type="submit"とinput type="button"の違いについて

2017年1月15日

HTMLの勉強をしていると、これとこれってどう違うの?って疑問が次から次へとわいてくるものです。
それらの1つであろうinput type="submit"とinput type="button"の違いについて今回は解説します。……
駅のホーム

formタグの使い方と、最低限指定しなければならない記述

2016年12月27日

formタグは入力フォームから値を送信する際に使用します。
せっかくinput typeタグでラジオボタンやチェックボックスを設置しても、formタグで囲ってあげなければ意味を成しません。……
疑問

input typeタグで、idとnameは同じ名前にしなければいけないの?

2016年12月25日

input typeタグって何やら指定が多くてどれがどの指定をしてるんだろ?って混乱してしまうことありませんか?
その中でも特に混乱してしまい勝ちなのがid(classでもそうです)とnameです。私もよくするのですが、他の人のソースとかを拝見してもidとnameを同じ名前にしている人は非常に多いです。……
解説をする男性

labelタグってどういう時に使うの?そしてその使い方の解説

2016年12月24日

HTMLやCSSにかなり詳しい人でも意外と使い方を知らない、または使ったことがないのがlabelタグです。何も隠そう私も数年前まで存在は勉強した本で知っていても使ったことはありませんでした。そもそもどういう時に使うんだこれ状態でした。……
スマホを触る女性

iframeがスマホで見た時に枠を超えて飛び出しちゃってる時の対処法

2016年7月13日

例えば縦に長い別のURLのページ内容を読み込んだ場合、iframeではスクロールバーが出現して枠内に収めてくれますよね。
でもこれスマホで見るとスクロールバーがなくって、別のURLのページ内容が飛び出しちゃってるんです。……
レスポンシブWEBデザイン

レスポンシブWEBデザインで制作する際にすべき初期設定まとめ

2016年5月27日

2016年5月12日、Googleはモバイルフレンドリーアップデートの第二弾が実施されたことを正式にアナウンスしました。これにより、モバイル対応していないサイトのモバイルの検索順位が下がることになります。……
パソコンとスマホを持ったWEBデザイナー

【簡単実装】CSSのみでtableをレスポンシブ対応させる方法

2016年4月3日

それではtableを凄まじく簡単にレスポンシブ対応させる方法のご紹介です。
なんとわずか2行のCSSのみで実は解決します。……
中央

要素を中央寄せする方法【まとめ】

2015年12月17日

ある要素を中央寄せしようと思った時に、ちょちょいのちょいっとソースを記述するも上手いこと中央寄せされない時ってありませんか?
きっと誰しもが一度は通る道なのではないかと思います。……
テーブル

tableの各セルのwidthを指定するも効かない場合のCSS

2015年9月20日

tableの全体の幅は簡単に指定することが出来ますが、各セルの幅を指定しようとするとあっさり上手くいく時と、いかない時ってありませんか?……
良い方法を思いついた

floatを無駄なくスマートに解除するCSS、clearfix

2015年9月5日

ページをレイアウトする際に今では欠かせないCSS、それはfloatです。
floatなんて一切使わずに全てtableでレイアウトしているサイトも中にはありますが、それらはかなり昔に作られたサイトであることがほとんど……
インデント

2行目以降を1文字下げるCSS

2015年9月1日

箇条書き(・や①やa等)や注意書き(※)が文章の最初に入っている場合、改行時に文章がそれらの記号の下に回り込んでしまいますよね。改行の度に<br>を入れて、次の行の文頭に無理やりスペースを入れても見た目の上では変わらないのですが、スマートじゃないと感じる方もいるのではないでしょうか?……
縦中央

テキストを縦中央に配置する方法

2015年8月27日

テキストを左右中央に配置するのはtext-alignプロパティで簡単に実装出来るのに、テキストを縦中央に配置するなると急に難易度が上がります。
少し調べてみるとvertical-alignプロパティを使えば簡単に実装出来そうじゃんっていう風に思うのですが……
スクロールバー

スクロールバーを常に表示するCSS

2015年8月3日

サイトを閲覧していると、ページによってコンテンツの位置がずれることってありませんか?
おかしいなぁー……何かのバグだろうかって思っていたら、よく見たらスクロールバーが表示されているか否かでずれが生じているようです。……