はるか

はるか

Gridレイアウトの解説（２）＿実例編

前回の記事に続き、今回の記事では、Gridの項目属性から説明したいと思います。 「華容道」というゲームがありまして、あのアプリの最初画面にあった画像内容の配置をGridで再現しようと思います。 下記のコードでは、一番外側の<div>要素がコンテナで、内側の<div>要素がアイテムになります。登場人物はアイテムとして表現します。 <div id="container"> <div class="item item1" style="background-color

はるか

    • Gridレイアウトの解説（1）

      グリッドは最も強力なCSSレイアウトソリューションです。 ウェブページをグリッド状に分割し、それを自由に組み合わせることで様々なレイアウトを実現します。 これまで複雑なCSSフレームワークでしか実現できなかったことが、ブラウザに組み込まれるようになったのです。下記のブラウザに対応しています。 グリッドレイアウトは、コンテナ内の複数のアイテムの位置を指定できる点で、Flexレイアウトと類似しているところがあります。 しかし、両者には重要な違いもあります。   Flexレイアウ

      はるか

      • JavaScript で入力フォームのバリデーションの実装

        １、バリデーション（入力チェック）とは   フォームバリデーションは、JavaScriptで利用可能な高度なオプションの1つです。 Webページでサーバーに送信するHTMLフォームの入力データを、JavaScriptで検証することができます。 入力内容が必要なものと一致しない場合は、ページ内にその旨を表示します。 これにより、IOの頻度を減らし、サーバーと頻繁にやり取りする必要がないため、効率を上げることができるのです。 バリデーション( validation )は直訳する

        はるか

        • Flexboxレイアウトの解説

          従来のレイアウト手法は、display属性＋position属性＋float属性に依存しています。特殊なレイアウトの場合、非常に不便です。CSSによるレイアウトはウェブサイト制作の基本スキルであるため、あらゆる手法を正しく理解しておく必要があります。この記事では、flexboxの基本知識はもちろん、よく使う設定の意味や使い方なども解説しています。これを読めば、flexboxの活用方法を掴めることでしょう。   1、flexboxの構造・基本知識   CSS flexboxは、

          はるか

          JavaScriptでサムネイル画像をローディング画像に切り替え

          今回の課題にJavaScriptでサムネイル画像をローディング画像に切り替える実装方法を紹介したいと思います。実装手順通りやっていきます。   １、フォルダーを配置 ２、HTMLファイルを作成 ３、CSSで画像を装飾 ４、JavaScriptで画像をクリックするときのメソッドを作成   フォルダーを配置 「sample」フォルダーを新規作成します。 その中に「css」「img」「js」フォルダーとHTMLファイルを新規作成します。(img-1) cssファイル（styl

          はるか

          JavaScriptでサムネイル画像をローディング画像に切り替え

          はるか

          CSSでテキストを改行する方法をまとめ

          HTMLで改行したいとき、普段は段落タグ<p>、改行タグ<br>を使うことが多いです。 <p>を使う改行例 コードは下記の通り。(Code-1-1) <p>適度な緊張は、人の脳活性化させる力があります。</p><p>緊張した経験は、どんどん人に話そう。</p><p>笑いながら話すことで、心は軽くなり、メンタルも強くなる。</p> ブラウザで確認すると、以下のようになります。 <br>を使う改行例 コードは下記の通り。(Code-2-1) <p> 適度な緊張は、人

          はるか

          CSSでテキストを改行する方法をまとめ

          はるか

          HTML/CSSで画像にテキストを回り込ませる方法

          ホームページを作成するとき、「テキストを画像に回り込むように配置する」というシーンがよくあった。HTML／CSSでこのレイアウトを実現できる方法はいくつがありますので、本記事で二つの方法を紹介します。   １、画像属性で実現する 　　 実際に画像属性プロパティを使ってみます。   コードは下記の通り。 ブラウザで確認すると、以下のようになります。 使用した属性の説明   align属性   テキストを画像に回り込むように配置するために、今回のサンプルコードでは画像属性の”

          はるか

          HTML/CSSで画像にテキストを回り込ませる方法

          はるか