浪人のサムライ（旧kawa@noter）
ホームページ制作中心記事のマガジンです｡
今、新しいデモサイトを作っていて、ページ遷移する際に、ヘッダに貼り付けるということをしています。 下にスクロールしていくと、積み重なるようにしています。使い方は簡単で、親要素にこやつを書く。 position: sticky;top: 0; たった2行(笑)。親要素に根こそぎ上のコードを書きます。 ところが、スマホでは大丈夫なのですが、PCで表示というか、画面幅が1024pxを超えると、親要素間の余白が出ないという事態。すべてでなくて、あちらこちらへと。 margi
浪人のサムライです。 本日、デモサイトのバージョン10をリリースしました。 こやつになります。 今回、メインビジュアルの部分に記事を置いて、そして横スライドさせて表示してみました。 スクロールバーを消したかったのですが、PCではスクロールバーを表示させないと横スクロールができない状態になったので致し方ない。 なので、そこは妥協しました。 結構時間がかかったのですが、かなり勉強になりました。 使うシーンはあるかと聞かれたら、あまりないと思います(笑)。ただ、テンプ
浪人のサムライです。 ぼくはHTMLコーディングをするさい、大好きなAdobeドリームウィーバーを使っています。便利ですねぇ～。サブスクなので使っていますが、満足度は高いです。 が、久々にvscodeを使ってみた次第。 プラグインの設定がめんどくさいちなみに、vscodeは長い期間使っていたこともありまして、まぁ、こやつがあればAdobeドリームウィーバーはいりません。 しかし、いつの日か「Adobeドリームウィーバーが気になるな、使ってみよう」ということで使いはじめ
浪人のサムライです。 本日、デモサイトのバージョン9ができました。 左にサイドバー、右にコンテンツです。 要するに、ブログレイアウトですね。 今回、スマホで表示させたときは、コンテンツの下にサイドバーを持ってきています。時間に余裕がある方は、スマホとPCで見てください。 display:flexとorderを使っています。 ちょっとだけコンテンツの書き方に戸惑いましたが。あまりしたくないですね(笑)。 ま、あまり実用性はないと思いますが、デモサイトでさまざまなレ
毎日デモサイトを制作しています。 楽しいですねぇ～。 DWを使っていて、まぁ、ちょっと「これは！？」というのがありますが、まぁ、vscodeより設定は簡単なのかなとは思います。 さて、デモサイトごとにメインビジュアルを作っていて、「ちょっとだるい笑」なんて思いまして。 なので、デモサイトのバージョン9からこんな感じにします。 文字はすべて自作です。これだと全然問題ないですね。 デモサイトが増えるにつれ、数字が上がっています。目指せ100？(笑)。 結構時間を使っ
デモサイトのバージョン8ができました。 こやつです。 もう8作目となりました。 ほぼ1カラムにすることは無くて、基本2カラムとか3カラムがほとんどです。 まぁ、組み合わせすることもありますが。 そのときは、結構複雑になってきます。なので、集中しないとダメ。途中でやめると再開したとき「あれ？どんな感じだった？」なんて思って、コードを解析しないといけません。 で、今回のデモサイトは3カラムです。 display:gridを使っています。display:flexでも良
現在、絶賛メンテナンス中のぼくのホームページ。 最新版はこちらです。 メインビジュアルをいじり倒して、そして、こんな感じで終結しました。 今回、文字は手描きしました。 中々の出来映え？ 知らんけど(笑)。 「今日は終わりだ」ということで、ローカルでホームページを開き、各ページのリンクを踏む。 しかし。。。 memo.htmlを開くと、グローバルナビゲーションの文字が小さくなることが判明・・・。 memo.htmlはこんな感じのページ。 グローバルナビゲーシ
本日、デモサイトのバージョン7ができました。 今回はブログ風レイアウトにしました。 結構複雑なHTMLとCSSでして、一歩間違うとえらいことになります。なので、注意深く対応しました。 なお、次回から画像はこやつを使います。 写真をいれるべきところに上の画像を使います。 今までは、薄いグレーの背景でしたが、分かりにくいのでハッキリと存在感のあるモノにしました。 ちなみに、ロゴの色と合わせました。間違っていなければ同じ色だと思います。 本当は写真を用意すればよいのか
朝から悩みに悩み、サンプルを作っては削除し・・・。 ようやく完成しました。 上のモノです。ホームページで見るとちょっと印象変わるかな？ ホームページだとこんな感じになりますので、気になる方はWebへ(笑)。 デモサイトの制作が進まず。 しかし、この辺でやめてデモサイト制作をしようと思います。 ちなみに、メインビジュアルは透過PNGですので、背景を変えることもできます。円形と文字の部分は無理ですが。 ま、変更することはないと思うのですが、念のため透過PNGにしまし
本日、デモサイトのバージョン6ができました。 メインビジュアル画像の作成に戸惑いました。 かなり難しいですね。そんな感じがします。 HTMLコーディング自体はさほど苦にならず、まぁ、単純なカラムなので複雑なことはしなくて問題ないですね。 今、ブログレイアウトに挑戦しているのですが、結構複雑でして・・・。何とか組めましたが。 まだ開発中なので、お見せすることはありません。最短で明日になるのかなと思います。 バージョン6が気になる方は、上のリンクをクリックしてみてくだ
以下ページのメインビジュアルを変更しました。 Adobeイラストレーターでメインビジュアルを作っていたのですが、ちょっとしたことはAdobeイラストレーターを使うまでもありません。 トップページのみメインビジュアルはAdobeイラストレーターで制作しました。こやつです。 冒頭の上の3ページは、CSSでしました。Adobeイラストレーターより簡単でありまして、もうこだわりがないなら、CSSでちゃちゃっとしてしまえって話でして。 CSSなので、色を変えたくなったらback
どうあがいてもCSSが思うように効かない。 display:noneは効くのに、マージンやパディングが効かない。1時間くらい格闘・・・。 結果、HTMLのスペルミスでした(笑)。 articleのスペルミス。 気を付けないと・・・。 ネットで軽く調べてみたのですが、それらしい情報はありませんでした。 なのでHTMLやCSSを見まくりまして、そしてスペルミスを発見・・・。今後、CSSが効かないときは、スペルミスがないか確認したいと思います。 それにしても勉強になり
浪人のサムライです。 本日、デモサイトのバージョン5ができました。 1つ問題がありました。それは、ロゴにマウスの矢印を持っていくと下線ができること。ま、別に良いのですが、意図しないことが起きるのは問題ありと思いまして・・・。 30分くらいかけて治しました。中々手強かった。過去のデモサイトを見ると、バージョン4あたりから問題が発生していました。すべて治してサーバにアップ。 問題ないことを確認しました。 ちなみに、リリースノートを作っていて、過去のことはすべてこちらのペ
前ほど制作の頻度は高くないですが、ロゴも公開しています。公開しているページはこちら。 ロゴは生涯かけて取り組むとという考えは変わっていませんが、まぁ、ホームページ制作にも生涯をかけて取り組む感じにしたいと思います。 少しホームページ制作熱が冷めたところで、今、メインビジュアル画像の制作にはまりつつあります。最新のメインビジュアルはこちら。 メディアクエリで切り替えています。なので、スマートフォンとPCでメインビジュアル画像が変わるというお話。 2個作るのはめんどくさい
浪人のサムライです。 昨日、少しだけvscodeを使ってみました。 結果から言うと、今使っているAdobeドリームウィーバーでいいや。 理由は、vscodeの場合、豊富なプラグインがありまして、それをインストールすれば便利なエディタになります。 実は、かなり前からvscodeを使っていて、あるとき、起動しなくなりました。それからAdobeドリームウィーバーに乗り換えた歴史があります。 今、ガンガンAdobeドリームウィーバーでHTMLコーディングをしていますが、画面
浪人のサムライです。 本日、デモサイトのバージョン4ができました。 今回、ドリームウィーバーでなくてvscode使ってみたのですが、まぁ、ドリームウィーバーで十分ですね。 今後もドリームウィーバーを使いたいと思います。 メインビジュアルを作ったさて、今回、Adobeイラストレーターでメインビジュアルを作りました。 こやつですね。 PCとスマホ、それぞれメインビジュアルを作りました。制作時間は1時間程度でした。 CSSでメインビジュアルを作るよりCSSでメインビジ
