HTML＆CSS自主練｜メモ｜サンプルページ『亀井野酒造』を作った際の参考サイトなど
サンプルページ『亀井野酒造』を作りましたサンプルページ 亀井野酒造HTML＆CSS自主練：サンプルページ『亀井野酒造』 - アラフォー専業主婦が緩くプログラミングを学ぶブログ手順としてはざっくり下記の流れです 何を作るか決める（山梨にある酒造って事にする） 情報収集（酒蔵のサイト巡り） メインターゲットを考える（セカンドライフを楽しむ世代） イ...
tags別の記事
自主練
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自主練｜メモ｜ハイパーリンクの続き（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は少し触ったことがあったので、そこまで詰まることもなく...