pochiplus

WEB MEMO & LIFE BLOG

WEB

本サイトで参考にしたデザイン&CSSのWEBサイト&本

投稿日:2014.9.8 更新日:


作りたいものは中身でデザインは簡単に

これでも一応プログラマ志望というか、プログラマ・・・なので、
デザインに時間をかけるよりも、本業の勉強に時間をかけたい。
なので、今は?コピペでもよいからとにかく早くサイトを作りたい!

という思いから作成しました。

下記、まとめです。

ナビゲーションや記事の枠組みデザインCSSはCSSデザイン集から!

こちらには大変お世話になりました。
使える素材が沢山載っています。

背景画像はsubtlepatterns.comより

LIGさんの記事「これが無料!?背景画像のフリー素材配布サイト 14選」で見つけた
Subtle Patternsというサイト。
沢山種類があってオシャレ!

「時計マーク」や「タグアイコン」等アイコンフォントはFont Awesomeから

リンク先を貼れば、ダウンロードしなくても使えるというのがとても便利なFont Awesome


もとはこちらの本で知りました。この本もFont Awesomeを使ってます。というか、この本は初心者には最高にオススメです!

見出しのデザインはCSS見出し ジェネレータ

ググったところ見つけました。
見つけて思ったのが、あ、これ利用してる人多いな・・・他のサイトでちらちら見る。
CSS見出し ジェネレータではリボン風に生成できますが、私はその部分を削除して作ってます。

BIOGRAPHY部分の経歴につかったCSSデザイン

参考になるものばかり載っているWEBクリエイターボックスさんの記事「経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン」を参考にしています。

引用部分に使ったCSSデザイン

CSS Lectureというサイトのblockquote(引用部分)をCSSでデザインするサンプル集から利用させていただきました。
クォーテーションマークの無料ダウンロード探しましたが、どうもリンクが切れているようで、なしで作成しました!

ソースコードの表示にはSyntaxHighlighter

こちらもぐぐって見つけました。結構利用されてる方多いですよね。
利用方法はこちらのサイトで確認しました。

最後に

なんていうか、コピペベースである程度のものは作ることができるようになっていますね。
著作権フリーの同じ写真素材もいろんなサイトでみたり笑

オリジナル力をもっと高めいくのも目標です。

-WEB
-,

Copyright© pochiplus , 2018 All Rights Reserved Powered by AFFINGER4.