WEB制作 – WEB-Geek-Site.com

2019/11/27 -CSS

CSSで横並びさせたい時によく使うのが、 display:inline-block。でも、縦のラインがきれいに揃わないで困ることがある。そんな時に、たった1行追加するだけでOKなセレクタがあった …

2019/11/26 -CSS

リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。奇数番目の要素にスタイルを適用する

<span style="font-size: 130%;">li:nth-child(odd){
	background: #ff8080;
}</span>

1

2

3

<span style="font-size: 130%;">li:nth-child(odd){

background: #ff8080;

}</span>

…

2019/11/26 -CSS

floatの解除方法はいくつかありますが、 clearfixを使う方法が１番使い勝手がよいのでメモ。 floatを設定すると、要素が浮くことになり、高さが消失してしまいます。きちんとfloatを解 …

2019/11/26 -CSS

ちょっとした装飾をしたいときに使えるコードを探していたときの備忘録。 2016年の記事なので少し古め。コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット4 …

2019/11/26 -CSS

仕上がりイメージからレイアウトをコーディングするとき、マージンやボーダーなど横幅の計算がややこしくて手こずっていました（涙）そんな悩みを解消してくれるありがた〜いセレクタ「box-sising」！ …

2019/11/11 -CSS

画像の上に文字を重ねる配置した画像の上に文字を重ねたいとき、CSSだけでできちゃいます！下になるアイテムに「position: relative;」= 相対位置を設定します。次に上に重ねるアイテ …

2019/11/08 -CSS

サイトを構築していて、特定のh2だけにクラスを指定して、見た目を変えたいときにどのように設定すればいいのか、わからなかったので調べてみた。誤：　.article h2 .title 正：　.arti …

WEB制作ではhtml & css & phpを触ることが多いですが、コメントアウトの書き方がぞれぞれ違うので忘れないようにメモ。ちなみに、コメントアウトとは、ソースコード側に書いて …

2019/07/09 -WEB制作

コードを打つのに便利なテキストエディタ「ATOM」。サイト制作には欠かせないです。このテキストエディタは、本体をインストールした後、自分の好きな機能を「パッケージ」というカタチで後からどんどん追加 …

2019/05/17 -CSS, WEB制作

オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。自作のSVGアイコンづくりで活用していたけど、 Web-fontも使えるので実装の方法を確認しておく。『IcoMoon』へアクセスし …

「 WEB制作 」 一覧