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

例えば以下のようなHTML/CSSがあり、topとleftを使って黄色の四角をいい感じの位置に移動させたいとします。

<!DOCTYPE html><html lang="ja">&l ...

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

今回はフロントエンドエンジニアを目指す場合に、是非学んでおきたいことをご紹介します。

HTML/CSS

まずはHTML/CSSです。これができないと始まらないので、しっかり学習してやりたいことをできるようにしておきましょう。 ...

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

HTML/CSSで以下のような時計盤をつくってみます。

タスク一覧円を描く
円の縁を描く
12を描く
1を描く
２から11を描く
円を描く

divで正方形を作り、border-radius: 5 ...

HTML/CSS, JavaScript

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


流れ

以下が作成の流れです。

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

...

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を使う場合は二 ...