情報処理実習Ⅱ 2023年度後期(2年)

今日、やったこと 横に並べる 今日のホワイトボード 普通は縦にならぶ とくになにも指定がなければ、各タグはHTMLファイルの上から順に縦に並びます。  図　ふつうは縦に並ぶ float1.html style1.css 3つの<div>タグは縦に並んで表示されます。 図　ふつうは縦に並ぶ 左右横並びに表示 左右横並びに表示するには、横並びの要素に float:left を指定します。 図　float:left;で横並び 先ほどのfloat1.htmlに対して、以下のstyle2.cssを適用します。 style2.css 2つ目の<div>タグにfloat:left;が設定されるため、 2つ目の<div>タグ(緑色)は赤色や青色の<div>タグより1段上に浮き上がる 3つ目の<div>タグ(青色)は浮き上がった2つ目の<div>タグ(緑色)の下に潜り込む のように表示されます。 図　2つ目の<div>タグのfloat:left;設定 さらに以下のstyle3.cssを適用します。 style3.css 2つ目、3つ目の<div>タグにfloat:left;が指定されているため、この２つの<div>タグが横並びで表示されます。 ...

今日、やったこと リンク 今日のホワイトボード リンク リンクとはクリックすると別ページを表示したり、同じページの別の場所を表示する仕組み。 <a>タグで作ります。<a>タグのhref属性で移動先を指定します。 別ページに移動する場合 <a>タグのhref属性に移動先ファイルを指定します。 図　<a>タグで別ページへ移動 同じページ内で移動する場合 まず、移動先にIDを指定します。 <a>タグのhref属性には移動先のIDを指定します。IDの指定は　 #ID名 　です。 図　<a>タグで同じページ内を移動 target属性 リンクをクリックして移動する際、移動先ページを同じタブに表示するか、新規タブに表示するかコントロールできる。 target属性値 表示 _blank 新規タブに表示 _self デフォルト。同じタブに表示 練習問題 リンクの課題ですが、テーブルも使っています。 図　練習問題　ヒント 正解例をあげておきます。 1ページ目(index.html) 写真は表形式(2行x3列)で表示。 リンクの表示内容を写真にすることで、写真をクリックすると各犬の説明ページへ移動。 秋田犬のページ(akita.html) index.htmlにて秋田犬の写真をクリックすると表示される秋田犬のページ。 説明は横方向に2セルを結合したセル。colspan属性で結合を指定。 甲斐犬のページ(kai.html) index.htmlにて甲斐犬の写真をクリック...

今日、やったこと 箇条書き（おさらい＋練習問題） 今日のホワイトボード 箇条書きのおさらい＋練習問題 昨年末の「箇条書き」のおさらいを兼ねて練習問題をやりました。 練習１ ポイントは<h1>タグ、<ul>タグのデザイン設定。 <style>タグのなかで<h1>タグと<ul>タグのデザイン設定をしています。 正解例はこちら。 練習2 ポイントは箇条書きの中にさらに箇条書きがあるところ。 また、3つある<ul>タグのマーカー設定を別々にする(数字、白丸)ために、以下をしています。  <ul>タグにそれぞれクラス(ul_decimal、ul_circle)を設定 <style>タグで各クラス(ul_decimal、ul_circle)のlist-style-typeを設定 図　練習2　ヒント 正解例はこちら。 次回は 「リンク」をします。