2022年– date –
-
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング Table②
時間割 クリニックやサロンのサイトでよく見かける表です。これがあるのとないのとじゃあ親切さが違いますね。 【テーブルのコーディング Turn編 HTML】 表が複雑でいちいち手で書いていては埒が明かないのでジェネレーターでサクッと作ってしまいましょう... -
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング Table①
テーブル 今回はこのようなテーブル(表)を実装していきます。手強そう! 【テーブルのコーディング base編 HTML】 まずテーブルとは何?という話ですが、簡単に言えば表ですね。タグの意味が分かればなんとなくイメージが掴めるのではないかと思います。 w... -
デイトラ
デイトラWeb制作コース中級編DAY16 ニュース系のコーディング③
ウィジェット フタのついた箱みたいなボックスの形ですね。ウィジェットと呼ばれたりします。 【ニュース系のコーディング Widget編 HTML】 まずは大きく2つのボックスを作ります。「おしらせ」と「ブログ」の2つですね。 その中をさらにheadとbodyに分け... -
デイトラ
デイトラWeb制作コース中級編DAY16 ニュース系のコーディング②
ページネーション 下の方にページネーションがついているタイプです。情報量が多いサイトでよく使われていますね。 【ニュース系のコーディング Pagenation編 HTML】 1行に3つのブロックが並んでいます。前回と同様日付とボタンは固定幅で、タイトルのみ可... -
デイトラ
デイトラWeb制作コース中級編DAY16 ニュース系のコーディング①
ニュース系 これも良く見かけるデザインですね。条件は以下の通りです。 ニュースタイトルのテキストが多くても、改行時にデザイン崩れを起こさないように! ラベルはリンク付き(リンク先は空でOK) ニュースタイトルはリンク(リンク先は空でOK) moreも... -
デイトラ
デイトラWeb制作コース中級編DAY15 ボタン、見出しを自在に作れるようになる②
【ボタン編】 ボタンのバリエーション 次はボタン編です。もはや定型文となってますが、はにわまんさんの記事にまとまっていますのでご一読を。 haniwaman.com button01 まずはプレーンなタイプから。言葉で説明するよりコードを貼った方が早いのでそうし... -
デイトラ
デイトラWeb制作コース中級編DAY15 ボタン、見出しを自在に作れるようになる①
【見出し編】 見出しのバリエーション Web制作で欠かせないパーツである見出しとボタン。長いので2回に分けて書きます。まずは見出しのコーディングノックから。 HTMLはDLしたファイルを使います。(できるだけ自分で準備したほうがいいと思いますが…) head... -
デイトラ
デイトラWeb制作コース中級編DAY14 PerfectPixelを使ったチェック&修正
いわゆるピクパを目指すためのツールですね。はにわまんさんの記事が詳しいのでリンクしておきます。 haniwaman.com 今回は回答例のコードに倣って実装したためほぼ修正するところがなかったです。 -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング⑥
価格表 今回は価格表のパターンです。ビジネスのサイトには欠かせないパーツですね! 【横並びカードのコーディング Price編 HTML】 最初カンプを見た時、表というからテーブルで作るのか?と思いきや、回答例を見たら定義リストで作られていました。ボッ... -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング⑤
ブログカードレイアウトこういう形もよく見かけますね。ひとつは短冊を横にしたような長方形のカード。もうひとつはポラロイドのようなカード。タイル型と呼ばれたりします。ラベルが入る事でそれっぽい感じに仕上がりますね! 【横並びカードのコーディン...