-
デイトラ
デイトラWeb制作コース中級編DAY19 フッターのコーディング①
フッターのカンプ ヘッダーやメインビジュアルといったファーストビューはもちろん大切ですが、フッターも情報がギュッと詰まった重要なパーツですね!しっかり作り込んでいきましょう。条件は以下の通りです。 全体的にリンクの設定は不要スマホ時は縦並... -
デイトラ
デイトラWeb制作コース中級編DAY18 お問い合わせフォームのコーディング②
ファイルが添付できるフォーム ファイルが添付できるタイプのフォームです。今回は少しですがjQueryも出てくるので難易度が上がってます。ファイルを選択ボタンのみ別に記事を書きましたのでそちらも併せてご覧ください。 https://nagimio.com/input-type-... -
デイトラ
デイトラWeb制作コース学習記録番外編 ファイル選択ボタンをbutton要素でスタイリング
ここでハマってしまいました。余裕がある人向けの課題で、無理にこなす必要はありませんが全部実践すると決めているのでやります。ベースはデイトラの回答例コードを使用しています。 手始めに「input type file label」「input type file デザイン」「inp... -
デイトラ
デイトラWeb制作コース中級編DAY18 お問い合わせフォームのコーディング①
お問い合わせフォーム ビジネスにも個人ページにもよく使われるお問い合わせフォームです。今回はphpは使わず、外側のみ作ります。 【お問い合わせフォームのコーディングBase編 HTML】 複雑になるため画像を用意しました。 更に各フォームの部品の要素に... -
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング iframe②
YouTube埋め込み YouTube埋め込みもよく使うパーツですね。今回は前回のコードを少し変えるだけなので簡単です。 【iframe埋め込みのコーディング YouTube編 HTML】 前回のファイルのmapの部分をyoutubeに変えるだけで完了です。定義リストの部分は消しま... -
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング iframe①
GoogleMapの埋め込み 地図はお店のサイト、コーポレートサイトなどに欠かせないパーツですね!アスペクト比固定ボックスと呼ばれたりしてよく使うのでしっかりおさえていきましょう。スニペット登録しておくといいですね。条件は以下の通りです。 埋め込む... -
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング Table③
ボーダーの薄いテーブル 今回のカンプのスクリーンショットです。ボーダーが薄いと開放的な印象になりますね。 【テーブルのコーディング No Border編 HTML】 テーブル図解 今回もベースはジェネレータでサクッと作ってしまいましょう! https://tabletag.... -
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング Table②
時間割 クリニックやサロンのサイトでよく見かける表です。これがあるのとないのとじゃあ親切さが違いますね。 【テーブルのコーディング Turn編 HTML】 表が複雑でいちいち手で書いていては埒が明かないのでジェネレーターでサクッと作ってしまいましょう... -
デイトラ
デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング Table①
テーブル 今回はこのようなテーブル(表)を実装していきます。手強そう! 【テーブルのコーディング base編 HTML】 まずテーブルとは何?という話ですが、簡単に言えば表ですね。タグの意味が分かればなんとなくイメージが掴めるのではないかと思います。 w... -
デイトラ
デイトラWeb制作コース中級編DAY16 ニュース系のコーディング③
ウィジェット フタのついた箱みたいなボックスの形ですね。ウィジェットと呼ばれたりします。 【ニュース系のコーディング Widget編 HTML】 まずは大きく2つのボックスを作ります。「おしらせ」と「ブログ」の2つですね。 その中をさらにheadとbodyに分け...