HTML/CSS, JavaScript

今回はSVGを使って以下のようなタイマーを作ります。


流れ

以下が作成の流れです。

SVGを使って円を描く
JavaScriptを使って徐々にメーターを減らす表現をする
SVGを使って円を描く

...

JavaScript, コードレビュー, プログラミング入門

エンジニアになると他の人が書いたコードをレビューすることが多々あります。

いつもこうすれば絶対に間違いない、という書き方はありませんが、ある程度チェックするポイントは決まっているので、今のうちに覚えておきましょう。 ...

HTML/CSS, プログラミング入門

今回はこんな模様をHTML/CSSでつくってみましょう。

まずはGridを作成

まずはGridを使って以下のようなものを作ってみましょう。Gridについては他にいくつか記事を書いているので是非読んでみてください。

HTML/CSS, JavaScript, プログラミング入門

プログラミングを始めた人にありがちな悩みとして、何を作ったらいいか分からないということがあると思います。

そこで今回はそんな人のために、課題を書きます。

サービス名は木魚サービス

木魚を鳴らすことができるサービス ...

HTML/CSS, プログラミング入門

Gridでは重なり表現するのが簡単

配置する要素の位置を重なるようにすることで簡単に重なりを表現できます。

<!DOCTYPE html><html lang="ja"><head ...

HTML/CSS, プログラミング入門

Gridを使うとレイアウトが楽しくなります。

今日は以下のようなレイアウトを作成してみました。

まずはGridでレイアウトをつくる

Gridでレイアウトを作成しましょう。

以下のように、 縦３マス横 ...

HTML/CSS, プログラミング入門

以下のようなGridレイアウトがあります。

HTMLとCSSは以下です。

<!DOCTYPE html><html lang="ja"><head> <m ...

HTML/CSS, プログラミング入門

一方向に並べるときはFlexbox、それ以外はGrid

一方向に並べるとは以下のようなことです。

以下は二方向に見えますが、実際は折り返されて複数行になっているだけなので一方向です。

一方でGridを使う場合は二 ...

HTML/CSS, プログラミング入門

CSS Gridを使って要素の重なりを表現してみます。

以下のような感じです。

少しわかりづらいですが、ピンクの要素の下部に黒の要素が重なっています。ピンクが画像、その画像の説明が入ります。

完成形 ...

HTML/CSS, プログラミング入門

以下のようにFlexで横並びにしていたとします。

<div class="flex"> <div>apple</div> <div>banana</div ...