詳細を見る

Webコーディング

SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう

ボタンやチェックボックスをCSSで装飾せずにデフォルトのままで使用していませんか？ 実はこれらのタグ、デフォルトで当たっているスタイルが各ブラウザで異なるんです。 iPhoneのSafariだと少し使いづらいなんて声もよく耳にします。 ボタンやチェックボックスに対してCSSを当てて全てのブラウザで見た目を統一させる方法を紹介いたします！ 各ブラウザでのデフォルトの表示 こんなタグを作成しました。 […]

詳細を見る

Webコーディング

【テスト工程】Webサイト納品前のチェックリストを大公開！

Web制作での品質管理。皆さんはどうしてますでしょうか？ Webサイト納品前の大事な工程「テスト」。チェックリストを公開します。 表示崩れはないか Webサイトに重要な要素「デザイン」。 制作現場ではデザインを基にコーディングするのが一般的です。 そしてそのコーディングがデザイン通り、もしくはデザインに則った形になっているかどうかをチェックします。 画像や文字がはみ出していたり、スマートフォンだと […]

詳細を見る

Webコーディング

Web制作の「運用・保守」って何するの？

Web制作の仕事をしていたり、発注したりするときに目にする「運用・保守」という言葉。 あまり表立って見えるような作業ではないため、運用保守費用を「無駄なお金」と感じているクライアント様も多いはず。 そこで今回は、運用・保守ではどんな作業をしているのかを解説します。 サーバー・ドメイン管理 Webサイトが置かれているサーバーやそのドメインを管理します。 必要に応じて サーバー・ドメインの設定 プログ […]

詳細を見る

Webコーディング

丸く配置したテキストがくるくる回転するデザインを作ろう！

よくおしゃれなサイトで丸配置のテキストがくるくると回転しているデザインを見ることが多くなってきました。 See the Pen 回転 by Ito Hiroki (@ito-hiroki) on CodePen. サイトのアクセントになって見栄えが増しますね。 今回はそんな丸配置のテキストが回転するデザインの実装方法を紹介します。 必要なツール Adobe Illustrator テキストエディタ […]

詳細を見る

Webデザイン

Adobe XDでパディング設定する方法

文字と長方形を作成 図形を作り、その上に文字を重ねます。 グループ化 文字と長方形を選択し、右クリック→「グループ化」 もしくはショートカットキー「⌘ + G」でグループ化します。 パディング設定 グループ化したものをクリックすると右側メニューに「パディング」が表示されます。 「レスポンシブサイズ変更」がアクティブになっていないとパディング設定できないので注意。 パディングは上下左右で数値指定でき […]

詳細を見る

Webコーディング

【コピペでできる！】　右下のSNSシェアボタンをコードを公開します。

こんにちは、Web it Worksの伊東です。 今回は、本サイトの右下に配置しているSNSシェアボタンのソースコードを公開します。 早速、コードを公開！ CODEPENにて公開しています。 See the Pen シェアボタン by Ito Hiroki (@ito-hiroki) on CodePen.

詳細を見る

Webコーディング

スマートな文字感覚。「Yaku Han JP」で約物を半角に。

こんにちは、Web it Works の伊東です。 今回は「」や（）などの文字を半角にしてくれる「Yaku Han JP」についてご紹介します。 約物って何？ Wikipediaではこのように記されています。 約物（やくもの、英: punctuation mark）とは、言語の記述に使用する記述記号類の総称で、専らフォントなど組版を意識して使われる用語である。 具体的には、句読点・疑問符・括弧・ア […]