ホームページ制作
rounin-samurai.com メインビジュアルの画像切り替えや､ハンバーガーメニューなど･･･｡ 対応に追われていました｡しかし､ようやく､もうやることはなくなった｡｡｡ また､Tailwind CSSで遊ぼうかな｡あるいは､また､ゴッソリとデザインを変えるか･･･｡ 答えは､まぁ､Ta…
浪人のサムライです。 本日、またもや、ホームページをリニューアルしました。 rounin-samurai.com Tailwind CSSで制作していたのですが、普通にHTMLコーディング。3時間程度で完成させました。 ホームページの方向性は変えていません。今のところ、ホームペ…
Tailwind CSSでホームページを制作して､最初はメインサイトがあったので､サブで運営していました｡こやつです｡ rounin-samurai.com しかし､メインサイトのデータのアップロードで､失敗しました｡バックアップで復旧したのですが､｢あ､この際､サブをメインサイト…
少し前から､Tailwind CSSを使っています｡ Tailwind CSSとは CSSの名前を考えなくて良い さいごに Tailwind CSSとは tailwindcss.com Tailwind CSSとは､簡単に言うと､CSSファイルにCSSを書くのではなくて､HTMLファイル内にCSSを書きます｡ ただ､公式サイトで､…
ホームページにブログ機能を付けました｡ rounin-samurai.com 機能と言っても､単純にブログっぽくデザインをしているだけです｡ 記事の一覧ページと､記事ページの両方とも更新｡ はてなブログなど､ブログサービスは､記事の執筆に専念できますが､ホームページの…
最近､ホームページ制作にハマっていますが､この度､ホームページでブログ風のサービスを開始しました｡ rounin-samurai.com あくまでブログ｢風｣です(笑)｡ 最低でも2ページ､更新する必要があり､かなり面倒ですが､まぁ､デザインを自由に操ることができるので｡ 何…
最終形態。 rounin-samurai.com 細かいバグはつぶした サイドバーのリンクは 参考になる記事を見ながら さいごに 細かいバグはつぶした トップページ以外は、ほぼそのままですが、トップページのみ、かなりデザインをいじりました。 ブログに見えますが、こ…
先日、ホームページをリニューアルしました。 rounin-samurai.com 既存のCSSを維持しつつ、必要なHTMLコーディングをする。とくに、CSSは被るといけないので、細心の注意を払いました。 BEM記法とSCSSで回避ですが、既存のCSSも使いたい。僕のホームページの…
rounin-samurai.com トップページのみですが､リニューアルしました｡ 他のページとCSSが被らないようにしました｡ 被ると､エラーが出ます(えらーいこっちゃｗ)｡ 3時間くらいかけて取り組みましたが､楽しかった｡ 定番の2カラムレイアウト｡ 一見､ブログに見えま…
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; hei…
rounin-samurai.com パソコンで使っていた、外付けキーボードが壊れかけ。3つのキーが押されっぱなしになります。 何回か、キーを押すと治りますけどね。 買い替えを検討中。安いのモノで良いです。 さて、本日は手動カルーセルをCSSで作る作業。CSSだけでも…
rounin-samurai.com 1時間くらいで出来ました｡ HTMLやCSSは上の僕のホームページで解説しています｡ JavaScriptで動かすことも出来るようですが､CSSで出来るなら､JavaScriptは必要ないかな｡ それ以上のことを求めていないので･･･｡ ブログではあまり関係ないで…
rounin-samurai.com SCSSのmixinについて解説しました｡ できるだけ､簡単に説明したつもりです｡ ぼく自身､mixinに悩んだことがあり､今は解決していますが､備忘録として残すことにしました｡ 理屈が分かれば簡単ですが､それはまぁ､理解するまで時間がかかるわけ…
rounin-samurai.com 画面サイズが768pxまでは1カラムで、コンテンツ→サイドバー。 そのサイズを超えると2カラムでサイドバー→コンテンツ。 詳しくは、上のサイトをご覧ください。 ちなみに、1時間程度でできるモノです。 あまり、使いどころはないか。 そん…
10分でできる 解説ページを作るのは楽しい さいごに 10分でできる rounin-samurai.com CSSを知っているなら、10分でできます。 詳しくは上のホームページを見て頂くとして、ここではコードのみ、書きます。 HTML。 <div class="wrapper"> <div class="content"> <p>コンテンツ</p> </div> <aside class="sideBar"> <p>サイドバー</p> </aside> </div> CSS。 wrappe…
フォントの変更 一部、太字に さいごに フォントの変更 少し､フォントを変更しました｡ サクッと対応｡ 今､こんな感じです｡ rounin-samurai.com 興味がある人は、ご覧ください。 変えるだけで、サイトの印象が変わりますね。 30分くらい悩みましたが、何とか出…
SCSSを極める 楽しいのが1番 欠点を克服しない さいごに SCSSを極める 昨日､Pythonの勉強を再開｡ 2回目の挑戦なので､最初よりは簡単です｡ただ､基礎の基礎ですが｡ ただ､僕の場合､どうも好きになれない｡ 理由は､ネットで調べると､様々な情報があります｡選ぶの…
よく見る､3カラムレイアウト｡ 実装は､実は､結構手間｡ HTMLはこんな感じで｡ <div class="wrapper"> <div class="leftContent"> <p>レフト</p> </div> <div class="centerContent"> <p>センター</p> </div> <aside class="sideBar"> <p>ライト</p> </aside> </div> スマホで見たとき､｢レフト→センター→ライト｣になります｡ 両サイドは､コンテンツでなくて､ナビゲーションが多いです｡ スマホで見たときは､センターを…
HTMLコーディングをする前に Adobe イラストレーターで 適当に 楽しい さいごに HTMLコーディングをする前に 前はワイヤーフレームを作っていませんでした｡ ワイヤーフレームとは､ホームページの設計図みたいなモノです｡ これを作ると､HTMLコーディングが便…
浪人のサムライです｡ 長らくの間､取り組むのをやめたホームページ制作｡ 今日からまた､ホームページ制作を始めます｡ 一通り終わったので HTMLコーディングで 僕のホームページは さいごに 一通り終わったので ロゴ制作や小説の執筆をしていましたが､どうやら､…
rounin-samurai.com 不定期でデモサイトを作っていたら、50コをこえました。 「何かあるのか？」というお話ですが、何もありません。 淡々とデモサイトを作るだけです。 普段、画像を使うことはあるのですが、こんなんばっかり。 例えば、このデモサイトは、…
最近、ホームページ制作にハマっていて、毎日、作っていますけどね。 1日中ではないです。他のこともしています。 しかし、少し苦労した。 「忘れないうちに、記録に残しておくことにした。こやつです。 rounin-samurai.com 文字と画像を交互にCSSで実現。 …
１日かけて出来たデモサイト。 rounin-samurai.com イラレでワイヤーフレームを作って、そして、その通りHTMLコーディングをする。 疲れた・・・。 1つ思ったのは、横並びはflexよりgridの方が管理しやすい。 上のデモサイトの下部の6つのボックスは、3列で…
デモサイトを作るときは、ワイヤーフレームを作りません。 しかし、今、あるサイトを作る必要があり、ワイヤーフレームを作っているお話。 イラレで イラレよりフォトショップか さいごに イラレで Adobeイラストレーター（以下イラレ）が大好き。 しかし、…
以前、この場で紹介した可能性がありますが、ボタンを下揃えする解説ページを作りました。 こやつです。 rounin-samurai.com ブログデザインで、使う機会はあるか。 ホームページデザインなら使う可能性がありますが、おそらく、ブログデザインで採用する可…
浪人のサムライです。 今回は3カラムレイアウト。以下のページで詳しく書いています。 rounin-samurai.com この場では、簡単に書いてみたい。 HTML HTMLは以下になります。 <div class="wrapper"> <div class="wrapper__left"> <p>左コンテンツ</p> </div> <div class="wrapper__center"> <p>真ん中のコンテンツ</p> </div> <div class="wrapper__right"> <p>右コンテンツ</p> </div> </div> wrapperで3つのコンテンツ…
rounin-samurai.com 最低限のHTMLとCSSを書きました。ページ自体のデザインは大昔のモノ(笑)。 ただ、Chromeなどの検証ツールで読みやすくしています。 その気になれば、Webデザインができますが、あくまでコードの紹介。 シンプルで画像なし。すべてHTMLとC…
浪人のサムライです。 ブログで公開していた、HTMLコーディングを僕のホームページで、改めて紹介しています。 今日は、小見出しのデザインのページを作りました。 rounin-samurai.com コード記載に特化していて、Chromeなどの検証ツールでわかりやすくして…
最近、HTMLコーディングでコードを載せる機会が多くなりました。 ブログは手軽なのですが、参考画像を作るのが面倒でして。 ブログ記事だと、「コードを載せて終わり」が多いですが、ぼくはレンタルサーバーを借りているので、新しくページを作ることにした…
