ブログ記事143件
会社の都合で、以前自分が作ったホームページの更新をしていました。『午前中までに...』という指示だったので、かなり急いで更新したんですが...いくら自分が作ったベースがあるとはいえ...・小見出しの追加(に伴うCSSも追加)・HTML部分の追加・ボタンの追加そして以上に伴った他のページの更新。このWebページに使うためPDFファイルから画像(パーツ)の切り出し&作成。正直、これだけやるとなると、かなりのペースでこなさなきゃいけませんでした。パソコンも
先日作った自社サイトのWebページ3枚。GOサインが出たまでは良かったんだけど...「全ページのフッターにリンクを貼って欲しい」とのこと。ということで、今後の修正も考えて「クリアフィックス」を使って作っていたものを「フレキシブルボックス」に書き換えて、全ページにリンクを貼っていました。あぁ...しんどでも...何故だかメールフォームだけがレイアウトが崩れるんですよね~ぇ。。。メールフォームだけは作り直さないといけないですね。にほんブログ村
枠線や影、透明度、文字などの傾きなどWEBサイトデザインする時の装飾に必要なコードを自動生成してくれるCSS3対応のジェネレーター。真ん中にプレビュー画面が表示されてるのでデザインを確認しながら作れます。「CSS3.0Maker」https://www.css3maker.com/左側にある“CSS3Styles”のプルダウンから効果や装飾の種類を選択して下のパラメーターで自分の好みに調整します。右側上にある“CSS3CodeviewDownload”にコードが自動生成されてい
ホームページ疲れました・・Hpの作り直しです。スキーハイクの写真がPCに溜まってきたので何気なく整理していたところ・・再びスキーハイクのHPを作り直そうと思った訳です。思い込んでしまったのです。私の悪い癖です。写真集までいかないのですがそれに近い雰囲気で写真の多いサイトを・・2週間、帰宅後は部屋に籠もって作業・・とりあえず完成・・https://ski.2lala.netスキーハイク北海道出来上がったものは素人作品です(HPも写真も)分を知らずして敷い
このところ、延ばし延ばしにしていたお勉強をせっせとコツコツ毎朝毎晩詰め込んでいます!今や便利なソフトがあるのでホームページもコードは覚えなくてもメモ書きのように、絵を描くように、1時間もかからずにホームページが作成できますが。。。本質を知りたい、さらにカスタム出来る知恵が欲しい、苦手意識なコードをクリアしたい、とか色々重なり、講師をしながらクリアすることになったのが、去年12月。ここへ来て、仕組みが分かり、いろいろ知識も増えて来たけど、まだまだ先が長すぎることをひしひ
友人に教わったのでメモ。。。実際に入れて使ってみよ。SimonPadbury/b4sthttps://github.com/SimonPadbury/b4st
とりあえず復習なども兼ねて、一つコンポーネントページを作ってみる。下記は各パーツの実装における留意点などまとめてあって大変参考になります。モジュール・コンポーネントを意識したhtml、css設計(前半)https://www.frontendmemo.xyz/entry/2017/08/25/092549
floatさせてoverflow:hidden;でfloat解除!という手はよく使うものとは思うけれど、自由度の高いレイアウトには不向きなようで、子要素が親要素をはみ出す場合に表示されずに見切れてしまう。CSSのclearfixにoverflow:hiddenを使用してはいけない理由https://iwb.jp/css-clearfix-overflow-hidden-do-not-use/
PRBlockネタいろいろできるのですが、今回はアイコンフォントではなく画像を入れて3つでなく4つ並べてみようと思います。厳密に言うとテーマというよりプラグインの機能なのですが・・・ちょっと人と違う使い方をしたい人は使ってみてはいかがでしょう。3つ並べる人多いですが、4つ並べるというのは中々いないと思います。目次PRBlockとは?アイコンフォント画像を入れるには?お知らせPRBlockとは?PRBlockとはLightningのPRBlockとはトップページに表示
レスポンシブサイトの画像を読み込ませる際の書き方について調べてみる。どんどん常識が変化していく。https://junzou-marketing.com/responsive-image訳されている記事だけれど、ブラウザに計算任せにしていることに慣れていたと気づく。いや、計算をさせてこそだけれど、より早くスムーズに処理が終わるような書き方を考えるのは大事だよね。srcsetとsizeshttps://terkel.github.io/srcset-sizes/
contentsの内容が少ない時にfooter下が空いちゃったりしない実装。http://phiary.me/css-viewport-units-vw-vh/実装方法は色いろいろあるみたいだけど、ネガティブマージンとかはあまり使いたくないなぁ。https://coliss.com/articles/build-websites/operation/css/css-sticky-footer.html
menuを横並びにするときの指定方法、floatとinline-blockどっちにするか迷ったので調べてみた。floatの方が私的には手間がない気がする。https://uxmilk.jp/60712
nth-childとnth-of-typeの違いは、普段使わないとすぐに混乱してしまいそう。。nth-of-typeは指定した要素のみを数える、nth-childは子要素を数えていって指定した要素がきたときに適用するhttps://www.halawata.net/2011/10/css3-nthoftype-nthchild/ドットインストールでもやっています。https://dotinstall.com/lessons/basic_css_styles/45434
擬似要素、なんだかよくわからず避けてきた感あるので勉強。こうして読み解くと簡単じゃん。。HTML<h1data-subtitle="-maintitle">TItle</h1><p></p>CSSh1::after{content:attr(data-subtitle);}https://dotinstall.com/lessons/basic_css_styles/45431css擬似要素のcontentをhtmlからattr()で取得するh
属性セレクタ、普段とんと使うことがなかったけれど、クラス名をいくつか使用している際などにも使えるな。a[href="hoge"]{font-weight:bold;}a[href^="hoge"]{font-weight:bold;}a[href$="hoge"]{font-weight:bold;}a[href*="hoge"]{font-weight:bold;}https://dotinstall.com/lesso
セレクタの結合子普段使ってなかった便利そうなものも色々あるなぁ。。p+phttps://dotinstall.com/lessons/basic_css_styles/45429p~pp:not(:last-child)この辺りかな…余分にクラス名を増やしたりして煩雑なコードにならないように。。https://saruwakakun.com/html-css/reference/selector
backgroundプロパティの指定方法や、できることの幅が広がってる感じ。基本の一括指定。background:no-repeatcenter/coverpinkurl(../img/header.png);background-positionとbackground-sizeの指定を/で区切るところがミソ。https://developer.mozilla.org/ja/docs/Web/CSS/backgroundinheritは値を強制的に継承する
box-shadowでは透過画像やSVGに対応できないのが悩みの種だったな…それを解決するのがfilter:drop-shadow()https://ferret-plus.com/8961これはかなり使えそう。他にも、画像にフィルターをかけるイメージフィルターというのがあるらしい。https://ferret-plus.com/5699これ、読み込み遅くなったりしないのかな?
自社サイト内のページ、1ブロック部分を作り替えることにしました。最速で済ませるならば、必要な部分をコピペすればよいのですが...ここ数年の変更でCSSが複雑になってしまっているし、それもあり、この後も整理していく必要性も感じていますので、この際ですから、見た目は、あまり変わらないように変更できればと思っています。午前中は、そのためのベース作りです。見た目は「こんなんです」が、中は、これだけ書きました(笑)午後からは、昨日のブログも書きながら進めていきたいと思います。
お昼前、自社サイトの修正+αが来ました。HTML+CGIで修正できる分は、速攻でしておきましたが...前任者が、Parl言語を使ったCGIでアップするようにしてくれていたWebページ部分は...自社サイトの管理を3年間してきて...データベースを使っている感じははないし、指示のように表示順を自由に替えたいと思うと...せっかく作って置いて行ってくれたけれど...「HTML5+CSS3」で作り直した方が良いのかなと感じています。ということで、まずは必要にな
welcartテンプレート[テーマ]のwx34の販売を開始しました。welcartテンプレート(テーマ)wx-template34html5css3で作成されています。レスポンシブウェブデザイン(ResponsiveWebDesign)wordpressテンプレート(テーマ)、welcart専用テンプレート(テーマ)、html5/css3ホームページ|販売サイトTEMPLX
welcartテンプレート[テーマ]のwx33の販売を開始しました。welcartテンプレート(テーマ)wx-template33html5css3で作成されています。レスポンシブウェブデザイン(ResponsiveWebDesign)wordpressテンプレート(テーマ)、welcart専用テンプレート(テーマ)、html5/css3ホームページ|販売サイトTEMPLX
自分の脳みその退化が怖くなり、最近自分でたまにコード書くようにしてきましたみちぁんでつみちぁんは、昔昔コーダー職をやっておりました最近は人にまかせっきりコード見ただけでしんどいやる気なし※というのはうそだけど(笑)私がやってた頃はまだモバイルサイトというのが残ってて、スマートフォンは、jQueryMobileというのが出てきてた頃でした懐かしいですね正直その辺からやってまてん最近ずいぶんとコードが変わってて危機感を覚
こんにちはtecneの小島です。朝晩冷え込むようになってきましたね。皆様お風邪など召されておりませんか?私の母は今月鼻のかみすぎで肋骨を骨折したそう。鼻をかむときはソーっとかんでくださいねさて、先日の土曜日は「HTML5+CSS3初級講座」でした。初級講座は入門編での基礎を生かし、新仕様のHTML5/CSS3の概念を学びます。「なんとなく知ってる」でも表面上は表示できるのですが、決まり事を知ることでSEO対策やレスポンシブなど、どんどん応用していけるように!私自身も出来る気
昨日はHTML5+CSS3入門講座の第1回でしたHTMLって何だろう?Webサイトってどうやって作るの?そんな初心者さんでもナルホドな全6時間です。今週末はもう少しステップアップした「初級」コースが1日で学べる講座もありますよ!旧仕様のHTMLを使用していた方、HTMLの基礎は知ってるけど…という方は是非チェックしてみてくださいね11月17日【1日速習】HTML5+CSS3初級講座
「ほぼ素のタグのままデザインができてしまうデザインテンプレート」と噂を聞いてメモ。「xchema」で検索しても、「もしかして:schema」としかヒットしないので、URLを控えておこう。xchema|xtylehttp://xchema.com/xtyle/xtyleの特徴としては素のHTMLタグを活かしたシンプルさにあります。スタイルシート、JavaScriptが提供されており、Webアプリケーションが素早く手軽に作成できるようになります。多数の機能を使うならBootst
この記事には一部、Amebaの健全なサイト運営にふさわしくない言葉・表現が含まれている可能性がある為アクセスすることができません。
welcartテンプレート[テーマ]のwx31の販売を開始しました。welcartテンプレート(テーマ)wx-template31html5css3で作成されています。レスポンシブウェブデザイン(ResponsiveWebDesign)
welcartテンプレート[テーマ]のwx30の販売を開始しました。welcartテンプレート(テーマ)wx-template30html5css3で作成されています。レスポンシブウェブデザイン(ResponsiveWebDesign)