記事一覧
Gridレイアウトの解説（２）＿実例編
前回の記事に続き、今回の記事では、Gridの項目属性から説明したいと思います。
「華容道」というゲームがありまして、あのアプリの最初画面にあった画像内容の配置をGridで再現しようと思います。
下記のコードでは、一番外側の<div>要素がコンテナで、内側の<div>要素がアイテムになります。登場人物はアイテムとして表現します。
<div id="container"> <div cl
Gridレイアウトの解説（1）
グリッドは最も強力なCSSレイアウトソリューションです。
ウェブページをグリッド状に分割し、それを自由に組み合わせることで様々なレイアウトを実現します。 これまで複雑なCSSフレームワークでしか実現できなかったことが、ブラウザに組み込まれるようになったのです。下記のブラウザに対応しています。
グリッドレイアウトは、コンテナ内の複数のアイテムの位置を指定できる点で、Flexレイアウトと類似している
JavaScript で入力フォームのバリデーションの実装
１、バリデーション（入力チェック）とは
フォームバリデーションは、JavaScriptで利用可能な高度なオプションの1つです。 Webページでサーバーに送信するHTMLフォームの入力データを、JavaScriptで検証することができます。 入力内容が必要なものと一致しない場合は、ページ内にその旨を表示します。 これにより、IOの頻度を減らし、サーバーと頻繁にやり取りする必要がないため、効率を上
Flexboxレイアウトの解説
従来のレイアウト手法は、display属性＋position属性＋float属性に依存しています。特殊なレイアウトの場合、非常に不便です。CSSによるレイアウトはウェブサイト制作の基本スキルであるため、あらゆる手法を正しく理解しておく必要があります。この記事では、flexboxの基本知識はもちろん、よく使う設定の意味や使い方なども解説しています。これを読めば、flexboxの活用方法を掴めることで
もっとみるCSSでテキストを改行する方法をまとめ
HTMLで改行したいとき、普段は段落タグ<p>、改行タグ<br>を使うことが多いです。
<p>を使う改行例
コードは下記の通り。(Code-1-1)
<p>適度な緊張は、人の脳活性化させる力があります。</p><p>緊張した経験は、どんどん人に話そう。</p><p>笑いながら話すことで、心は軽くなり、メンタルも強くなる。</p>
ブラウザで確認すると、以下のようになります。
<br>を使う
HTML/CSSで画像にテキストを回り込ませる方法
ホームページを作成するとき、「テキストを画像に回り込むように配置する」というシーンがよくあった。HTML／CSSでこのレイアウトを実現できる方法はいくつがありますので、本記事で二つの方法を紹介します。
１、画像属性で実現する
実際に画像属性プロパティを使ってみます。
コードは下記の通り。
ブラウザで確認すると、以下のようになります。
使用した属性の説明
align属性
テ