ドリームウィーバーを使ってみた。

あらかじめ言っておきますが、ぼくはWebデザイナーじゃありません。 昔はバリバリとWebデザイナーをしておりましたが。 当時、結構前ですが、会社で何を使ってコーディングしていたか忘れました。 確か、マイクロソフト系のアプリだと思っていますが。 vscod…

Adobe illustratorでWebデザインをする

Webデザインをする際、何を使うのか。 ぼくは、XDを使っていました。 XDを使っていた 先ほど書いたように、XDを使っていました。 動作が軽く使い方も簡単。 ほぼノーストレスで使えておりました。 複雑な機能もありますが、ぼくの場合は必要なし。 なので、…

1000本ノック

2月1日からホームページ制作を再始動しています。 ぼく、実務経験ありのWebデザイナーでして・・・。 今は違いますが。。。 で、時間があるときは、ずーっとホームページ制作をしています。 いやぁ・・・。 ムズカシイですね。 久しぶりで感覚を取り戻すため…

設計はちゃんとしないといけない話

2月1日からホームページ制作を本格的に再始動していますが、まぁ、感覚が鈍っている部分もあり。 なので、とんでもないミスをすることがあります。 Classを付け忘れ ボタン類で 二度手間 さいごに Classを付け忘れ あとから「あ、、、Class付けなあかんやん」となり、対…

【ブログデザイン】float、やめました。

当ブログは、はてなブログでデザインテーマを自作しています。 2カラム構成ですが、floatを使っていました。 しかし、限界がある・・・。 そこで、flexを使うことにしました。 実は、floatのままで行こうと思っていたのですが、能力の限界というか、2時間くらい粘っても問…

久しぶりにHTMLコーディング。

かなり久しぶりにHTMLコーディングをしました。 Adobe XDでWebデザインをして いざHTMLコーディング SCSSが効かない! HTMLコーディングは楽しい ガンガンHTMLコーディングをしていこう さいごに Adobe XDでWebデザインをして 普段はAdobeのイラストレーター…

Adobe XDを使い始めた。

デザインカンプはイラレを使っていて、前、少しだけAdobe XDを使っていたのですが、イラレに戻っていました。 しかし、やはり、「Adobe XDが忘れることが出来ない」なんて思いまして、サクッとAdobe XDを使い始めました。 「あれ?文字入力できない・・・」 …

【CSS】画像の置き方は

css

ノートパソコンのファンの音がうるさくて、ノイズキャンセリングヘッドホンをつけていないと耐えることができません。 3年ほど使っているのですが、買い換えか?あるいは修理。もしくは我慢・・・。 今のところは我慢に一票にしておきます。 さて、ホームページ制作を…

BEMの勉強は楽しいが。

昨日からBEMの勉強をしています。 理解するのは大変ですが、 「これはアリかも知れない」 と思いましたね。 ひたすらHTMLとSCSSを打っている 仕組みは理解した 癖を付けるために さいごに ひたすらHTMLとSCSSを打っている テストサイトを持っているので、それを使…

BEMについて学ぶ。第2弾

前回の記事で、BEMにメリットってある?って書きました。 coooool.hatenablog.com クラス名が長くなるから嫌だ~。 なんて思ってたのですが、どうやらそれは大きな間違い。 改めて勉強した。 そして、 BEMはいいぞ。 そんな感じで思いました。 まだ、人様に説明できる…

BEMについて学ぶ

css

今、CSSの命名規則である、BEMについて勉強しています。 一言で言うと、「これ、なんかメリットある?」という感じでした。 クラス名が長くなるし打ち間違いが増える。 なので、長いクラス名になるとコピーしておかないと間違います。 まだ、勉強を始めたばかりなので、勉…

【CSS】文字を縦横中央に置く方法

css

今回は、CSSにおける文字を縦横中央に置く方法について書いていきたい。 HTML CSS 使いどころ さいごに HTML HTMLはこんな感じになります。 <div class="photoBox"> <p>image</p> </div> 初心者でもわかる内容となっております。 念のため書いておくと、photoBoxというクラス名を付けています。 最も簡…

