HTML＆CSS自主練｜メモ｜サンプルページ『亀井野酒造』を作った際の参考サイトなど
サンプルページ『亀井野酒造』を作りましたサンプルページ 亀井野酒造HTML＆CSS自主練：サンプルページ『亀井野酒造』 - アラフォー専業主婦が緩くプログラミングを学ぶブログ手順としてはざっくり下記の流れです 何を作るか決める（山梨にある酒造って事にする） 情報収集（酒蔵のサイト巡り） メインターゲットを考える（セカンドライフを楽しむ世代） イ...
categories別の記事
HTML&CSS
HTML＆CSS自主練｜サンプルページ『亀井野酒造』
sample：亀井野酒造山梨にある酒蔵と言う設定で架空のサイトのトップページを作りましたhttps://rakuda-san-desu.github.io/sample2018-10-09/レスポンシブにも対応気になることはまだまだ多いけど修正し続けると収拾がつかなくなりそうなので一先ず公開。仮名の酒造。ですよ。えぇ。勿論アラフォーギャグですわよ🐫
HTML&CSS自主練｜メモ｜マーク付きのボタン
上手く出来なかったマーク付きのボタン見本のボタンこういうヤツ。シンプルで素敵です。因みにhoverで反転です。マークがなければMOREをセンタリングでOKだけどマークが入りますよね。スペースで位置調整は卒業したいしなぁ。と、悩みました。最初に考えたボタン＞の部分はFontAwesomeからリンクで。ちょっと太いけどとりあえず。と言った感じで。これをどう...
HTML&CSS自主練｜メモ｜サイト模写とflex boxと半円形とmarginのマイナス数値
サイト模写始めましたサイト作成の練習としてサイト模写をすることにしました。「コーディング 模写 おすすめ」とかでググりましてこちらのサイトを模写することにpas-pol.jp自分ルールとして キャプチャ画像からコードを考えて書く なるべく検証やソースを見ない でもわからなかったら覗く hoverなど挙動もマネする 大体あってればOKにするまた...
HTML＆CSS書籍｜メモ｜targetとinheritとfirst-child
作りながら学ぶHTML/CSSデザインの教科書6章、リンク設定に関しての諸々。リンクの設定自体と言うより、いろんなナビゲーションの作り方・考え方について。大切なのは閲覧者がいかに見やすく、使いやすいデザインであるか。と、言う事。カッコイイ！素敵！！ってなるのはもちろん大切だけど操作しづらいと疲れちゃうもんね。閲覧者がいつでも簡単に ページ内の現在地を...
HTML&CSS書籍｜メモ｜float解除とtimeタグとマークアップと言うもの
作りながら学ぶHTML/CSSデザインの教科書本日はサクサクと5章を。ページヘッダーやページフッダーの追加と2カラムのレイアウトなどカラムデザインと言えばfloatfloatの不具合回避としてProgateでは空のdivを挿入してfloat解除する方法を教わりましたがこちらでは疑似要素を使うやり方を。しかし段組みはフレックスボックスでやるようにしたいの...
HTML＆CSS書籍｜メモ｜line-heightと画像関連タグ
作りながら学ぶHTML/CSSデザインの教科書前回は1~2章準備とメインの部分のマークアップ。今回は3~4章。cssによる装飾と画像の挿入です。画像が入るとにぎやかになりますね。新しい知識もいくつか。line-heightキレイに見せるためには丁寧にデザインしましょう。と、言う事で今までそこまで気にしていなかったline-heightにもテクニックが。...
HTML＆CSS書籍｜メモ｜セクションタグ
作りながら学ぶHTML/CSSデザインの教科書WEBデザイン＆コーディングの勉強にこちらの本を購入しました。HTML＆CSSの初歩から、一つのサイトを構築して公開するまでが説明されている模様です。早速知らないタグが始めのうちはサクサクと。と、思いきや早速知らないタグに遭遇。セクションタグセクションタグの種類article（(~についての）記事）そのまと...
HTML＆CSS 道場コース 上級編 ｜メモ｜レスポンシブデザインとブラウザ幅による表示非表示の切り替え
HTML&CSS道場コース上級編勢い勇んで道場コースの上級編をやろうとしたら最初からさっぱりわからなくて学習コースをやり直したらくだ🐫です。いや、びっくりした。結局「なにこれ分からん」ってなったのはヘッダー部分の各コンテンツへのリンクを、モバイルサイズの時はアイコンマークにするっていう部分位で後はソコソコすんなり。（モバイルだけ整えてタブレット...
HTML&CSS 道場コース中級編｜メモ｜メッセージ部分とフッター文字の太さ
HTML&CSS道場コース中級終了今日はなんだか調子がいい（気がする）らくだ🐫です。道場コース中級、メッセージ部分とフッターはサクサク終了できました。とは言えちょっとくらいは躓くよね。凡ミス注意思ったようにスタイルが適用されないぞ？と思うとクラス名の指定を間違えていたりmessage-rapperに指定したいのにmessageだけにしていたりc...
HTML＆CSS 道場コース 中級編レッスン部分｜メモ｜要素を重ねる（8/4加筆）
HTML&CSS道場コース中級時間配分がヘタクソならくだ🐫です。道場コース中級のレッスン部分をまとめようと思うのですが連休を挟んじゃったので記憶が曖昧です。曖昧な中でも覚えている事はそれだけ印象深かったと言う事で（？）覚えていることをまとめたいと思います。とにかく悩みまくったレッスン部分で一番苦しんだのはパーツそれぞれのレイアウトですね。学習コ...
HTML＆CSS 道場コース 中級編トップとフヘッダー｜メモ｜アニメーションと要素の固定と角の丸め
HTML&CSS道場コース中級編今日は（今日も）集中力の無いらくだ🐫です昨日の夕方～今日の午前中に学習コース上級編をやりまして道場コースの中級編に入りました。上級編の事は道場コースの時にでも。最初はスムーズトップ（背景画像が付いている部分）はさほど悩まず。Font Awesomeのクラスの指定方法だけ見直しました見る力も備えたいヘッダー部分は指...
HTML＆CSS 学習コース 中級編 2週目｜メモ｜インライン要素の変更，クリック時の変化
7/30修正HTML&CSS学習コース中級編2週目指示に従うだけなので2週目だし、指示通りにタグ打ちするだけなので基本サクサクと。2週目なのでスライドは飛ばして指示だけ見て書く様にしたんだけど、「marginを15pxに」の様に超具体的な指示じゃなくて「aをブロック要素へ」のような指示の場合「あれ？プロパティとかどうするんだっけ？」となりスライ...
HTML＆CSS 道場コース 初級編 ｜メモ｜問い合わせフォーム
HTML&CSS道場コース初級編勢いに乗ってやってみました今日はやりたい事だけやろうの日。なのでらくだ🐫はProgateを集中してやることにしました。HTML&CSSの学習コース中級が終わったので、勢いに乗って道場コースの初級編へ。「学習コースの時どうやって作ったんだっけ？」ではなく「どうしたら仕様書（＆見本)を再現できるかな？」と考え...
HTML＆CSS 学習コース 中級編
HTML&CSS中級編一昨日の夜、お小遣いをもらったらくだ🐫は早速Progateに課金しましてHTML&CSSの中級編に進みました。とは言ってもパソを触れない時間になっていたのでスマホから。スマホからだと良くも悪くもゲーム感覚でサクサク進みますね。ただ、結構感覚で入力しちゃってあんまり頭に入ってない感じ。（PCからなら頭に入るかのような...
HTML&CSS自主練｜メモ｜ハイパーリンクの続き（8/4加筆修正アリ）
昼間の続き相対パスの指定方法について、自分なりに纏めた図解（？同階層への指定 ./上階層への指定 ../同階層への指定「./」は省略する事もできるけど理由がない限りは記載した方がいいとこの事（ブラウザによって作動しない可能性？）8/4加筆（間違いがあったら指摘していただけるとありがたいです）（これにかかわらず突っ込み大歓迎です）（8/4修正 画像表示に...
HTML&CSS自主練｜メモ｜ハイパーリンク
引き続き練習問題 基礎 | Web基礎練習問題サイトこちらのサイトのHTML基礎問題の続き。ハイパーリンクのまとめ表示させる文字パス＝path＝道・道のりちなみにhrefは「エイチレフ」って読むのがいいそうですよ。発音的に。意味については諸説あるっぽいけどref＝reference＝参照する意味どころか読み方もわからなかったhrefと分かり合えた気がし...
HTML&CSS自主練｜メモ｜見出しと改行とリスト
らくだ🐫、お小遣いもらったらProgateの有料講座始めるんだ。ひとまずサイトを公開できましたのでネットで基礎的な問題集を探してやっております。練習問題 基礎 | Web基礎練習問題サイトひとまずこちらのHTML基礎問題を昨日・今日でやりました。で、Progateで出てきていなかった事のメモ＜見出しについて＞デザイン的にしか見ていなかったけど、SEOと...
HTML&CSS自主練｜サイト作成その4 サイト公開
らくだ🐫からって暑いよ。むしろ熱いのは苦手です。はい。さて、今日も今日とて自サイト作成。で、勢いに乗って公開してみました。その昔「私のホームページへようこそ」とかやっていた頃は契約していたプロバイダのサービスを使ったり無料サーバーを借りたりしていたものですが今回は他の事にも使えそうだし覚えたら便利そうと言うことでProgateを見ながらGitHub経由...
HTML&CSS自主練｜サイト作成その3 要素のセンタリング
毎日暑いですね。極力リビングから出たくないらくだ🐫です。今日も今日とて自サイト作成です。今ある知識で作るので、だんだんレベルアップしていきたい。ひとまず形になったら公開しようと思っています。さて、前回悩んでいたヘッダー部分をセンタリングしたデザイン。こんな感じ↓にしたい訳です。ロゴの<div>のセンタリングはclassにmargin: 0 ...
HTML&CSS自主練｜サイト作成その2
今日は自サイト作りの続き。続きと言うか、修正？アレンジ？ヘッダー部分をもう少しすっきりさせたくていじってみました。いじりながら、タグの動きの確認やら。前回、イメージサイズの指定がうまくいかなくて「なんで？！基本中の基本じゃん？！？！悩む事じゃないじゃん！！！！」と、なっていた訳ですがエディタのプレビューがうまく動いていなかっただけでchromeさんから...
HTML&CSS自主練｜サイト作成その１
支払いの関係でProgateへの課金は来週からにする事にしたらくだ🐫です。今日は自主練として①目についたサイトのソースから構造やタグの動きを探る②自分のサイトの構想と考えていたのだけど①の方はブログとかが多くて、単純なHTMLで構築されたサイトが見つかりにくく断念。で、②に取り掛かりました。HTMLは少し触ったことがあったので、そこまで詰まることもなく...
HTML＆CSS 学習コース 初級編 2週目
Progate HTML&CSS学習コースの初級編、2週目は1.5ｈほどで終了しました。指示通り書いていくだけだからね。うん。で、中級編に行くか道場コースに行くか迷って、とりあえず申し込むかと思ったらお小遣いが足りませんでした！わはは。ネットの支払いカードがデビットカードなので、口座に残高無いと使えないんだよね。使いすぎなくていいけどね。何かの...
HTML&CSS 学習コース 初級編 1周目
Progate HTML & CSS 学習コース 初級編を終了しました。3ｈ50ｍとの事。（これ↑、学習の目安の時間であって、実際にかかった時間じゃないのね。ハズカシ。）指示に従って入力していくだけなのでそうそう詰まることもないけどブラインドタッチは出来ません。タグはほとんど覚えていません。英語は赤点でした。そんな私なので、タイプも遅いしタグは...