Qiita - CSS3タグが付けられた新着投稿

素のjavascriptでCSS操作

SN

5/19 15:08



背景

以前作った

cssのみで立体な球体を表現

目で追従するやつをriotで実装

という記事を合わせれば、光の当たる点を動かせるのかと思い立ったので実装。

ついでに素のjavascriptのみで実装し...

本当に使えるnth-childまとめ

SN

5/18 02:50



はじめに

数学に弱いコーダーはnが入って来ると計算がわからなくなります。

だったら最初から覚えずによく使うものはメモするといいです。

特にX〜Yまで、という指定はよく使うと思います。

なるべく指...

[CSS] absolute で 親要素(parent)との相対距離で位置を調整したい時に見るべきところ

SN

5/18 00:40

absolute を使って ページからの絶対距離ではなく、親要素との相対距離で位置を調整したいときがあります。

absolute 以外の position を使っても相対位置の距離で調整できるんですが、 absolute 以外では、 移...

CSSでチラつき表現

SN

5/13 00:21



背景

わざとちらつかせて古いテレビ的な表現とかかっこいいですよね。

CSSのみでざっくり作ってみました。


結論

こんな感じです。

See the Pen tiratuki tv by hashito (@hashito) on CodePen.




解...

cssのみで立体な球体を表現

SN

5/12 22:54



背景

娘と公園に行って、木になっていた赤い実がキレイなのでCSSで表現してみました。


結論

このようになりました。

See the Pen akai mi by hashito (@hashito) on CodePen.




説明

CSSのmi1クラスに...

目で追従するやつをriotで実装

SN

5/11 01:26



背景

何やら入力を目で追従するようなサイトが流行っているので作ってみようと思った。


結論

こうなった



リンクは下記

http://hasito.com/kuma/


実装


メイン部分

コード全体は長いけど主は...

レスポンシブデザインにしたはずが実機だとPCと同じ表示だった

SN

5/10 17:24



やってたこと

CSSに@media screen and (max-width: 600px)みたいなことを書いて、スマホ用のデザインを組む。

開発中はウィンドウを小さくして確認しつつ進めて、良い感じになったらサーバにデプロイして...

高さが変わる要素を天地中央揃え

SN

5/10 11:47

ダイアログの様な中身によって高さが変わる要素を、CSSで画面中央に配置する。

transformプロパティのtlanslateを%単位で指定すると、その要素の幅・高さが基準となるので、-50%を指定することにより要素の基...

できればCSS超上級者?左右で背景色が異なる複雑なレイアウト

SN

5/10 06:58

こんにちは。CSSテクニックをまとめた本を書くために知見を集めている @takamosoo です。今回とあるWebサイトで少し複雑なレイアウトを作成することがありました。そのレイアウトが簡単に実装できそうに見えて少...

0.5pxのborder

SN

5/7 11:40

Retinaディスプレイではborderに0.5pxを指定できるが、MacのChromeなどでは小数点単位での指定は無視されてしまう。

通常は下記で示されている様に、デバイスやブラウザに応じて表示を変える実装が良い。
...

0.5pxのborder

SN

5/7 11:40

Retinaディスプレイではborderに0.5pxを指定できるが、MacのChromeなどでは小数点単位での指定は無視されてしまう。

通常は下記で示されている様に、デバイスやブラウザに応じて表示を変える実装が良い。
...

プラグインなしで作るSVGアニメーション その2

SN

5/1 23:00

以前、パスに沿って描写されていくSVGアニメーションを、

プラグインなしで実装しました。

プラグインなしで作るSVGアニメーション その1

今度はスクロールで描写するようにしてみます!

See the Pen...

角丸でもゴーストボタンでも大丈夫!ボーダーにグラデーションをかける方法

SN

5/1 00:51

ボーダーにグラデーションをかけるには、

色々な実装方法がありますが、

角丸やゴーストボタンにするにはちょっとした注意が必要です。

今回は、角丸で背景を設定しないゴーストボタンにも対応した、

フルスクリーンページ作成の復習

SN

4/29 17:56



作成したもの

 こちらのWebページが今回作成したもの。


復習


・width

 ボックスの幅を指定する。レスポンシブデザイン対応のWebサイトデザインでは%で指定し、端末のサイズに合わせて伸縮するように記...

Scssをリファクタリングした記録

SN

4/29 14:22



概要

とあるシステムのスタイルシートをリファクタリングした記録です。

基本的には、W3CのCSSチェックツール に忠実に記述したもので、シンタックスエラーがないものをリファクタリングしました。


環境


...

初めてWebページを作成して

SN