scssの勉強中。

SCSSはCSSのバージョンアップ版。 CSSで書いていて、「あ、このコード、何回も書いてるわ」って時に、SCSSを使えば便利。 たとえば、マージンとか。予め、 @mixin mg($mgr: 30px) { margin-bottom: $mgr; } と書いておく。あとは、mgと言う名前を付けた。 デフォルトは30px…

column-countが便利かも知れない

子要素を横並びするとき、色々と方法がありますね。 float flex grid ですね。 よく使うのはflexですね。 親要素に「display:flex」と書けば子要素が横並びします。 簡単ですねぇ~。 今までfloatを使っていたのですが、今でも使いますね。 たとえば、このブログは左に…

デザインテーマ「バージョン3」を公開しました。

本日、デザインテーマ「バージョン3」をリリースしました。 サイドバーを左側に スマホ表示で 2時間程度かかった 大幅なデザイン変更 だいぶ慣れた さいごに サイドバーを左側に サイドバーを左側に持ってきました。 中々ないデザインだと思います。 王道レイアウ…

【デザインテーマ】バージョン2をリリースしました。

デザイン変更の大きな点はありませんが、内部でバージョンアップしました。 1日ほどかかりました。 コードも最小限になったはず。 ローカルでデザインテーマを制作して、デザインCSSに貼り付けて公開すると、かなりの確率でレイアウトが崩れますね。 よって、最終的…

もうちょっと綺麗にCSSを書きたい。

今、早くもバージョン2のデザインテーマを制作しています。 今のデザインテーマは「とりあえず作りました」というソースコード。 絡まりまくり。。。 なので、今、改めて作り直している状態です。 大まかにはデザインを変えていません。 内部のCSSをいじっているだけ。 だ…

【デザインテーマ】バージョン1.4をリリースしました

はてなブログにおけるデザインテーマ、「バージョン1.4」をリリースしました。 見出しデザインの変更 タブレットで左右の幅が異なる問題を修正 対応時間 さいごに 見出しデザインの変更 左右に線を引き、中央に文字を置いていましたが、キーワードリンクが発生する…

はてなブログにおける見出しのカスタマイズ

本日は、はてなブログにおける見出しのカスタマイズについてです。 見出しとは以下です↓ これが見出しのデザインです 文中の見出しを付けるときに表示されます。 具体的に、はてなブログではどこを指すのか。 それを書いてみますね。 CSSでカスタマイズ そもそも、…

【デザインテーマ】バージョン1.3をリリースしました。

デザインテーマ、バージョン1.3をリリースしたので内容を書いてみたいと思います。 見出しデザインの変更 スマホ表示でコンテンツが真ん中に表示されない問題を修正 文字サイズを変更 さいごに 追記 見出しデザインの変更 見出しデザインの変更をしました。 左…

【デザインテーマ】バージョン1.2をリリースしました。

本日(2022/10/19)デザインテーマ、「バージョン1.2」をリリースしたので内容を書いてみたいと思います。 タブレット以下の画面でサイドバーの表示を修正 見出しの線をコンテンツ幅に合わせる変更 かかった時間 さいごに タブレット以下の画面でサイドバーの表…

【デザインテーマ】バージョン1.1をリリースしました

本日、デザインテーマ、「バージョン1.1」をリリースしたので書いてみたいと思います。 ブログタイトルに矢印を追加して左揃えに 見出し周りの調整 レスポンシブ対応を強化 コンテンツとサイドバーの間隔を調整 対応時間 バグ潰しにかかる CSSが分からないと辛い…

【デザインテーマ】バージョン1をリリースしました。

デザインテーマはたくさんあるけれど、「オリジナルなモノが作りたい」と思いました。 初めてではない 2日程度でリリース あとは運営しながら対応していく テーマストアにアップするつもりはない さいごに 初めてではない その昔、デザインテーマを自作したことが…