ホームページ　作り方

最終形態。 rounin-samurai.com 細かいバグはつぶした サイドバーのリンクは 参考になる記事を見ながら さいごに 細かいバグはつぶした トップページ以外は、ほぼそのままですが、トップページのみ、かなりデザインをいじりました。 ブログに見えますが、これは、ホームページです。 理想のデザイン。 満足じゃ(笑)。 ただ、テストで問題なくても、本番で公開すると、アウトになる場合もあります。その都度、テストで対応して、また本番環境にデータをアップ。それの繰り返しです。 しかし、問題ない。これにて終了となりました。 サイドバーのリンクは サイドバーのリンクの前にある、矢印はイラレで作って、…

rounin-samurai.com 浪人のサムライです。 ホームページの運営を始めて1年が経過しました｡ 1年前の4月19日 HTMLコーディングで さいごに 1年前の4月19日 ホームページに変更を加えたら､記録しています｡ こちらですね｡ rounin-samurai.com 記録しておいて良かった｡ 今後も記録します｡ 楽しいですね｡ そもそも､僕は無料のサービスを使っていました｡しかし､レンタルサーバーを借りてホームページを運営することに｡ サブスクなので､お金がかかりますが､僕の場合は､缶ジュースを何本か我慢すれば良いので､財布に優しいです｡ 今後も運営したい｡ そんなことを思って…

SASSのfor文 学習した時間 SASSにハマっている さいごに SASSのfor文 使いどころはあまりないのか・・・。イメージ出来ないですが。積極的に使いたい。 SASSはこんな感じです。 @for $fo from 1 through 3{ .foo-#{$fo}{ background: red; width: 100px; height: 100px; } } ３回繰り返す、for文です。「.foo-」はクラス名。好きなモノで構いません。 あとは、普通にCSSを書くだけ。CSSにコンパイルすると、以下になります。 .foo-1 { background: red; width: 10…

rounin-samurai.com 1時間くらいで出来ました｡ HTMLやCSSは上の僕のホームページで解説しています｡ JavaScriptで動かすことも出来るようですが､CSSで出来るなら､JavaScriptは必要ないかな｡ それ以上のことを求めていないので･･･｡ ブログではあまり関係ないですが､ホームページで割と見ることが多いですね｡ 簡単に解説 今回､カルーセルで動かしている画像は､背景画像です｡普通にimgを使っていません｡理由は､画像サイズが変わると､幅や高さが揃わないから｡imgでもできますが､背景画像として扱うのが簡単です｡ また､高さを変えても､伸縮が変な感じになりませ…

SCSSを極める 楽しいのが1番 欠点を克服しない さいごに SCSSを極める 昨日､Pythonの勉強を再開｡ 2回目の挑戦なので､最初よりは簡単です｡ただ､基礎の基礎ですが｡ ただ､僕の場合､どうも好きになれない｡ 理由は､ネットで調べると､様々な情報があります｡選ぶのが大変｡ 極めるなら､本を買って勉強をした方が､良い気がします｡ あと､英語の解説が結構多く､日本語しか分からない､僕の場合は無理があります｡ なので､Pythonをマスターしたいなら､本を買うしかない｡高いので買えませんが｡ そこでSCSSを極める事にしました｡ ただ､9割はマスターしていますが｡ ただ､残りの1割をマスタ…

よく見る､3カラムレイアウト｡ 実装は､実は､結構手間｡ HTMLはこんな感じで｡ <div class="wrapper"> <div class="leftContent"> <p>レフト</p> </div> <div class="centerContent"> <p>センター</p> </div> <aside class="sideBar"> <p>ライト</p> </aside> </div> スマホで見たとき､｢レフト→センター→ライト｣になります｡ 両サイドは､コンテンツでなくて､ナビゲーションが多いです｡ スマホで見たときは､センターを先頭に持っていきたい｡そこで､SCSS…

HTMLコーディングをする前に Adobe イラストレーターで 適当に 楽しい さいごに HTMLコーディングをする前に 前はワイヤーフレームを作っていませんでした｡ ワイヤーフレームとは､ホームページの設計図みたいなモノです｡ これを作ると､HTMLコーディングが便利になります｡ このあと､デザインカンプを作るのですが､それはしていません｡理由はめんどくさいからです(笑)｡ デザインカンプはホームページを見たときのデザインを作ること｡ 人様に見せるさいは､デザインカンプを作った方が良いですが､デモサイトなので､適当です(笑)｡ そんな感じであります｡ Adobe イラストレーターで ワイヤー…