HOME > snownotes snownotes [css] レスポンシブの時にdiv要素の順番を入れ替える方法 CSSを使って、HTMLサイトのレスポンシブ対応の時にHTML構造のdiv要素の順番を入れ替えるやり方を整理する。 スマホ対応のサイトを作る時、レスポンシブの時だけHTMLのdiv要素の順番が入れ替わ ... #flexbox #HTML/CSS #レスポンシブ [html / css] ヘッダーメニューをアイコンに変えてレスポンシブ対応させる 横幅がスマホサイズになった時にヘッダーメニューをアイコンに変えて、レスポンシブ用のヘッダーメニューにするやり方を説明する。 完成のイメージ 完成系は下。ある幅までいくと、ヘッダーメニューが3本線のアイ ... #header #HTML/CSS #レスポンシブ [HTML / CSS] flexで画像や説明文を横並びさせる Flexboxを使って、画像と説明文のセットを横一列に並べるレイアウトの作り方を説明する。 完成形 下記のようなイメージを作る。 HTMLの用意 まずはHTMLを用意する。 「offers」というクラ ... #HTML/CSS #image [HTML/CSS] 写真と文字を左右に配置するレイアウトを作る方法 ウェブサイト作成の際の備忘録。 イメージとしては、下記のようなレイアウトを作成する時。 HTML 下記のように用意。 すると縦のように並ぶ。 CSS 上記の「cozyspace-img」クラスと「co ... #HTML/CSS #image [CSS] ヘッダーを上部に固定する方法 ヘッダーを固定させるための備忘録。 最初にヘッダーを作ると、固定されていないので、スクロールした時にヘッダーが消えてしまう。 これをスクロールしても上部に固定させるようにする。 position: f ... #header #HTML/CSS [CSS]見出しの下線デザインでタイトルより短い下線を表示させる HTMLサイトの見出しの下線デザインで、CSSを使ってタイトルより短い下線を表示させる方法を説明する。 このABOUTの下のボーダーラインを作成する。 HTMLの用意 HTMLはシンプルに<H1 ... #HTML/CSS [CSS]ロゴを左に、メニューを右に横並びに配置するヘッダーを作成 ここではHTMLサイト作成時に、ロゴを左に、メニューを右に横並びに配置する基本的なヘッダーの作り方を解説。 コピペで使えるheaderのHTMLとCSSを提供しているウェブサイトもいくつか紹介する。 ... #header #HTML/CSS [CSS] background-size: cover;でも画像周りに余白ができた時の対応 メイン画像を貼り付けようとした時にどうしても余白ができてしまった時の対応をメモ。 起こったこと メイン画像を貼った時に、画面いっぱいに表示させようと思ったのだが、どうしても周りにスペースができてしまっ ... #HTML/CSS #image #user agent stylesheet [Java / Eclipse] MacでEclipseを使って "Hello World"を出力する 早速Eclipseを使って "Hello World"を出してみる。 今回はMacを使用。 環境設定を整えていない方はこちらから。 [Java / Eclipse] MacでJavaの開発環境を整える ... #Eclipse #Mac [DB / MySQL] データベースを扱う基本SQL文一覧とSQL文の書き方 ここでは、データベースを操作するためのデータベース言語、SQL文の基本的な書き方と、SQL文の一覧について説明する。 基本的なSQL文「INSERT, SELECT, UPDATE, DELETE」の ... #Database #MySQL #SQL « Prev 1 … 20 21 22 23 24 … 32 Next »