4/28 20:11

 # 前置き

 プログラミングの勉強を始めて3か月が経ったので、練習も兼ねて大体1ヶ月ぐらいの時間を用意して、初めてWebページを作成しました。アップロードはGitHubを使用。

 # 完成するのに時間がかかった...

事務系で役立つかもしれないJavaScript - Excel編

SN

4/26 12:20

初投稿です。

ちゃんと書けたかな?


概要

VBAェ...

Excel表をイマドキなJavaScriptで何とかする為の、WebApplicationの自分用テンプレートです。


経緯

事務作業でExcelをこねくり回す時、今更VBA.....

cssで背景が透けて見えるいい感じのカードを作ろう

SN

4/25 17:14



背景が透けて見えるいい感じのカード とは



引用 from dribbble

背景が透けて見えています。


実装しましょう


とりあえず、原型を作る




html
<div class="container">
<div class="card...

【CSS小ネタ】liタグ4行以上の場合に非表示して「…」を表示する

SN

4/25 09:44

というのを、JavaScriptを使うのも面倒だなと思い、CSSだけで実現しました。

CSSのコメントで解説書きました~。

/*とりあえず、無条件で3番目の要素の後に…を挿入する*/
ul > li:nth-child(3)::after{
...

CSS 基礎 上下左右 中央揃え 4つの方法

SN

4/21 10:26



したいこと

CSSで上下左右中央揃え

環境

 ∟Slim

 ∟Sass

※検証のためSassのコードは省略しないで書く


4つの方法


postion + -margin



.wrapper
.box



.wrapper01 {
width: 400px;
...

flexboxで横並べ+折り返しによる余り要素について考えてみる

SN

4/20 08:23

下記のように、2つを横に並べて、3つ目は折り返して…のようなものがあったとします。



これが、もしも奇数だった場合は、どうするべきでしょうか。

一覧の実装の最後のページなど、個数が不確定の場合に起...

【CSS】Focus時のInputをいい感じにする

SN

4/18 18:07



完成品イメージ

InputにFocusした時に↓のように下線が広がるようにします。



CSSだけでつくれちゃいます。


サンプルコード


HTML


index.html
<input class="input">
<div class ="underline"&...

スマホアプリでよく見る、ページ上部のメニュー

SN

4/14 19:54




twitterをはじめ多くのアプリに採用されているメニューです。
複雑なことをやるとAndroid等で不具合が出やすいので、フリック切り替えなどは諦めています。



デモ

jsbin


html

<!-- とりあえずさくっ...

CSSフレームワークBulmaのModifiersとは

SN

4/12 15:59



本記事の内容

モダンなCSSフレームワークBULMAの「Modifiers」について解説します。

BULMAの概要記事については、こちらの記事を参照して下さい。


Modifiers

Modifiersとは、Bulmaが用意した、HTML要素の...

CSSフレームワークBulmaの概要をまとめてみた

SN

4/12 10:22




本記事の内容

簡単な文法で、モダンなWebデザインが構築可能なBULMAの概要をまとめまてみました。

以下の内容は、公式HPのOverviewをまとめたものです。


BULMAとは

CSS3標準のFlexboxをベースにした、...

【CSS】CSSでうにうにした、まん丸を作ってみる

SN

4/12 05:07



はじめに

うにうにしたまん丸ってどうやって作ってますか?

こういうやつです!



そもそも、そんな機会ないんじゃないかという話は置いてといて、

SVGを使ったり、canvasを使ったり色々あると思いま...

【CSS】画面にペタッとついてくるやつを作ってみる

SN

4/12 05:03



はじめに

まず「ぺたっとついてくるやつ」という日本語は無視してもらって、

今回作りたいのは、こういうやつです!



主にheaderとかsidebarで使われたりしていますよね。

sticky〇〇なんて言われて...

text-transformで文頭だけ大文字にするときのCSSメモ

SN

4/11 15:00

英文の先頭だけ大文字で、他は小文字にする場合のCSSでのやり方を質問されて、

text-transform で一発やんけと思ったけど、そうでも無く考えさせられたのでメモ。 (後半ポエム)


text-transform とは

HTML...

スクロールするとナビゲーション固定(フッターまでスクロールすると消えるタイプ・開閉式のコンテンツ含む)

SN

4/10 18:53

ナビゲーションを固定するtipsはよく見かけますが、

開閉するコンテンツが含まれる場合、documentの高さをどうやって再取得したら良いんだろう、、、

と少しハマってしまったので、メモメモ。


sample.h...

CSS3の「flexbox」でフッターをページ最下部に固定して浮くのを防ぐ

SN

4/4 17:06

コンテンツの縦幅が狭い際、フッターが画面最下部から浮いてしまいますが、flexboxを使って最下部に固定する方法を見つけたのでメモします。


hmtl
<body>
<div id="wrapper">
<main>メ...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で