Webサイトの作り方ついて個人的まとめ -デザイン編｜webproduct-lab
私はデザイン制作に携わって早いもので15年以上にもなります。 そんな私が個人的にWebサイトを0から制作する場合の工程を何回かに分けて少しずつご説明したいと思います。 まずはサイトのデザインをどうするか？という点ですが、昔コーディングしながらデザインを進めると言っていた方がいて驚いたことがありました。 もちろん私は画像から作り込んでいくんですが、使用するソフトはいつも決まってPhotoshopです。 IllustratorやFireworksを使う方もたまにいますが、私はエフェクトや使用感の違いからかずっとPhotoshopでデザインを進めています。 これに関してはやりやすい方で良いんじゃないでしょうか？ 写真の補正なんかも一緒に作業できちゃいますからね。Photoshopが個人的にはおすすめです。 では今回は私が行うWebデザイン作成の過程のメインデザイン作成についてご紹介したいと思いま
CSSでテキストの横に線を引く方法について｜webproduct-lab
サイトやブログを管理していて、テキストの左右に線を引きたい時ってありませんか？ 実はこれCSSで表現することができます。 その方法は何通りかあるようですが、今回は個人的にいつも使っているFlexBoxというCSSを使った方法をご紹介したいと思います。 ちょっとした見せ文字や、見出しなんかに使うと印象が変わりますので、ぜひ使ってみてください。 追加するCSS はてなブログの日付に反映させてみる では、今回ははてなブログのタイトルまわりの日付の部分に線を引くという話で進めたいと思います。 コピペでも反映できますので、クラス名だけ任意で変更して試してみてください！その際には必ずバックアップしておきましょう。 まず、はてなブログの日付にはこちらのクラス名が付与されています。 entry-date date first クラスは半角スペースで複数の要素を指定することができるので、この場合は「entr
CSSリストで作れる便利なデザイン色々まとめ｜webproduct-lab
CSSのリスト（ul,li）は、基本的にWebデザインで箇条書きといった表現をする場合に使用します。 しかし、そのデザイン・装飾はCSSはもちろん、疑似要素・疑似クラスを利用することでさらに柔軟に表現することができます。 それは、例えばボックスをリスト化して横に並べたり、要素の順番を指定して装飾する…なんてことも可能です。 では、今回はそんなCSSのリストを利用したデザインの便利な方法を簡単にまとめてみたいと思います。 この辺は使い方が色々とありますからね、個人的にコーディングでよく使うものや特に便利に使っているものを中心にご紹介してきたいと思います。 疑似クラス リンクの装飾をする:hoverなんかが昔から馴染みのある疑似クラスのひとつです。 そして、他にも様々な疑似クラスが用意されていますが、私が特に便利に使っているリストの何番目の要素…といった感じで要素を指定して装飾することなんかも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
