[css] レスポンシブの時にdiv要素の順番を入れ替える方法
CSSを使って、HTMLサイトのレスポンシブ対応の時にHTML構造のdiv要素の順番を入れ替えるやり方を整理する。 スマホ対応のサイトを作る時、レスポンシブの時だけHTMLのdiv要素の順番が入れ替わってしまう問題を解決...
CSSを使って、HTMLサイトのレスポンシブ対応の時にHTML構造のdiv要素の順番を入れ替えるやり方を整理する。 スマホ対応のサイトを作る時、レスポンシブの時だけHTMLのdiv要素の順番が入れ替わってしまう問題を解決...
横幅がスマホサイズになった時にヘッダーメニューをアイコンに変えて、レスポンシブ用のヘッダーメニューにするやり方を説明する。 完成のイメージ 完成系は下。ある幅までいくと、ヘッダーメニューが3本線のアイコンに変化する。 f...
Flexboxを使って、画像と説明文のセットを横一列に並べるレイアウトの作り方を説明する。 完成形 下記のようなイメージを作る。 HTMLの用意 まずはHTMLを用意する。 「offers」というクラスの中に、「offe...
ウェブサイト作成の際の備忘録。 イメージとしては、下記のようなレイアウトを作成する時。 HTML 下記のように用意。 すると縦のように並ぶ。 CSS 上記の「cozyspace-img」クラスと「cozyspace-me...
ヘッダーを固定させるための備忘録。 最初にヘッダーを作ると、固定されていないので、スクロールした時にヘッダーが消えてしまう。 これをスクロールしても上部に固定させるようにする。 position: fixed;とz-in...
HTMLサイトの見出しの下線デザインで、CSSを使ってタイトルより短い下線を表示させる方法を説明する。 このABOUTの下のボーダーラインを作成する。 HTMLの用意 HTMLはシンプルに<H1>と<p...
ここではHTMLサイト作成時に、ロゴを左に、メニューを右に横並びに配置する基本的なヘッダーの作り方を解説。 コピペで使えるheaderのHTMLとCSSを提供しているウェブサイトもいくつか紹介する。 HTMLでロゴとメニ...
メイン画像を貼り付けようとした時にどうしても余白ができてしまった時の対応をメモ。 起こったこと メイン画像を貼った時に、画面いっぱいに表示させようと思ったのだが、どうしても周りにスペースができてしまった。 解決法は? m...
静的ページ・動的ページについて整理。 静的ページとは 誰が見ても同じ文章が反映されるWebページのこと。 例)Wikipedia、コーポレートサイト 動的ページとは 内容が、見る人やその人がとった行動によって変わってくる...
サーバーとは何か、わかりやすく、なるべく初心者も分かるよう簡単に説明する。 また、Webサーバーを中心に、サーバーの機能を見ていく。 Webサーバーとアプリケーションサーバーの違いや、Webアプリケーションの3層構造につ...